'Changing size of seekbar thumb

I'm using a drawable for seekbar thumb with

android:thumb="@drawable/thumb"

How can I set the size of this thumb in dip unit? Because I use a style for seekbar like

<style name="CustomSeekBar">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:minHeight">8dip</item>
    <item name="android:maxHeight">8dip</item>
    <item name="android:thumbOffset">8dip</item>
</style>

and I want to have the thumb with 12dip height and width.

Solution 1:^[1]

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" />

Seek bar with different thumb size

Solution 2:^[2]

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!

Solution 3:^[3]

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"/>

Solution 4:^[4]

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.

Solution 5:^[5]

Another simple solution that worked for me was using scaleX and scaleY. The entire seekbar will be larger this way and not just the thumb.

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleX="2"
    android:scaleY="2" />

Solution 6:^[6]

I wanted to update @andrew 's answer with a more detailed answer since its been 7 years ..

Just as he said ;

You should create layered-drawable thumb_image.xml (Please keep it in the drawable folder) :

<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"/>

Then you should add this property line to your SeekBar in layout file :

android:thumb="@drawable/thumb_image"

When you do just this, Android Studio will tell you that it couldn't find "scrubber_control_normal_holo.xml" in your @drawable folder

So you should put it in there. You can find this type of android resources in your SDK folder. By default, the Android Studio IDE" will be installed in "C:\Program Files\Android\Android Studio", and the "Android SDK" in c:\Users\username\AppData\Local\Android\Sdk.

In your SDK folder you should follow this path platforms->android-xx->data->res->drawable

Then in this "drawable" folder you can find scrubber_control_selector_holo.xml , You should copy it to your Android project's drawable folder.

Now android studio will be able to find scrubber_control_selector_holo.xml , but its not working yet because in this .xml file ; there is 4 more files you need to copy in order to achive the supreme singularity of evolution. Or else Android studio will give you an error like this : " Resource linking failed because somethings are private blablabla "

scrubber_control_disabled_holo

scrubber_control_pressed_holo

scrubber_control_focused_holo

scrubber_control_normal_holo

I found these files in platforms->android-xx->data->res->drawable-mdpi (Different dpi options for different sizes, I used the ones in mdpi)

Copy these .png files into your @drawable folder too.

Then as a final step (I'm sorry for this answer being too long but I didn't want any confusions)

You should edit these lines of your scrubber_control_selector_holo.xml file :

android:drawable="@android:drawable/scrubber_control_disabled_holo" />
android:drawable="@android:drawable/scrubber_control_pressed_holo" />
android:drawable="@android:drawable/scrubber_control_focused_holo" />
android:drawable="@android:drawable/scrubber_control_normal_holo" />

You should replace this "@android:drawable" parts with "@drawable" to your your projects resources not the ones in android.

It should work fine now ?

Solution 7:^[7]

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

Solution 8:^[8]

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>

Solution 9:^[9]

Create a new XML file in drawable folder

my_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
  <solid
    android:color="@color/myColor"/>
  <size
    android:height="20dp"
    android:width="20dp" />
</shape>

The current size is 20dp but you can change the size and color according to your need

And the use that in the layout file

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	andrew
Solution 2	Pooks
Solution 3	Graeme
Solution 4	alexrnov
Solution 5	kichik
Solution 6	CS Student
Solution 7	Yugandhar Babu
Solution 8	omikes
Solution 9	beginner

'Changing size of seekbar thumb

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]