Custom Seekbar with masking effect with two drawables?

Question

I am using a custom seekbar to show a graph. I had done till this. I am showing this graph by applying a background drawable to the seekbar. Now my problem is, I need to set the blue one as progress drawable and need to set the background of seekbar as the red graph. So that when progress happens thumb moves over red the area where thumb passed should be changed to blue color like a masking effect. Can any one tell the best possible way to do this. My pictures are shown below

Answer 1

After reading all the questions and answers I hope this should be your scenario to get your thing done...

1.Create two graphs As per your logic.

2.Generate two drwables from the particular bitmaps....

Drawable G_bg = new BitmapDrawable(Red graph bitmap);
Drawable G_pg = new BitmapDrawable(Blue graph bitmap);

3.And then customize your seek bar using layer list created through the java code.

ClipDrawable c=new ClipDrawable(G_pg, Gravity.LEFT,ClipDrawable.HORIZONTAL);
LayerDrawable ld =new LayerDrawable (new Drawable[]{G_bg,c}); 

4.Apply this layer list to your seekbar.

Graphbar.setProgressDrawable(ld);

This should work like you wanted....Thanksss

Answer 2

Is this not what you wanted?

my_seek_bar_progress.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/red_graph"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/blue_graph" />
    </item>

</layer-list>  

in Fragment or Activity layout:

<com.example.seekbaroverlay.MySeekBar
    android:id="@+id/mySeekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100" />

MySeekBar.java:

public class MySeekBar extends SeekBar {

    public MySeekBar(Context context) {
        this(context, null);
    }

    public MySeekBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MySeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setProgressDrawable(context.getResources().getDrawable(R.drawable.my_seek_bar_progress));
        setThumb(context.getResources().getDrawable(R.drawable.my_thumb));
    }
}

Answer 3

You should use a custom progressDrawable for your SeekBar. See this blog post for a great tutorial.

Answer 4

You can create a custom view.Override it's onTouch() method to change position of thumb.Also override it's onDraw() method and first draw red graph as background of your view and then the blue one from position that corresponds to the position of thumb.