Drawable inside Button is getting enlarged

Question

For some reason, I need to use a button with both icon and text. So I can't use ImageButton and thus I go for a solution to set the drawableTop of a normal Button.

The Button size is 140dp in square shape (please refer to the screenshot below)

The I was planning to use was 125x125 px and the asset itself is clear and crisp.

However, this 125px asset somehow being enlarged by the button, like the screenshot shown below.

The device is an xhdpi device.

As you can see, the icon inside the square button is blurry which looks like being somehow enlarged

Here I pasted my button XML

<Button
                android:id="@+id/button_call_us"
                android:layout_width="140dp"
                android:layout_height="140dp"
                android:layout_margin="@dimen/main_menu_button_margin"
                android:adjustViewBounds="true"
                android:background="@drawable/custom_button"
                android:drawablePadding="-20dp"
                android:drawableTop="@drawable/button_call_us_icon"
                android:lines="2"
                android:paddingTop="0dp"
                android:scaleType="fitXY"
                android:text="CALL US"
                android:textColor="@color/white"
                android:textSize="6pt" />

The android:background="@drawable/custom_button" is the purple colour background without any patterns.

The android:drawableTop="@drawable/button_call_us_icon" is the icon.

Except android:scaleType="fitXY", I have also tried centerInside and other options, still not getting the ideal result. My question is:

Why the drawable inside a Button being enlarged? Is there any way to stop it?

Thanks

Answer 1

Since it's a button, and you want a drawable inside the button. Your probable solution would be to use an ImageButton which actually implements drawable properties. You can then call android:scaleType="fitCenter" and set some padding too

<ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android_button" />

However, to get more freedom in terms of desing, you could use a simple layout instead of the button, something on the lines of this, just treat the LinearLayout as you would with a button, in terms of adding the onclicklistener:

<LinearLayout android:orientations="vertical"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:orientation="vertical"
    android:background="#CCC"
    android:padding="8dp"
    android:gravity="center">
    <ImageView android:src='@drawable/ic_launcher'
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView android:text="Lorem Ipsum"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />
</LinearLayout>

Answer 2

Try this code

Drawable img = getResources().getDrawable( R.drawable.img );
                img.setBounds( 0, 0, (int)(img.getIntrinsicWidth()), 
                         (int)(img.getIntrinsicHeight()) );
                button.setCompoundDrawables(null, img, null, null);