Managing ImageButtons

Sometimes when designing our application we limit the touch area of a ImageButton to its image, making the buttons difficult to use and our users angry.

Or for the contrary, we make the ImageButton bigger distorting the image in the process.

This is because we are managing bad the src and background properties of ImageButton.
The key is to assign the image to the src property, not the background.
If you set the image to the background it will stretch until occupy all the button.
Don’t forget to set the background to null (@null) or transparent (@android:color/transparent) or the background will get a light gray touch.

Bad
The image is set to the background property, and the image get stretched:

Stretched button

<ImageButton
    android:id="@+id/brush"
    android:layout_height="fill_parent"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="fill_parent"
    android:background="@drawable/ic_action_edit"/>

Bad
There background is not set to transparent and we get a gray background.

Light background

<ImageButton
    android:id="@+id/brush"
    android:layout_height="fill_parent"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="fill_parent"
    android:src="@drawable/ic_action_edit"/>

Good

Good

<ImageButton
    android:id="@+id/brush"
    android:layout_height="fill_parent"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:src="@drawable/ic_action_edit"
    android:background="@null"/>

It has the layout_width to 0dp and the weight to 1 because it is in a LinearLayout occupying all the width. Here is the result.

Bar

Better
Finally, to give the user a feedback I create a drawable (called background_button)that highlights the button when is pressed.

Pressed button

<ImageButton
    android:id="@+id/brush"
    android:layout_height="fill_parent"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:src="@drawable/ic_action_edit"
    android:background="@drawable/background_button" />

Here is the drawable:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#44ffffff" />
            <corners android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" android:topLeftRadius="6dp" android:topRightRadius="7dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />
            <corners android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" />
        </shape>
    </item>
</selector>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s