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