[Android Tech] Custom ProgressBar

   

http://www.helloandroid.com/tutorials/custom-view-horizontalslider

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

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

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

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

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

먼저 /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>

progressbar_custom.xml 닫기

가장 처음에 있는 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을 넣어주면 사용할 수 있다!!

 

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

 

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