Custom Seekbar with two-mask masking effect?

Question

I am using a custom search bar to display a graph. I have done this before. I show this graph using a searchable background. Now my problem is that I need to set the blue color as progress available, and I need to set the search background as a red graph. So when progress occurs, the thumb moves along the red area, where the thumb should be changed to blue, as a masking effect. Can anyone tell the best way to do this. My pictures are shown below.

Answer 1

After reading all the questions and answers, I hope this should be your script to do your thing ...

1. Create two graphs According to your logic.

2. Create two drwables from specific bitmaps ....

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

3. Then customize your search bar using the list of layers created using java code.

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

4.Apply this list of layers to your search.

 Graphbar.setProgressDrawable(ld); 

This should work the way you wanted .... Thanks

Answer 2

Isn't that 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 a fragment or layout of actions:

 <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 must use custom progressDrawable for your SeekBar. See this blog post for a great tutorial.

Answer 4

You can create a custom view. Replace it with the onTouch() method to reposition the thumb. Also, override its onDraw() method and first draw a red graph as the background of your view, and then blue from the position corresponding to the position of the thumb.