[Android | Kotlin] 프로그래스바 커스텀 하기

안녕하세요, 하루플입니다.

 

일반적으로 ProgressBar는 로딩이 얼마나 진행되었는지를 표시하거나 서버와의 통신이 지연되고 있을 때 사용합니다.

저는 이렇게 서버와의 통신 대신 유저의 경험치를 나타내는 방식을 프로그래스바를 이용해 구현했습니다.

이처럼 간단한 그래프를 프로그래스바로 쉽게 구현할 수 있습니다.

 

먼저 XML 코드에 ProgressBar UI를 만들어줍니다.

<ProgressBar
    android:id="@+id/progress_bar_exp"
    android:max="100"
    tools:progress="50"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:progressDrawable="@drawable/progress_bar_exp"
    android:layout_width="0dp"
    android:layout_height="15dp"
    app:layout_constraintTop_toTopOf="@id/tv_exp_title"
    app:layout_constraintBottom_toBottomOf="@id/tv_exp_title"
    app:layout_constraintStart_toEndOf="@id/tv_exp_title"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginEnd="30dp"
    android:layout_marginStart="5dp"
    />

저는 가로 그래프 형식으로 그려진 프로그래스바를 만들기 위해 ProgressBar.Horizontal 로 설정했습니다.

 

progressDrawble에 사용된 progress_bar_exp.xml 을 만들어주어야합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="@color/grey_3" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="10dp" />
                <solid android:color="#B2CCFF" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dp" />
                <solid android:color="@color/light_yellow" />
            </shape>
        </clip>
    </item>
</layer-list>

위처럼 레이어 리스트를 활용해서 프로그래스바의 비활성화된 부분과 활성화된 부분의 색상을 설정해줍니다.

 

 

이후 저는 ProgressBar에 단순히 정지된 화면이 아니라 채워지는 애니메이션을 적용했습니다.

아래처럼 ObjectAnimator를 사용해 간단하게 progressBar 가 채워지는 효과를 적용할 수 있습니다.

ObjectAnimator.ofInt(binding.progressBarExp, "progress", exp.toInt())
    .setDuration(500)
    .start()

 

 

개발할 때는 간단하지만 앱 퀄리티는 크게 높일수 있는 내장 기능이라 많이 사용하면 좋을 것 같습니다!