android layout button does not look as expected

Question

I need to create 2 buttons in horizontal layout which will contain icon on the top.

Layout:

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_weight="0.5"
        android:layout_height="wrap_content"
        android:src="@drawable/button" />

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="wrap_content"
        android:layout_weight="0.5"
        android:layout_height="wrap_content"
        android:src="@drawable/button" />

</LinearLayout>

Button:

<item>
    <bitmap
        android:gravity="right"
        android:src="@drawable/ic_action_call"/>
</item>
<item>
    <shape android:shape="rectangle" >

        <gradient 
            android:startColor="#FFEEC9A8"
            android:endColor="#90FFDAB9"
            android:angle="45"/>

        <padding 
            android:left="7dp"
            android:right="7dp"
            android:top="7dp"
            android:bottom="7dp"/>

        <corners android:radius="10dp"/>

        <stroke android:width="2px" android:color="#ff888888"/>

    </shape>
</item>

I expect it will look like on first picutre, however it looks like on second with a gray area around the icon. What is wrong?

After I added android:scaleType="fitXY" the buttons looks like:

Answer 1

Add the following attribute to your ImageButton 's XML...

android:scaleType="fitXY"

So, you XML will be...

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button"
    android:scaleType="fitXY" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button"
    android:scaleType="fitXY" />

Update:

Anothr thing I will recommend you to use android:background instead of android:src as follows...

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:background="@drawable/button"
    android:scaleType="fitXY" />

Another way:

if you want to using ImageView then you can do as below...

<ImageView
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button" />

<ImageView
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button" />

Answer 2

Quiet simple it is.

No need to create layer list and all Just use below code

<ImageButton android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@android:color/darker_gray"
   android:src="@drawable/ic_launcher"
   android:paddingLeft="20dip"
   android:paddingRight="20dip"/>

If you observe I have used some plain color for background and provided some icon as an image.

So use two different properties like android:background and android:src

And for Round corner background first create a drawable named round_bg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@android:color/darker_gray" />
    <corners android:radius="10dip" />
</shape>

Now in our above code do following modification

android:background="@drawable/round_bg"

And you will be done. :)

Answer 3

Use this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="@null"
    android:src="@drawable/ic_launcher" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="@null"
    android:src="@drawable/ic_launcher" />

</LinearLayout>

Answer 4

Yes You can use On Click with Image View

This is for reference only

Also One Thing You create Button With Nine patches so that Your Image will streach In some Part and will be responsive

for example

This is Nine patche Image so only the content part will be streach every time. rest will be as it is.