[안드로이드/Kotlin] Custom progress bar 적용하기

지난 1년간 자바로 UI없는 서비스앱만 개발하다가 다시 코틀린으로 UI를 개발하는데 모르는 부분들 나중에 기억하려고 작성한다. 지난 1년간 전기자동차 완속 충전기 개발한것도 짬날때 슬슬 정리해야겠다...

 

전체 이동거리중 현재 이동거리 정도를 나타내기 위해서 progress bar를 사용해서 나타내려고한다.

예전에 seekbar를 사용해서 구현한 적이 있었는데 thumb처리하는것도 복잡하고해서 이번엔 progress bar로 구현했다.

 

/res/drawable/custom_progressbar.xml을 생성

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 배경 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="8px"/>
            <solid android:color="@color/bg_progressbar"/>
        </shape>
    </item>
    <!-- 채워지는 부분 -->
    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="left">
            <scale android:scaleWidth="100%"> <!-- 채워지는 부분 양끝 둥글게 -->
                <shape android:shape="rectangle">
                    <corners android:radius="8px"/>
                    <solid android:color="@color/purple"/>
                </shape>
            </scale>
        </clip>
    </item>
</layer-list>

 

<scale android:scaleWidth="100%">

이거를 해주지 않으면 왼쪽에서 오른쪽으로 채워질 때 둥글게가 아니라 수직으로 채워지게 된다.

해당 custom 디자인을 적용할 xml에 적용하기

<ProgressBar
    android:id="@+id/pb_remain_time"
    android:layout_width="760px"
    android:layout_height="16px"
    android:layout_marginStart="414px"
    android:layout_marginTop="18px"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progressDrawable="@drawable/custom_progressbar"
    android:max="100"
    android:progress="60"
    app:layout_constraintStart_toEndOf="@id/ic_close"
    app:layout_constraintTop_toBottomOf="@id/txt_remain_time" />

프로그래스 바가 default로는 원모양이라 아래 코드를 적용해야 직선 프로그래스바로 적용됨

style="@android:style/Widget.ProgressBar.Horizontal"

custom으로 디자인한 xml을 아래 progressDrawable에 적용하면 된다.

android:progressDrawable="@drawable/custom_progressbar"

max 로 최대값을 정할 수 있고 progress는 진행도를 나타내는 값이다.

android:max="100"
android:progress="60"