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:

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:

Is there any way I can shrink my drawable?

Answer 1

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().)

Answer 2

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)

Answer 3

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); 

Answer 4

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 =)

Answer 5

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

Answer 6

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:)