Android Custom Seekbar Render

I'm trying to create a custom seekbar for my application. Waht I'd like to get is that: What I got so far: I've made the following code for the Thumb

Solution 1:

I've found another way to achieve to make my custom seekbar. Here is the code I'm currently using

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ClipDrawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.PaintDrawable;
import android.util.AttributeSet;
import android.view.Gravity;

publicclassFlatSeekBarextendsandroid.widget.SeekBar
{

    privateintsize=20;

    publicFlatSeekBar(Context context)
    {
        super(context);
        init(null, true);
    }

    publicFlatSeekBar(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init(attrs, true);
    }

    publicFlatSeekBar(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        init(attrs, true);
    }

    privatevoidinit(AttributeSet attrs, boolean applyAttributeTheme)
    {
        // setting thumbPaintDrawablethumb=newPaintDrawable(Color.parseColor("#2C3E50"));
        thumb.setCornerRadius(size * 9 / 8);
        thumb.setIntrinsicWidth(size * 9 / 4);
        thumb.setIntrinsicHeight(size * 9 / 4);
        setThumb(thumb);

        // progressPaintDrawableprogress=newPaintDrawable(Color.parseColor("#34495E"));
        progress.setCornerRadius(size);
        progress.setIntrinsicHeight(size);
        progress.setIntrinsicWidth(size);
        progress.setDither(true);
        ClipDrawableprogressClip=newClipDrawable(progress, Gravity.LEFT, ClipDrawable.HORIZONTAL);

        // secondary progressPaintDrawablesecondary=newPaintDrawable(Color.parseColor("#EBEDEF"));
        secondary.setCornerRadius(size);
        secondary.setIntrinsicHeight(size);
        ClipDrawablesecondaryProgressClip=newClipDrawable(secondary, Gravity.LEFT, ClipDrawable.HORIZONTAL);

        // backgroundPaintDrawablebackground=newPaintDrawable(Color.parseColor("#EBEDEF"));
        background.setCornerRadius(size);
        background.setIntrinsicHeight(size);

        // applying drawableLayerDrawableld= (LayerDrawable) getProgressDrawable();
        ld.setDrawableByLayerId(android.R.id.background, background);
        ld.setDrawableByLayerId(android.R.id.progress, progressClip);
        ld.setDrawableByLayerId(android.R.id.secondaryProgress, secondaryProgressClip);
    }
}

Just edit those four colours to get your own:

• #2C3E50
• #34495E
• #EBEDEF
• #EBEDEF

I hope it helps ;)

Solution 2:

If you want to use with custom background drawable instead of color try like below

LayerDrawablelayerDrawable=(LayerDrawable)mProgressBar.getProgressDrawable();

Drawable progress;
progress = newClipDrawable(newBitmapDrawable(mContext.getResources(), bitmap),
Gravity.AXIS_PULL_BEFORE, ClipDrawable.HORIZONTAL);
layerDrawable.setDrawableByLayerId(android.R.id.progress, progress);

Drawable background;
background = 
newBitmapDrawable(mContext.getResources(), bitmap);
layerDrawable.setDrawableByLayerId(android.R.id.background, background);

ProgressBar.setProgressDrawable(layerDrawable);
mProgressBar.setBackground(background);
mProgressBar.getProgressDrawable().setColorFilter(ContextCompat.getColor(
itemView.getContext(),R.color.colorAccent),
        PorterDuff.Mode.SRC_IN);

Share