Search code examples
androidcolorsseekbarandroid-styles

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


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" />
Solution

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

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