title: Custom SeekBar which changes both Progress Color and Background Color while buffering
body: <p><br>
  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.<br><Br>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.</p>
  
  <p>Till now I just have the normal seekbar and it changes color on user's drag/set progress. <br>Could someone please help with this? </p>
  
  <p>My code so far:<br>
  seekbar_progress.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  
      &lt;item
          android:id="@android:id/background"
          android:drawable="@drawable/progress_background_fill"/&gt;
      &lt;item android:id="@android:id/progress"&gt;
          &lt;clip android:drawable="@drawable/progress_fill" /&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>progress_fill.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;shape xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  
      &lt;gradient
          android:angle="180"
          android:centerColor="#FFB80000"
          android:endColor="#FFFF4400"
          android:startColor="#FF470000" /&gt;
  
      &lt;corners android:radius="5px" /&gt;
  
      &lt;stroke
          android:width="2dp"
          android:color="#50999999" /&gt;
      &lt;stroke
          android:width="1dp"
          android:color="#70555555" /&gt;
  
  &lt;/shape&gt;
  </code></pre>
  
  <p>progress_background_fill.xml
  </p>
  
  <pre><code>&lt;gradient
      android:angle="90"
      android:centerColor="#FF555555"
      android:endColor="#FF555555"
      android:startColor="#FF555555" /&gt;
  
  &lt;corners android:radius="5px" /&gt;
  
  &lt;stroke
      android:width="2dp"
      android:color="#50999999" /&gt;
  &lt;stroke
      android:width="1dp"
      android:color="#70555555" /&gt;
  </code></pre>
  
  <p></p>
  
  <p>applying these xml(s) like this:</p>
  
  <pre><code>&lt;SeekBar 
              android:id="@+id/seek_hist_timeline"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:progressDrawable="@drawable/seekbar_progress" /&gt;
  </code></pre>