Android ImageButton how to have a clickable area that is larger than the image itself?

Question

I have a small Android ImageButton on a screen representing an icon. The problem is that it is difficult to touch, and activate. I don't want to increase the size of the image itself but I would like to expand the clickable region and make it larger, so if the user is close enough to the image it will activate the onClick event. How can this be done without implementing onTouch events for the surrounding screen area?

Answer 1

You could wrap your ImageButton in another ViewGroup and set padding on the ViewGroup. Then you would listen for clicks on the ViewGroup. Here's an example:

<FrameLayout
    android:id="@+id/button_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20dp" >

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_button"
        android:duplicateParentState="true"
        android:clickable="false"
        android:focusable="false" />

</FrameLayout>

You would then listen for clicks on R.id.button_layout, and your ImageButton should receive all the same states (pressed, clicked, etc.) as the parent layout.