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
|
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.