buttons background images stretched (wrap_content or dp usage)

Question

i'm setting background images to my custom buttons. I made a screenshot for my app and mentioned that when i'm using "wrap_content" for the width and height of the button, the button is stretched. When i'm fixing a size in dp, it will appear nice ( ex: in my mdpi folder i have 48x48px icons, so i put 48dp in width and height). Can you please explain me why?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/definition_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp"
android:layout_alignParentTop="true" >

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp" >

    <Button
        android:id="@+id/addToFavorites"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/favorites_button" />

    <Button
        android:id="@+id/fontup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/fontup_button" />

    <Button
        android:id="@+id/fontdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/fontdown_button" />

    <Button
        android:id="@+id/comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/comment_button" />

    <Button
        android:id="@+id/speak"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/speak_button" />
    </LinearLayout>

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:layout_below="@id/buttons">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <WebView
        android:id="@+id/webView1"
        android:layout_below="@id/image_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </LinearLayout>
    </ScrollView>

    </RelativeLayout>

The code above shows my XML file. You can check this link to view a screenshot for my problem: https://www.dropbox.com/s/phnxt5p335ltqef/buttons_icon_altered.png

Answer 1

You can avoid the button background stretch by setting minWidth & minHeight to 0dp

<Button
    android:id="@+id/addToFavorites"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    android:minHeight="0dp"
    android:layout_margin="5dp"
    android:background="@drawable/favorites_button" />

Answer 2

It is pretty easy:

• Use ImageButton instead of Button
• set the background attribute to null
• set the src attribute
• set the scaleType attribute to centerInside

Working example:

<ImageButton
android:id="@+id/my_awesome_button"
android:scaleType="centerInside"
android:background="@null"
android:gravity="center"
android:layout_height="wrap_content" 
android:layout_width="wrap_content"
android:src="@drawable/my_awesome_drawable"/>

Note: You can also use a dp value instead of "wrap_content".

I hope it helps.

Answer 3

It appears stretched because "wrap_content" means android will stretch the image to fit the enclosing layout.

In your case, the buttons in the linear layout will take as much space as they can within the layout. So unless you set the height and width for the buttons, they will stretch out to fill the space occupied by the linear layout and consequently, their background images will also stretch along with the buttons.

But if you set the button size to 48dp, then the images won't have to stretch since they are also 48px in size and hence they will look nice.

Go through the excellent official developer docs for more info on layouts here: https://developer.android.com/guide/topics/ui/declaring-layout.html

and for learning how to manage your layouts and assets for multiple android screen sizes and resolutions here:

https://developer.android.com/guide/practices/screens_support.html