Why does Android insist on squishing my Button? -

Why does Android insist on squishing my Button? -

i have nice, pretty, facebook button image:

but android layout keeps squishing it:

could please help, here @ layout file:

<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <imageview android:id="@+id/logo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/tagline" android:layout_centerhorizontal="true" android:layout_margin="10dp" android:contentdescription="@string/app_description" android:src="@drawable/logo" /> <textview android:id="@id/tagline" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:gravity="center" android:paddingleft="10dp" android:paddingright="10dp" android:text="@string/tagline" android:textsize="22sp" /> <button android:id="@+id/loginbutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tagline" android:layout_centerhorizontal="true" android:layout_margintop="50dp" android:background="@drawable/login_button_normal" android:text="@string/login" android:textstyle="bold" /> </relativelayout>

you using button text inside. property android:layout_width="wrap_content" applies on width of text, not on width of drawable background.

you can either:

integrate text in .png file.

use 9-patch

create drawable define bluish corners-rounded rectangle , create image white 'f' vertical line. can utilize textview drawable inside:

<textview ... android:text="log in" android:drawableleft="{your image (white f)}" android:background="{your drawable (blue background)}" ... />

android android-layout