나만의 Seekbar 만들기

Seekbar는 Progressbar를 상속 받아서 구현되어있습니다.
Progressbar의 구성인 background, secondaryProgress, progress 이 세부분을 구성하는 xml을 만들어야 합니다.
그리고 Progressbar와는 다르게 thumb라는 것이 있습니다. 이 것은 progress를 조절하는 바와 같은 것입니다. 

background, secondaryProgress, progress 구성을 위한 xml (progress_horizontal_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="#ff9d9e9d"
    android:centerColor="#ff5a5d5a"
    android:centerY="0.75"
    android:endColor="#ff747674"
    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:centerY="0.75"
     android:endColor="#a0ffcb00"
     android:angle="270" />
            </shape>
        </clip>
    </item>
   
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
     android:startColor="#ff55d300"
     android:centerColor="#ff55b600"
     android:centerY="0.75"
     android:endColor="#ff11cb00"
     android:angle="270" />
            </shape>
        </clip>
    </item>
   
</layer-list>

thumb를 구성하는 xml (seek_thumb_custom.xml)

<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">    
     <!--  Press the State  -->
        <item
                android:state_focused="true"
                android:state_pressed="true"
                android:drawable="@drawable/circle_thumb" />    
        <!--  Ordinary focus state   -->
        <item
                android:state_focused="false"
                android:state_pressed="false"
                android:drawable="@drawable/circle_thumb" />          
        <!--  The State has the focus  -->
        <item
                android:state_focused="true"
                android:state_pressed="false"          
                android:drawable="@drawable/circle_thumb" />     
        <!--  Has focus   -->
        <item
                android:state_focused="true"          
                android:drawable="@drawable/circle_thumb" />
        <item
                android:state_focused="false"
                android:state_pressed="true"
                android:drawable="@drawable/circle_thumb" />
             
</selector>

circle_thumb.xml

<?xml version="1.0" encoding="UTF-8"?>

<!--
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="ring"
  android:useLevel="false"  >
    <solid android:color="#FF000000"/>
    <stroke android:width="4dp"
    android:color="#99FF0000"
    android:dashWidth="4dp"
    android:dashGap="2dp" />
   <size android:width="20dp"
    android:height="25dp"/>
    
</shape>
-->

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
    <solid android:color="#FF000000"/>
   
    <padding android:left="7dp"
    android:top="7dp"
    android:right="7dp"
    android:bottom="7dp" />
    <corners android:radius="4dp" />
    <gradient android:startColor="#FFFF0000"
    android:endColor="#80FF00FF"
    android:angle="270"/>    
   <size android:width="20dp"
    android:height="20dp"/>
</shape>

 <!--
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="line">
   <stroke
  android:width="1dp"
  android:color="#FF000000"
  android:dashWidth="1dp"
  android:dashGap="2dp" />  
   <size android:width="20dp"
    android:height="25dp"/>
</shape>
-->

<!--
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle"> 
    <stroke
  android:width="2dip"
  android:color="#19CD00" />
    <corners
     android:bottomRightRadius="1dip"
     android:bottomLeftRadius="1dip" 
  android:topLeftRadius="1dip"
  android:topRightRadius="1dip"/> 
    <padding
  android:left="1dip"
  android:top="1dip"
  android:right="1dip"
  android:bottom="1dip" />
   <size android:width="20dp"
    android:height="25dp"/>
</shape>
-->

위의 xml들을 SeekBar에 설정하기 위해서는 xml에서 설정하는 방법과 자바코드에서 설정하는 방법 두가지가 있습니다. xml에서 설정하는 방법은...아래와 같습니다.

main.xml

---

...

    <SeekBar android:id="@+id/SeekBar1" 
        android:layout_width="300dp"
        android:layout_height="20dp"
        android:max="100"
        android:progress="0"
        android:secondaryProgress="0"
        android:progressDrawable="@drawable/progress_horizontal_custom" 
        android:thumb="@drawable/seek_thumb_custom" />
...

에뮬레이터를 실행하면 SeekBar는 아래와 같은 모습을 보입니다.

촌스럽지만, progressDrawable과 thumb에 보기 좋은 이미지를 설정하면 더 보기 좋은 SeekBar가 될 수 있습니다.
디자인적인 감각이 없는 관계로 많은 것을 요구하지는 맙시다!

자바코드에서는 아래의 두 함수를 사용하면 되겠죠..?

SeekBarTest.java

---

setProgressDrawable(Drawable d);
setThumb(Drawable thumb);

문제점이 있으면 댓글 달아주세요.