Round corners in SeekBar for progress drawable

Question

How can I add rounded corners to progress state of SeekBar which contains bitmap?

This progress bitmap is a PNG file that contains a pattern to be repeated, that's why I can't use nine patch for this state.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <nine-patch android:src="@drawable/background"/>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <nine-patch android:src="@drawable/secondary_progress"/>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <bitmap android:src="@drawable/progress" android:tileMode="repeat"/>
        </clip>
    </item>
</layer-list>

Desired look:

instead of `` use a "round rect" `ShapeDrawable` and setup its `ShapeDrawable.ShaderFactory` so that it returns a `BitmapShader`, i know it is no simple solution but i'm afraid the only easy solution is a custom `Drawable` class like [this](http://stackoverflow.com/a/21060826/2252830) for example — pskink, Sep 14 '16 at 12:46
[here](http://pastebin.com/ymF4erVE) you have how to do that in xml and java code (you can delete `sd.getPaint().setColor(Color.RED);` line as it was used for testing) — pskink, Sep 14 '16 at 14:54
@pskink This is SO great, it works! Thank you VERY much. You can post it as the answer. — Mariusz, Sep 15 '16 at 07:35

pskink · Accepted Answer · 2016-09-15T07:53:57.223

try this test code (add it in Activity#onCreate) and modify sb.xml to fit your needs:

    SeekBar sb = new SeekBar(this);
    setContentView(sb, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 128));
    LayerDrawable ld = (LayerDrawable) getResources().getDrawable(R.drawable.sb);
    float[] radii = {
            32, 32, 32, 32, 32, 32, 32, 32,
    };
    ShapeDrawable sd = new ShapeDrawable(new RoundRectShape(radii, null, null));
    sd.setShaderFactory(new ShapeDrawable.ShaderFactory() {
        @Override
        public Shader resize(int width, int height) {
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.chrome);
            return new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        }
    });
    Drawable cd = new ClipDrawable(sd, Gravity.LEFT, ClipDrawable.HORIZONTAL);
    ld.setDrawableByLayerId(android.R.id.progress, cd);
    sb.setProgressDrawable(ld);

res/drawable/sb.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">
    <shape>
        <solid android:color="#0a0"/>
        <corners android:radius="32px"/>
    </shape>
</item>
<item android:id="@android:id/progress"  android:drawable="@android:color/transparent">
</item>
</layer-list>

Round corners in SeekBar for progress drawable

1 Answers1