3

I am creating a range slider and it needs to be of the formenter image description here

So far I have been able to create the form below:enter image description here

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

user2536851
  • 314
  • 3
  • 11
  • 1
    see [this](https://stackoverflow.com/a/21060826/2252830) answer and modify it so that it uses `LinearGradient` (simply remove `mPaint.setColor` and instead of it setup `LinearGradient` before drawing) – pskink Aug 03 '17 at 04:44
  • ok. thanks, I will try this and post update here. – user2536851 Aug 03 '17 at 06:22
  • 1
    most likely all you need to do in `draw` method is to call `Canvas#drawPath` twice: first with gradient shader and the second time with gray solid color – pskink Aug 03 '17 at 09:47
  • Thanks, your code is pretty solid. It worked just with this. `mPaint.setShader(new LinearGradient(0, 0, b.width(), b.height(), c1, c2, Shader.TileMode.MIRROR)); canvas.drawRect(left, b.top, right, b.bottom, mPaint); Paint grayPaint = new Paint(); grayPaint.setColor(Color.DKGRAY); if((i + 1) * 10000 / NUM_RECTS > level) canvas.drawRect(left, b.top, right, b.bottom, grayPaint);` – user2536851 Aug 03 '17 at 10:41
  • 1
    avoid allocations inside `draw` method as it can be called many many times, like this: https://pastebin.com/raw/0jccWF0f – pskink Aug 03 '17 at 11:03

0 Answers0