Scaling a drawable inside a button?

Question

Currently my drawable just scales to it's normal size, I want it to fit inside my button. Here's a picture of how it looks now:

enter image description here

Here is the xml for the button:

<LinearLayout android:layout_width="wrap_content"
    android:id="@+id/linearLayout2" android:layout_height="40dp"
    android:layout_weight="0.4" android:gravity="right|center_vertical"
    android:paddingRight="5dp">
    <Button android:id="@+id/button1" android:background="@drawable/refresh"
        android:layout_height="25dp" android:layout_width="150dp"
        android:text="@string/buttonSearchAgain" android:drawableRight="@drawable/refresh_48"></Button>
</LinearLayout>

So I want it to look like this:

enter image description here

Is there any way I can shrink my drawable?

score 3 · Answer 1 · edited May 23 '17 at 11:54

You can solve this programmatically: Have a look at the function scaleButtonDrawables in this answer. With that function you can write in onCreate() of your activity:

final Button button = (Button) findViewById(R.id.button1);
ViewTreeObserver vto = button.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            public boolean onPreDraw() {
                button.getViewTreeObserver().removeOnPreDrawListener(this);
                //scale to 90% of button height
                DroidUtils.scaleButtonDrawables(button, 0.9);
                return true;
            }
        });

(You cannot call this directly because button height is not available in onCreate().)

score 2 · Answer 2 · answered Apr 20 '15 at 15:20

Since you cannot modify or scale the image over xml you need to set the compound drawable bounds within the code.

Override the Button class with your own "CustomButton". Then override the method "SetCompoundDrawables(left, top, right, bottom):

    public override void SetCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)
    {
        if (right != null)
        {
            var bounds = right.Bounds;
            right.SetBounds(bounds.Left, bounds.Top, bounds.Right, bounds.Bottom - 70);
        }

        if (left != null)
        {
            var bounds = left.Bounds;
            left.SetBounds(bounds.Left, bounds.Top, bounds.Right, bounds.Bottom - 70);
        }

        base.SetCompoundDrawables(left, top, right, bottom);
    }

Please be aware that this is C# Code since I am using Xamarin. But the java code should be the same (despite of some uppper case namings)

score 2 · Answer 3 · answered Jul 31 '15 at 19:06

I think I found the solution for your problem, very late but it might help others

Drawable drawable = getResources().getDrawable(R.drawable.s_vit);
drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*0.5), 
                     (int)(drawable.getIntrinsicHeight()*0.5));
ScaleDrawable sd = new ScaleDrawable(drawable, 0, scaleWidth, scaleHeight);
Button btn = findViewbyId(R.id.yourbtnID);
btn.setCompoundDrawables(sd.getDrawable(), null, null, null);

score 1 · Accepted Answer · answered Jul 02 '11 at 19:46

1

Recreate the image. Keep image size in pixels but reduce the size of the arrow and make the rest transparent. That's my bet anyway =)

answered Jul 02 '11 at 19:46

Emir Kuljanin

3,881
1
25
30

Looks like I'll have to go with that. – soren.qvist Jul 02 '11 at 20:05
1

Why is pixels better than dip? – IgorGanapolsky May 29 '12 at 17:16
I think you're misunderstanding my answer: I don't mean that pixels are better than dip. When I wrote "Keep image size in pixels...[]" I mean the actual .png image and not some xml element. – Emir Kuljanin May 30 '12 at 10:09

score -1 · Answer 5 · answered Jul 02 '11 at 19:23

Try

<Button android:id="@+id/button1" android:background="@drawable/refresh"
    android:layout_height="25dp" android:layout_width="150dp"
    android:text="@string/buttonSearchAgain" android:drawableRight="@drawable/refresh_48"
    android:padding="5dp"></Button>

(So add android:padding="5dp")

score -1 · Answer 6 · answered Jul 02 '11 at 20:58

I made it work! It's a bit messy, and I ended up not using button views at all. The "button" itself is a relativeLayout, so if you want to use this solution you are going to have to fiddle with some come if you want the button to animate. Here is my XML:

<LinearLayout android:layout_width="wrap_content"
    android:id="@+id/linearLayout2" android:layout_height="40dp"
    android:layout_weight="0.4" android:gravity="right|center_vertical"
    android:paddingRight="5dp">
    <RelativeLayout android:layout_height="25dp"
        android:layout_width="150dp" android:id="@+id/relativeLayout1"
        android:clickable="true">
        <ImageView android:id="@+id/imageView1" android:scaleType="fitXY"
            android:adjustViewBounds="true" android:layout_width="fill_parent"
            android:src="@drawable/saywhat" android:layout_height="fill_parent"></ImageView>
        <LinearLayout android:layout_width="fill_parent"
            android:id="@+id/linearLayout3" android:weightSum="1"
            android:layout_height="fill_parent">
            <TextView android:layout_weight="0.6"
                android:layout_height="fill_parent" android:text="TextView"
                android:layout_width="wrap_content" android:id="@+id/textView1"></TextView>
            <LinearLayout android:layout_weight="0.4"
                android:layout_height="fill_parent" android:layout_width="wrap_content"
                android:id="@+id/linearLayout4">
                <ImageView android:id="@+id/imageView2"
                    android:layout_height="wrap_content" android:scaleType="fitXY"
                    android:adjustViewBounds="true" android:layout_width="wrap_content"
                    android:src="@drawable/refresh_48"></ImageView>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

Enjoy :)

Re-visiting this answer after many years of Android experience I can safely say that you shouldn't even think about implementing it this way. — soren.qvist, Aug 24 '15 at 12:35

Scaling a drawable inside a button?

6 Answers6

Linked