When you use SeekBar in your application, you might want to change its default appearance. In this Android tip, I am going to show you how to customize SeekBar widget to apply different styles to its thumb and progress.
Before you can apply a different style to the thumb of the SeekBar, you create a custom shape xml file in the res/drawable folder. For example, the oval_shape.xml file defines a custom shape that is able to react when it is pressed.


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android=" http://schemas.android.com/apk/res/android">
 <item  android:state_pressed="true" > <!-- pressed state -->
 <shape
   xmlns:android=" http://schemas.android.com/apk/res/android"
   android:shape="oval">
    
    <padding
     	android:left="15dp"
     	android:top="15dp"
     	android:right="15dp"
     	android:bottom="15dp" />
    <stroke
     	android:width="5dp"
     	android:color="#FF0000"
     	android:dashWidth="0dp"
     	android:dashGap="0dp" />
    <size
     	android:width="30dp"
     	android:height="30dp"
       />
    <solid
       android:color="#FFFFFF"
       />
    
 </shape>
 </item>
 <item>  <!-- default state -->
 <shape
   xmlns:android=" http://schemas.android.com/apk/res/android"
   android:shape="oval">
    
    <padding
     	android:left="15dp"
     	android:top="15dp"
     	android:right="15dp"
     	android:bottom="15dp" />
    <stroke
     	android:width="5dp"
     	android:color="#FF0000"
     	android:dashWidth="0dp"
     	android:dashGap="0dp" />
    <size
     	android:width="30dp"
     	android:height="30dp"
       />    
 </shape>
 </item>
 
 </selector>  

<?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="10dip" />
       <stroke
         android:width="4dip"
         android:color="#000000" />
       <gradient
         android:startColor="#ffffff"
         android:centerColor="#dfdfdf"
         android:endColor="#000000"       
         android:centerY="0.50"
         android:angle="270" />
    </shape>
 </item>
 <item
    android:id=" @android:id/secondaryProgress">
    <clip>
       <shape>
         <corners
            android:radius="10dip" />
         <stroke
         android:width="4dip"
         android:color="#000000" />
         <gradient
            android:startColor="#432011"
            android:endColor="#00ff00"
            android:angle="270" />
       </shape>
    </clip>
 </item>
 <item
    android:id="@android:id/progress">
    <clip>
       <shape>
         <corners
            android:radius="10dip" />
         <stroke
         android:width="4dip"
         android:color="#000000" />
         <gradient
            android:startColor="#432011"
            android:endColor="#0000ff"
            android:angle="90" />
       </shape>
    </clip>
 </item>
 </layer-list>
 
 To apply the styles of the thumb and progress to the SeekBar, you assign the values to the android:thumb and android:progressDrawable attributes as shown below.
 <SeekBar
         android:id="@+id/seek1"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_margin="10dp"
         android:max="100"
         android:progress="50"
         android:thumb="@drawable/oval_shape"
         android:progressDrawable=" @drawable/progress_appearance"     
         
         />

Posted by: Dara | post date: 11-16-2014 | Subject: Android Apps Development