[안드로이드] 커스텀 프로그레스바

안드로이드 기본 프로그레스바를 사용하다보면 느끼는 것이 정말 안이쁘다는 것이다.

그리고 어플리케이션 디자인에 따른 프로그레스바의 색을 지정한다면 더 좋은 디자인을 갖는 어플을 개발 할 수 있을 것이다.

안드로이드 어플을 개발하면서 나쁜 것은 디자인적인 요소이지만 좋은 것은 그 디자인적 요소를 어떻게든지 커스터마이징 할 수 있다는 것이 장점이다.

프로그레스바는 현재 어플이 어떠한 작업을 하고 있다는 것을 사용자에게 보여주는 요소로 시간이 걸리는 작업을 수행하거나 혹은 좀더 좋은 효과를 표현하는데 사용될 수 있다.

이러한 프로그레스바를 커스텀 하는 방법은 간단한다.

먼저 /res 폴더아래에 drawable이라는 폴더를 만들고 그 안에 커스텀한 프로그래스바의 이름을 정한 xml파일을 만든다.

그리고 그 xml안에 커스텀할 내용을 넣어주면 된다.

progressbar_custom.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="5dip" />
                    <gradient android:startColor="#ff4f3011"
                                   android:centerColor="#ff4f3011" 
                                   android:endColor="#ff747674" 
                                   android:centerY="0.75"
                                   android:angle="270" />
             </shape>
       </item>
       <item android:id="@android:id/secondaryProgress">
             <clip>
                    <shape>
                           <corners android:radius="5dip" />
                           <gradient android:startColor="#80ffd300"
                                          android:centerColor="#80ffb600" 
                                          android:endColor="#a0ffcb00" 
                                          android:centerY="0.75"
                                          android:angle="270" />
                    </shape>
             </clip>
       </item>

      

       <item android:id="@android:id/progress">
             <clip>
                    <shape>
                           <corners android:radius="5dip" />
                                 <gradient android:startColor="#ff9900" 
                                                android:centerColor="#ffcc00"
                                                android:endColor="#ff9900" 
                                                android:centerY="0.75" 
                                                android:angle="270" />
                                 <stroke android:width="3dp" color="#000000" />
                                 <padding android:left="10dp" 
                                               android:top="10dp"
                                               android:right="10dp" 
                                               android:bottom="10dp" />
                    </shape>
             </clip>
       </item>
</layer-list>

가장 처음에 있는 item으로 들어가는 것이 프로그레스바의 뒤에 나타나는 배경색상을 정하는 부분이다.

그리고 마지막에 있는 item으로 들어가는 것이 프로그레스바가 늘어날 때 늘어나는 그 색상을 정하는 부분이다.

딱히 디자인적 스킬이 없는 나로서는 따로 색상을 현란하게 주지 못했지만 이 방법을 이용하면 다양한 색상과 다양한 모양 등을 커스텀하여 좀더 좋은 어플을 개발 할 수 있을 것이라고 생각된다.

이렇게 만든 커스텀된 프로그래스바를 사용할 때는 아래와 같다.

<ProgressBar android:id="@+id/LibActivity_progbar_seat1"
	style="?android:attr/progressBarStyleHorizontal"
	android:progressDrawable="@drawable/progressbar_custom"
	android:layout_width="200dp"
	android:layout_height="15dp"
/>

위와 같이 android:progressDrawable에 커스텀한 프로그레스 xml을 넣어주면 사용할 수 있다.

위와 같은 방법으로 커스텀한 프로그레스바를 사용한 모습.

 학교 어플리케이션을 만들면서 현재 좌석수를 좀더 시각적으로 보여주기 위해서 프로그레스바를 사용하였고 디자인적 요소를 좀더 추가하기 위해서 프로그레스바를 커스텀해서 사용하였다.


출처 : http://j2enty.tistory.com/entry/Android-Tech-Custom-ProgressBar