Android custom seekbar render

Question

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

<?xml version="1.0" encoding="UTF-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">

  <solid android:color="#16A085"/>

  <size 
    android:height="30dp"
    android:width="30dp" />

</shape>

and that for the bar:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+android:id/SecondaryProgress">
        <shape android:shape="rectangle">
            <solid android:color="#EBEDEF" />
            <corners android:radius="35dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <shape android:shape="rectangle">
            <padding android:left="10dp" android:top="20dp" android:right="10dp" android:bottom="20dp" />
            <solid android:color="#1ABC9C" />
            <corners android:radius="15dp" />
        </shape>
    </item>
</layer-list>

What can I do to achieve to get the "real" seekbar ?

Thanks for your help.

Answer 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;

public class FlatSeekBar extends android.widget.SeekBar
{

    private int size = 20;

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

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

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

    private void init(AttributeSet attrs, boolean applyAttributeTheme)
    {
        // setting thumb
        PaintDrawable thumb = new PaintDrawable(Color.parseColor("#2C3E50"));
        thumb.setCornerRadius(size * 9 / 8);
        thumb.setIntrinsicWidth(size * 9 / 4);
        thumb.setIntrinsicHeight(size * 9 / 4);
        setThumb(thumb);

        // progress
        PaintDrawable progress = new PaintDrawable(Color.parseColor("#34495E"));
        progress.setCornerRadius(size);
        progress.setIntrinsicHeight(size);
        progress.setIntrinsicWidth(size);
        progress.setDither(true);
        ClipDrawable progressClip = new ClipDrawable(progress, Gravity.LEFT, ClipDrawable.HORIZONTAL);

        // secondary progress
        PaintDrawable secondary = new PaintDrawable(Color.parseColor("#EBEDEF"));
        secondary.setCornerRadius(size);
        secondary.setIntrinsicHeight(size);
        ClipDrawable secondaryProgressClip = new ClipDrawable(secondary, Gravity.LEFT, ClipDrawable.HORIZONTAL);

        // background
        PaintDrawable background = new PaintDrawable(Color.parseColor("#EBEDEF"));
        background.setCornerRadius(size);
        background.setIntrinsicHeight(size);

        // applying drawable
        LayerDrawable ld = (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 ;)

Answer 2

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

LayerDrawable layerDrawable =(LayerDrawable)mProgressBar.getProgressDrawable();

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

Drawable background;
background = 
new BitmapDrawable(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);