Android custom SeekBar

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>


Similarly, to apply different styles to background, primary, and secondary progresses of the SeekBar, you need to create a resource drawable xml file that uses the layer list drawable to manage the styles. In layer list, you define three styles. One is for the background. The others are for primary and secondary progresses. Each drawable in the list is drawn in the order of the list's the last drawable in the list is drawn on top. On the SeekBar, the primary progress is on the left of the thumb and the secondary progress is on the right of the thumb.
Now create an xml file called progress_appearance.xml file in the res/drawable folder and save the following code in the file.


<?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"     
        
        />



Android-custom-SeekBar

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

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.