androidandroid-seekbarcustom-selectorsandroid-slider

Android - styling seek bar


I wanted to style a seek bar which looks like the one in the image below.

enter image description here

By using default seekbar I will get something like this:

enter image description here

So what I need is to only change the color. I need no extra styles. Is there any straight forward approach to do this or should I build my custom drawable.?

I tried building custom one, but I could not get the exact one as shown above. After using custom drawable, what I get is as shown below:

enter image description here

If I need to build the custom one, then please suggest how to reduce the width of the progress line and also the shape.

my custom implementation:

background_fill.xml:

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

    <gradient
        android:angle="90"
        android:centerColor="#FF555555"
        android:endColor="#FF555555"
        android:startColor="#FF555555" />

    <corners android:radius="1dp" />

    <stroke
        android:width="1dp"
        android:color="#50999999" />
    <stroke
        android:width="1dp"
        android:color="#70555555" />

</shape>

progress_fill.xml

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

    <gradient
        android:angle="90"
        android:centerColor="#FFB80000"
        android:endColor="#FFFF4400"
        android:startColor="#FF470000" />

    <corners android:radius="1dp" />

    <stroke
        android:width="1dp"
        android:color="#50999999" />
    <stroke
        android:width="1dp"
        android:color="#70555555" />

</shape>

progress.xml

<?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/background_fill"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress_fill" />
    </item>

</layer-list>

thumb.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <gradient
        android:angle="270"
        android:endColor="#E5492A"
        android:startColor="#E5492A" />

    <size
        android:height="20dp"
        android:width="20dp" />

</shape>

seekbar:

<SeekBar
        android:id="@+id/seekBarDistance"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="88dp"
        android:progressDrawable="@drawable/progress"
        android:thumb="@drawable/thumb" >
    </SeekBar>

Solution

  • I would extract drawables and xml from Android source code and change its color to red. Here is example how I completed this for mdpi drawables:

    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