Why button background is scaled incorrectly?

Question

I upgraded project SDK version from 10 to 23 and ported project from Eclipse to Android Studio at the same time.

The button drawable xml and png image left unchanged. However button background looks scaled incorrectly.

Button state list:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ok_button_pressed"
      android:state_pressed="true" />
<item android:drawable="@drawable/ok_button_normal"
      android:state_focused="true" />
<item android:drawable="@drawable/ok_button_normal" />
</selector>

Dialog layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp" 
    android:background="#669900"
    android:gravity="center_horizontal"
    >

    <TextView android:id="@+id/alarm_text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#FFF"
              android:textSize="16dp"
              />

    <RelativeLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center" 
        android:padding="0dp">

    <Button
        android:id="@+id/ok_alarm_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ok_button"
        android:layout_alignParentLeft="true"
    />

    <Button
        android:id="@+id/cancel_alarm_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/cancel_button"
        android:layout_alignParentRight="true"

    />
   </RelativeLayout>

</LinearLayout>

Button background (pressed version):

Before upgrade:

After upgrade:

Answer 1

I used ImageButton instead of Button and it fixed my issue.

Answer 2

In your current scenario, Use ImageButton instead of Button. As per ImageButton official document, ImageButton displays a Button with an Image (instead of text) that can be pressed or clicked by the user.

If you set image as background of Button, Then Button will scale image in X and Y independently, so that image matches it's width and height exactly to Button size. This may change the aspect ratio of the image. which is happening in your case.

In other case if you set Image as background for ImageButton and set scaleType as "centerInside" will Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

Answer 3

Can you try this way, working good for temporary my images

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#669900"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:id="@+id/alarm_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFF"
        android:textSize="16dp" />

    <RelativeLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:padding="0dp">

        <Button
            android:id="@+id/ok_alarm_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@drawable/ok_button"
            android:minHeight="0dp"
            android:minWidth="0dp" />

        <Button
            android:id="@+id/cancel_alarm_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@drawable/cancel_button"
            android:minHeight="0dp"
            android:minWidth="0dp"/>
    </RelativeLayout>
</LinearLayout>