Android Styling SeekBar Thumb and Progress Track

 A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys .

In the previous tutorial we have seen basic example of Android SeekBar , In this tutorial we will see how to style it's thumb and progress track .

1 SeekBar Thumb

To Change SeekBar Thumb we use android:thumb attribute or property of seekbar widget , the below drawable is set to this attribute.  android:thumb="@drawable/seekbar_thumb"

1.a  Shape Thumb:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorAccent">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
            <size android:width="30dp" android:height="30dp"/>
        </shape>
    </item>
</ripple>

1.b Drawable Thumb: 

The flower01 is png image kept inside res/drawable .

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight">
    <item android:drawable="@drawable/flower01">
    </item>
</ripple>

2. SeekBar Progress Track

To Change SeekBar Progress we use ndroid:progressDrawable attribute or property of seekbar widget , the below drawable is set to this attribute. android:progressDrawable="@drawable/seekbar_progress_style" .

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background"
          android:drawable="@drawable/seekbar_track">
    </item>

    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress"/>
    </item>
</layer-list>

In the above xml

Track: item with id @android:id/background will set to seekbar track .

Progress : item with id android:id="@android:id/progress" will set to progress .

Track
file: seekbar_track.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="5dp"/>
            <gradient
                    android:angle="270"
                    android:centerColor="#11000000"
                    android:centerY="0.2"
                    android:endColor="#11000000"
                    android:startColor="#33000000"
                    android:type="linear"/>
        </shape>
    </item>
</layer-list>

Progress
file: seekbar_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/progressshape">
        <clip>
            <shape android:shape="rectangle">
                <size android:height="5dp"/>
                <corners android:radius="5dp"/>
                <solid android:color="#3db5ea"/>
            </shape>
        </clip>
    </item>
</layer-list>

Applying Above Defined Style to Seekbar

<androidx.appcompat.widget.AppCompatSeekBar
		android:layout_marginTop="50dp"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:id="@+id/seekbar01"
		android:maxHeight="8dp"
		android:progressDrawable="@drawable/seekbar_progress_style"
		android:thumb="@drawable/seekbar_thumb_shape"
		android:thumbOffset="0dp"/>

DOWNLOAD CODE