Custom SeekBar which changes both Progress Color and Background Color while buffering

Question

I want to build a custom SeekBar which has a secondary progress bar but by default is from end to end and shows progress for buffered data.

Think of it as the seekbar provided by most online video players e.g. youtube. So all in all we have the default seekbar, its default progress bar and a secondary progress bar which fills a color irrespective of the main progress/user's drag of the seekbar's notch and just dependent on buffered data.

Till now I just have the normal seekbar and it changes color on user's drag/set progress.
Could someone please help with this?

My code so far:
seekbar_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/progress_background_fill"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress_fill" />
    </item>

</layer-list>

progress_fill.xml

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

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

    <corners android:radius="5px" />

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

</shape>

progress_background_fill.xml

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

<corners android:radius="5px" />

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

applying these xml(s) like this:

<SeekBar 
            android:id="@+id/seek_hist_timeline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progressDrawable="@drawable/seekbar_progress" />

score 7 · Accepted Answer · edited May 23 '17 at 11:46

7

Add another layer to your layer-list drawable with the id android:id/secondaryProgress

Refer to this answer: https://stackoverflow.com/a/2021119/2951003

edited May 23 '17 at 11:46

Community

1
1

answered Jan 31 '14 at 06:06

dandc87

1,096
5
7

Be sure to put `android:id/secondaryProgress` between the background and progress ids in the layer list – mco Oct 05 '16 at 23:44

score 5 · Answer 2 · answered Sep 02 '19 at 08:53

5

Here's your answer. Just add two lines in seekbar tag in xml

<SeekBar
    android:progressTint="@color/black"
    android:thumbTint="@color/black"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

change color accordingly.

answered Sep 02 '19 at 08:53

Nevil Ghelani

687
10
10

I like this one. Thanks! – Sam Chen Dec 30 '19 at 20:12

Custom SeekBar which changes both Progress Color and Background Color while buffering

2 Answers2