Android Material Design 따라하기 10 - 프로그레스 인디케이터 (ProgressIndicators)

안녕하세요. 프로나인 입니다.

요즘 현실세계가 너무 바빴더니.. 잊고 있었던 블로그를 오랜만에 들어왔더니 마지막 게시글이 무려 1년..전이네요.. 😂

다시 마음을 다잡고 여러가지 기술들과 애니메이션 적용 등등 글로 작성해보도록 하겠습니다😊

 

이번에는 실제로 사용하는 어플들에서 자주 보이는 프로그레스 인디케이터에 대해 다뤄보도록 하겠습니다! 

 

❗️앞에 게시글들을 보니까 메뉴를 추가하는 로직을 게시글 맨 처음에 달아 뒀었는데 글 주제와 헷갈릴 수 있어서 이제 게시글 넣는

로직은 제외 하도록 하겠습니다. 방법은 똑같으니까요 ㅎㅎ

---

전체 소스코드

public class @클래스명 extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.progress_indicators);

        Button btn_ramdom = (Button) findViewById(R.id.btn_ramdom);
        Button btn_25 = (Button) findViewById(R.id.btn_25);
        Button btn_50 = (Button) findViewById(R.id.btn_50);
        Button btn_75 = (Button) findViewById(R.id.btn_75);

        final LinearProgressIndicator progress1 = (LinearProgressIndicator) findViewById(R.id.progress_bar);
        final CircularProgressIndicator progress2 = (CircularProgressIndicator) findViewById(R.id.progress_cir);
        progress1.setIndeterminate(true);
        progress2.setIndeterminate(true);


        //RAMDOM Button Click Event
        btn_ramdom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                progress1.setVisibility(View.INVISIBLE);
                progress1.setIndeterminate(true);
                progress1.setVisibility(View.VISIBLE);

                progress2.setVisibility(View.INVISIBLE);
                progress2.setIndeterminate(true);
                progress2.setVisibility(View.VISIBLE);
            }
        });

        //25% Button Click Event
        btn_25.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                progress1.setProgressCompat(25, true);
                progress2.setProgressCompat(25, true);

            }
        });

        //50% Button Click Event
        btn_50.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                progress1.setProgressCompat(50, true);
                progress2.setProgressCompat(50, true);

            }
        });
        //75% Button Click Event
        btn_75.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                progress1.setProgressCompat(75, true);
                progress2.setProgressCompat(75, true);

            }
        });
    }
}

 

XML 소스

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.progressindicator.CircularProgressIndicator
        android:id="@+id/progress_cir"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="30dp"
        android:layout_marginRight="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/progress_cir"
        app:trackCornerRadius="100dp" />

    <Button
        android:id="@+id/btn_ramdom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="RAMDOM"
        app:layout_constraintBottom_toTopOf="@+id/btn_25"
        app:layout_constraintLeft_toLeftOf="@+id/btn_25" />

    <Button
        android:id="@+id/btn_25"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:text="25%"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/btn_50"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:text="50%"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/btn_25" />

    <Button
        android:id="@+id/btn_75"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:text="75%"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/btn_50" />


</androidx.constraintlayout.widget.ConstraintLayout>

---

먼저 전체 소스 코드를 확인해보면, LinearProgressIndicator 와 CircularProgressIndicator 두가지가 있습니다.

LinearProgressIndicator 는 '선형 진행 표시기' 라고 하고, 막대기 모양으로 한줄로 쭉 이뤄져 있는 것입니다.

CircularProgressIndicator 는 '원형 진행 표시기' 라고 하고, 원형으로 동글동글하게 생겼습니다. 

 

두개의 속성값은 같기 때문에 같이 보여드리도록 하겠습니다. 

---

Indeterminate - 불확실성 

Indeterminate 의 속성은 불확실성을 뜻하면서, 프로그레스를 계속 램덤하게 진행 할 때 사용하게 됩니다. 

//선형 진행 표시기
final LinearProgressIndicator progress1 = (LinearProgressIndicator) findViewById(R.id.progress_bar);
progress1.setIndeterminate(true);

//원형 진행 표시기
final CircularProgressIndicator progress2 = (CircularProgressIndicator) findViewById(R.id.progress_cir);
progress2.setIndeterminate(true);

setIndeterminate(true) 로 함으로써 불규칙적으로 계속 프로그레스를 작동하도록 해줍니다.

---

속성 - ProgressCompat (진행도)

Indeterminate 의 속성으로 프로그레스의 진행도를 불확실성 하도록 램덤하게 진행을 시켰다면,

반대로 프로그레스에 진행도를 표시해주는 속성입니다. 

//진행도 25% 
progress.setProgressCompat(25, true);

//진행도 50%
progress.setProgressCompat(50, true);

//진행도 99%
progress.setProgressCompat(99, true);

'25' 라고 쓰여진 부분은 프로그레스의 진행도 값을 넣어주는 Int 값 입니다. 

위와 같이 '25' 외에 0 ~ 100 사이의 Int 값을 넣고 컨트롤 해주면 간편하겠죠 ? 

 

---

주의! - Progress 재 실행 할 때 오류

Progress Indicators (프로그레스 인디케이터) 에 관련된 글을 쓰면서 발견 한 사항인데 

진행도가 램덤 -> 정해진 진행도 -> 램덤 으로 하게 되면 오류가 발생하게 되는데

이때 정해진 진행도에 대해서 다시 램덤으로 돌리기 위해서는 Progress Indicators 를 Hide 나 Visible 사용 후 

setIndeterminate(true) 적용 후 Visible 해주도록 안내를 하고 있습니다. 

Note: Once indeterminate progress indicators are switched to the determinate mode (or initialized as determinate), they can be set back to indeterminate mode via calling the setIndeterminate(false) method. However, in order to keep the smoothness of animation, they need to be set INVISIBLE or GONE via the setVisibility or hide methods first.

-출처 https://material.io/components/progress-indicators/android

 

이게 무슨 소리야 !! 👊라고 저는 생각을 했었는데 직접 확인 해보니 알겠더라구요.. 

숨겼다가 -> 불확실속성 적용 -> 보여주기 

이렇게 하면 불확실성 속성이 false 였던 것을 true 로 바꿔 줄 수 있습니다. 

progress.setVisibility(View.INVISIBLE);
progress.setIndeterminate(true);
progress.setVisibility(View.VISIBLE);

---

결과

결과 영상 보시면, 25% 50% 75% 눌렀을 때 진행표시가 되는 것 확인 하실 수 있고

RAMDOM 버튼을 누를때 불확실성하게 계속 진행되는 것을 확인 할 수 있습니다.

 

 

Progress indicators (프로그레스 인디케이터) 는 그 외에 색상을 지정하는 속성, 프로그레스 두께를 지정하는 속성 등등 

많이 있지만, 생각보다 적용하는 것이 쉽기 때문에 게시글에서 보여드리지는 않았습니다. 

 

혹시나 적용해보고 싶거나 적용을 해야한다 ! 하시는 분들은 아래 참조 링크를 통해서 적용 해보시기 바랍니다😊

 

---

참조 - Material Design

https://material.io/components/progress-indicators/android

Material Design

 

참조 - Android developers documentation

https://developer.android.com/reference/com/google/android/material/progressindicator/BaseProgressIndicator

BaseProgressIndicator  |  Android Developers