CODEWITHSUNDEEP
androidxmllayout
soren.qvist
soren.qvist

Reputation: 7416

Scaling a drawable inside a button?

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?

Upvotes: 13

Views: 19608

Answers (6)

yonojoy
yonojoy

Reputation: 5566

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

Upvotes: 3

Ravi
Ravi

Reputation: 960

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

Upvotes: 2

Michael Probst
Michael Probst

Reputation: 111

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)

Upvotes: 2

soren.qvist
soren.qvist

Reputation: 7416

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

Upvotes: -1

Emir Kuljanin
Emir Kuljanin

Reputation: 3911

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

Upvotes: 1

nhaarman
nhaarman

Reputation: 100388

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

Upvotes: -1

Related Questions