Android – create custom SeekBar

Custom red_scrubber_control.xml (add to res/drawable):

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
    <item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
    <item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
    <item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>

Custom: red_scrubber_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/red_scrubber_track_holo_light"/>
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/red_scrubber_secondary_holo"
            android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/red_scrubber_primary_holo"
            android:scaleWidth="100%" />
    </item>

</layer-list>

Then copy required drawables from Android source code, I took from this link

It is good to copy these drawables for each hdpi, mdpi, xhdpi. For example I use only mdpi:

Then using Photoshop change color from blue to red:

red_scrubber_control_disabled_holo.png: red_scrubber_control_disabled_holo

red_scrubber_control_focused_holo.png: red_scrubber_control_focused_holo

red_scrubber_control_normal_holo.png: red_scrubber_control_normal_holo

red_scrubber_control_pressed_holo.png: red_scrubber_control_pressed_holo

red_scrubber_primary_holo.9.png: red_scrubber_primary_holo.9

red_scrubber_secondary_holo.9.png: red_scrubber_secondary_holo.9

red_scrubber_track_holo_light.9.png: red_scrubber_track_holo_light.9

Add SeekBar to layout:

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/red_scrubber_progress"
    android:thumb="@drawable/red_scrubber_control" />

Result:

enter image description here

Edited:

Here is nice resource Android Holo Colors Generator that will help to create elements with different colors much faster. Just select color and element and it will create required drawable for xhdpi, hdpi and mdpi.

 

 

1. To add the transparent feature for the Thumb of the SeekBar, you need to add following property:

When API level 21 is selected

When API level 19 is selected

<SeekBar
    ....
    android:splitTrack="false" 
/>

 

2. When using a custom thumb drawable with a SeekBar view, the thumb drawable is clipped at the left and right edges of the view.

You should be able to fix this by setting paddingLeft and paddingRight on your SeekBar to half the thumb width (remember to use density-independent units). You can also control the space allowed at the edges for a seek bar’s thumb by calling setThumbOffset.

 

3. To adjust the height of the SeekBar, add following two features to the red_scrubber_progress.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:height="4dp"
        android:gravity="center_vertical"
        android:drawable="@drawable/carpet_bar_bg_dim"/>

    <item
        android:id="@android:id/progress"
        android:height="4dp"
        android:gravity="center_vertical">
        <scale
            android:drawable="@drawable/carpet_bar_bg_dim_full"
            android:scaleWidth="100%"/>
    </item>

</layer-list>

 

 

 

 

Ref.:

http://stackoverflow.com/questions/16163215/android-styling-seek-bar