ProgressBar 커스텀 적용기

안녕하세요! 고잉고잉 Android 팀 이유빈입니다!

 

이번 포스트에서는 Progress bar를 커스텀 적용기에 대해 적어보려고 합니다.

 

🙂Progress bar란?

 

프로그레스 바는 위와 같이 현재 상태를 시각적으로 표현할 수 있는 widget을 말한다.

 

화면이 로딩 중일 때도 쓰이기도 하고, 사용자에게 진행상황을 한 눈에 알려주기 위해 사용된다.

 

막대기 모양, 둥근 모양 등 다양하게 커스텀이 가능한데,

이번에 구현할 뷰는 막대기 모양이다.

 

🥰Progress bar 속성

프로그레스 바의 속성들을 사용해서 아래 사진과 같은 프로그레스 바를 만들어보자!

 

프로그레스 바를 사용하려면 먼저 xml에서 작성해주어야 한다. 

아래의 xml을 통해서 속성들을 톺아보자!

  <ProgressBar
  	android:id="@+id/progress_bar_check_friends_1"
	style="@style/Widget.AppCompat.ProgressBar.Horizontal"
	android:layout_width="0dp"
	android:layout_height="10dp"
	android:layout_marginTop="12dp"
	android:max="5"
	android:progressDrawable="@drawable/layer_list_trip_friends_progress_bar"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />

 

먼저 style의 속성을 지정해주면 Progress bar의 상태들을 표시할 수 있게 된다.

 

여기서 원하는 디자인을 적용하고 싶으면 progressDrawable 속성을 사용해서 지정할 수 있다.

아래는 progressDrawable 속성을 사용해서 지정한 layer_list_trip_friends_progress_bar의 코드이다.

<?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="4dp"/>
            <solid android:color="@color/gray_50"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape>
                <corners android:radius="4dp"/>
                <solid android:color="@color/gray_400"/>
            </shape>
        </scale>
    </item>
</layer-list>

 

프로그레스 의 배경을 gray_50 으로 잡고, 진행 상황의 표시되는 색깔을 gray_400으로 하겠다는 코드이다.

그리고 모서리 부분을 4dp만큼 둥글게 주겠다는 의미이다.

 

이제 프로그레스 바의 진행 상황을 적용해줘야 한다.

이때 최댓값을 지정해줄 수 있는데, 기본 최댓값은 100이다.

 

서버에서 프로그레스의 진행률을 0 ~ 5 사이로 준다고 가정한다면 최댓값을 5로 지정해줘야 한다.

그러면 xml처럼 max를 이용해서 지정해줄 수 있다.

 

최솟값도 설정할 수 있는데, min 속성을 사용하면 된다.

 

⭐드디어! 진행률을 적용해보자.

progress 속성을 사용해서 xml에서 바로 적용해줄 수도 있지만, 서버에서 받은 값을 넣어주어야 하는 상황이기에 코틀린 파일에서 작성해보자!

똑같이 progress를 이용해서 진행률을 적용할 수있다.

private fun setProgressBarStatus() {
	binding.progressBarCheckFriends1.progress = 2
}

 

😮Progress bar를 거꾸로 적용하라고..?

이번 포스트의 핵심이다!

바로 프로그레스 바 진행률 거꾸로 적용하기! 

 

방법은 생각보다 간단하다.

scaleX 속성을 적용하면 된다.

가로 방향의 스케일을 원래 크기의 -1배로 만들어주는데 즉, 프로그레스 바의 진행률이 가로 방향으로 뒤집히게 된다.

android:scaleX="-1"

 

🥹커스텀 한 번만 더 해보자 ㅎㅎ

 

이번에는 프로그레스 바의 양쪽 끝부분은 둥글게 두고, 진행률 부분만 직각으로 만들어보자!

 

내가 선택한 방법은 직각의 view를 하나 더 두는 것이다.

그러면 원하는대로 디자인이 나온 것을 볼 수 있다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="4dp"/>
            <solid android:color="@color/gray_50"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="4dp"/>
                <solid android:color="@color/gray_400"/>
            </shape>
        </clip>
        <clip android:top="2dp" android:bottom="2dp" android:left="2dp" android:right="2dp">
            <shape>
                <solid android:color="@color/gray_400"/>
            </shape>
        </clip>
    </item>
</layer-list>

 

 

오늘 알아본 ProgressBar의 커스텀은 여기까지입니다!

더 좋은 방법이 있다면 댓글로 피드백 언제나 환영입니당

 

다음에는 프로그레스 바에 애니메이션을 적용해보는 글로 찾아오겠습니다 ㅎㅎ