Question

I have 4 ImageButton in a linearlayout placed equally distanced. For now I am using one background for all 4 ImageButtons and size of resource is 36×36.

ImageButton appears stretched and blurry. What am I doing wrong?

<LinearLayout
        android:id="@+id/layout_buttons"

        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@drawable/bg_tabbar_tile"
        >

        <ImageButton
            android:id="@+id/play"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:background="@drawable/play"
            android:layout_weight="1" 
            />
        <ImageButton
            android:id="@+id/play1"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:background="@drawable/play"
            android:layout_weight="1"
            />

        <ImageButton
            android:id="@+id/play2"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:background="@drawable/play"
            android:layout_weight="1"
            />

        <ImageButton
            android:id="@+id/play3"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:background="@drawable/play"
            android:layout_weight="1"
            />
        </LinearLayout>

Thanks in advance

Answer 1

By default, background drawables are stretched to the size of the containing view. You can avoid this by using a BitmapDrawable. Put this in a new XML file in res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
      android:src="@drawable/play"
      android:gravity="center" />

Then use this new drawable instead of @drawable/play in your image buttons.