Custome Seekbar with a gradient intervals

I am creating a range slider and it needs to be of the form

So far I have been able to create the form below:

As can be seen from the two images, I am looking for a way to add the gradient to the slider.

My Code So far:

progress_drawable.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/background_fill" />

    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress_fill" />
    </item>
  </layer-list>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/colorPrimaryDark"
    >
    <com.abc.customslider.CustomSeekbar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:layout_margin="20dp"
        android:thumb="@drawable/thumb"
        android:thumbOffset="1dp"
        android:progressDrawable="@drawable/progress_drawable"
        />

</LinearLayout>

The ondraw method of CustomSeekbar

@Override
protected synchronized void onDraw(final Canvas canvas) {
    super.onDraw(canvas);


    final int width = getMeasuredWidth();
    final int step = width / getMax();

    if(mDotBitmap!=null)
    Log.d("cs",""+mDotsPositions.length+":"+step+":"+getProgress());

    if (null != mDotsPositions && 0 != mDotsPositions.length && null != mDotBitmap) {

        for (int position : mDotsPositions) {

            Paint paint = new Paint();

            Log.d("cs",""+position);

            int progress = getProgress();


            if(position<50)
            {
                if(progress > position)
                {
                    paint.setColorFilter(new PorterDuffColorFilter(getResources().getColor(R.color.colorStart), PorterDuff.Mode.SRC_IN));



                }
                else{
                    paint.setColorFilter(new PorterDuffColorFilter(getResources().getColor(android.R.color.darker_gray), PorterDuff.Mode.SRC_IN));

                }
            }
            else{
                if(progress >= position)
                {
                    paint.setColorFilter(new PorterDuffColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_IN));
                }
                else{
                    paint.setColorFilter(new PorterDuffColorFilter(getResources().getColor(android.R.color.darker_gray), PorterDuff.Mode.SRC_IN));


                }
            }

            canvas.drawBitmap(mDotBitmap, position*step ,0, paint);

        }
    }
}

I am assuming that it might be possible to achieve the gradient using masks, but I am not sure how to do that. Anybody can help with hints or an example.

Thanks