Another Android Blog

I decided to create an “irregularly shaped” and small arrow image to be used as a button. The problem was, when I set it as a background image, the hit area only reported when the actual image was being hit. The quick fix is to use a drawable inset to create a bounding box around the image. Here’s my setup and the example image. This post is short and sweet. Leave a comment if you need further help – I’ll try to answer.

Button XML code:

/res/layout/batting_lineup_list_item.xml

...
<Button
    android:id="@+id/battinglineuplistitem_upbutton"
    android:layout_weight="40"
    android:layout_width="0dip"
    android:layout_height="40dip"
    android:background="@drawable/arrow_up_inset_drawable"
    >
</Button>
...

The Drawable Inset

/res/drawable/arrow_up_inset_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/arrow_up"
    android:insetTop="16dp"
    android:insetBottom="12dp"
    android:insetLeft="8dp"
    android:insetRight="8dp"
    >
</inset>

The Button Graphic PNG Image

The @drawable/arrow_up reference is pointing to the drawable png file inside of the resources directory…

/res/drawable-hdpi/arrow_up.png
/res/drawable-ldpi/arrow_up.png
/res/drawable-mdpi/arrow_up.png

End Result

Have a great one!
Randall

Tags: android development, android ui design, bounding box, button, drawable, hit area, inset