Preferred way to set clickable image icon

It is very common these days to have an image icon that is clickable in your app. This may sound simple, but one might miss out doing it the right way.

The crude approach

To make it, it looks as simple as below

<ImageView
 android:layout_width=”wrap_content”
 android:layout_height=”wrap_content”
 android:onClick=”toastLove”
 android:src=”@drawable/ic_favorite_border_black_24dp” />

However, this is not good, it is hard to hit it as shown below.

The reason is simple, it is just a 24dp image. To see the exact size, one could use the Show layout bounds of Developer Option to see as below.

So that’s the reason it is hard to hit the touchable area.

Expand the touchable area.

As recommended in the link below, the icon should have a touchable area of 48dp.