Custom SeekBar, which changes both the execution color and the background color when buffering

Question

I want to create a custom SeekBar that has a secondary progress bar, but the default is end to end and shows progress for buffered data.

Think of it as a search provided by most online video players, for example. YouTube Thus, everyone has a standard search bar, its default progress bar and a secondary progress bar that fills the color regardless of the main move / user drag of the search mark and just depends on buffered data.

So far, I have a regular arrow, and it changes color when dragging / setting a user.
Can anyone help with this?

My code:
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) as follows:

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

Answer 1

Add another layer to your list of layers that can be removed with id android:id/secondaryProgress

Refer to this answer: fooobar.com/questions/25865 / ...

Answer 2

Here is your answer. Just add two lines in the seekbar tag in XML

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

change the color accordingly.