Changing size of seekbar thumb
Asked Answered
R

9

43

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.

Rabbit answered 14/3, 2012 at 10:18 Comment(0)
U
57

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

Unequaled answered 1/9, 2013 at 15:13 Comment(6)
this also works, if you use that kind of layer-list-thumb.xml as drawable within an item of selector-drawable. perfect!Armelda
This Works for making it bigger... but what if it should be smaller?Ausgleich
Where in the project folder structure would it be sensible to place the thumb_image.xml?Maddalena
Please keep it in the folder drawable/thumb_image.xmlUnequaled
how do i make it smaller? mines like a giant clipped thing, its retarded, do i really have to make it smaller in photoSHop!??Waldman
@TintinabulatorZea Unfortunetely this technics works only for making it bigger. To make them smaller you can use another answer here or simply replace images with smaller one.Unequaled
B
12

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!

Boardman answered 23/1, 2013 at 8:27 Comment(4)
I copied your code, it clips my image. I don't know where you got your 1.5, but when I change that into 1, no clipping happens.Xylina
The 1.5 was to answer the OP's question. He wanted to have a thumb size of 12dip and his seekbar was 8dip, so I suggested multiplying the size of the seekbar by 1.5 to get the correct thumb size since you can't specify sizes in dip.Boardman
Ah, I see. Anyway, your code helped me a lot, have an upvote!Xylina
You are awesome! I had to downscale thumb and it worked. Was getting a classcast exception, but then found following answer and all worked. #18460118Underground
T
8

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"/>
Treadwell answered 11/2, 2013 at 14:54 Comment(0)
D
3

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.

Duron answered 6/8, 2015 at 9:41 Comment(0)
E
2

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" />
Endocentric answered 5/4, 2022 at 4:59 Comment(0)
Z
1

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" />
Zamir answered 11/12, 2017 at 2:13 Comment(3)
My seekbar is inside a constraint layout, and when appled scaling, the bar grew outside the view's area, so the thumb became invisible.Abdel
Might be useful in LinerLayout or RelativeLayout, but in ConstraintLayout as Damn Vegetables mentioned it goes out of the viewing bounds.Frightened
Not useful in LinearLayoutPortcullis
S
1

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 ☺

Steelwork answered 17/9, 2020 at 8:42 Comment(0)
E
0

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

Exhaustive answered 14/3, 2012 at 10:24 Comment(1)
But i want to use an image as a thumb.. And i want to resize this image.Rabbit
C
0

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>
Chloro answered 16/1, 2019 at 14:59 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.