Changing size of seekbar thumb

Question

I\'m using a drawable for seekbar thumb with

android:thumb=\"@drawable/thumb\"

How can I set the size of this thumb in dip

Answer 1

I work like this:

public class FlexibleThumbSeekbar extends SeekBar {

    public FlexibleThumbSeekbar(Context context) {
        super(context);
    }

    public FlexibleThumbSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.thumb);
        Bitmap thumb = Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(thumb);
        canvas.drawBitmap(bitmap, new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()),
        new Rect(0, 0, thumb.getWidth(), thumb.getHeight()), null);
        Drawable drawable = new BitmapDrawable(getResources(), thumb);
        setThumb(drawable);
    }
}

just a sample,in your real usage,you should define the width,height and picture of your thumb in a xml file.

Answer 2

From the sdk you can see this is the style for the basic SeekBar:

<style name="Widget.SeekBar">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
    <item name="android:minHeight">20dip</item>
    <item name="android:maxHeight">20dip</item>
    <item name="android:thumb">@android:drawable/seek_thumb</item>
    <item name="android:thumbOffset">8dip</item>
    <item name="android:focusable">true</item>
</style>

With this as the thumb selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_pressed" />

    <item android:state_focused="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:state_selected="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:drawable="@drawable/seek_thumb_normal" />

</selector>

You should be able to use these as a base to replace the drawable which are currently being used (This looks like the stage you've got to).

These drawable can be different sizes on different screens based on drawable folder size bucket (drawable-hdpi, drawable-large-hdpi etc) or you can make different SeekBars look at different styles / drawable sizes like so:

<style name="SeekBar.Thumb.Smiley" parent="@android:style/Widget.SeekBar">
    <item name="android:thumb">@drawable/smiley</item>
<style>

<style name="SeekBar.Thumb.Smiley.Large" parent="@android:style/Widget.SeekBar">
    <item name="android:thumb">@drawable/smiley_large</item>
<style>

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    style="@style/SeekBar.Thumb.Smiley.Large"/>

Answer 3

I was also looking for a way to do something similar and after looking at some other questions and putting all the answers together, I came up with a way to resize the Seekbar thumb in onCreate().

Here's my code from onCreate(), slightly adapted to your needs.

ViewTreeObserver vto = mySeekBar.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    public boolean onPreDraw() {
        Resources res = getResources();
        Drawable thumb = res.getDrawable(R.drawable.thumb);
        int h = mySeekBar.getMeasuredHeight() * 1.5; // 8 * 1.5 = 12
        int w = h;
        Bitmap bmpOrg = ((BitmapDrawable)thumb).getBitmap();
        Bitmap bmpScaled = Bitmap.createScaledBitmap(bmpOrg, w, h, true);
        Drawable newThumb = new BitmapDrawable(res, bmpScaled);
        newThumb.setBounds(0, 0, newThumb.getIntrinsicWidth(), newThumb.getIntrinsicHeight());
        mySeekBar.setThumb(newThumb);

        mySeekBar.getViewTreeObserver().removeOnPreDrawListener(this);

        return true;
        }
    });

Note that this works for resizing your thumb, but it might be clipped because it's bigger than the containing seekbar (not sure about that). If it does get clipped, you might need to create a taller seekbar and create your own seekbar background matching the size you want for the display.

Hope this helps!

Answer 4

I resolved my problem by this way

First, I converted my image/custom thumb/bitmap/other to SVG-file by source converter

Second, I converted my SVG-file to vector drawable by source SVG to vector

Then I used vector code in .xml file, which has attrs android:width="28dp" and android:height="28dp" in the vector tag. Here we can change the size of the thumb.

Finally, I used my thumb.xml in android:thumb="@drawable/thumb.xml" of the SeekBar tag

This is my thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="56"
    android:viewportHeight="56"
    android:width="28dp"
    android:height="28dp">
    <group
        android:scaleX="2.0"
        android:scaleY="-2.0"
        android:translateY="56">
        <path
            android:pathData="M28 14A14 14 0 0 1 14 28 14 14 0 0 1 0 14 14 14 0 0 1 14 0 14 14 0 0 1 28 14Z"
            android:fillColor="#6b6b6b"
            android:fillAlpha="0.205" />
    </group>
    <group
        android:scaleX="0.1"
        android:scaleY="-0.1"
        android:translateY="56">
        <path
            android:pathData="M135 376C83 353 40 311 40 281c0 -22 13 -34 85 -80 85 -54 115 -59 115 -22 0 22 -59 77 -98 92 -26 10 -26 11 36 50 72 46 81 69 25 69 -21 -1 -51 -7 -68 -14z"
            android:fillColor="#000000" />
        <path
            android:pathData="M320 366c0 -26 55 -81 98 -97l26 -10 -44 -26c-88 -51 -106 -83 -46 -83 72 0 179 81 163 124 -8 20 -156 116 -179 116 -12 0 -18 -8 -18 -24z"
            android:fillColor="#000000" />
    </group>
</vector>

Answer 5

The most flexible way to set thumb size for me is to create layered-drawable with shape as placeholder thumb_image.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <size
                android:height="40dp"
                android:width="40dp" />

            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item android:drawable="@drawable/scrubber_control_normal_holo"/>

</layer-list>

So basically changing the size of shape will stretch drawable, the shape is transparent so it won't be visible. Also the minimum size of such thumb is size of bitmap.

Here is example of layout:

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:thumb="@drawable/thumb_image" />

<SeekBar
    android:id="@+id/seekBar2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Answer 6

Create a shape of rectangle with height and width as you require. Use this shape as drawable for your thumb.