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"
/>
Posted by: Dara | post date: 11-16-2014 | Subject: Android Apps Development
