Android: expand an ImageView clickable zone

Question

I have a small image displayed in a LinearLayout with some margin on its right ans left. My problem is that the margin isn't clickable. How can I display a space on the right and left of my View, using this extra space to expand my clickable zone ?

<ImageButton
    android:id="@+id/markReadButton"
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:adjustViewBounds="true"
    android:background="@android:drawable/checkbox_on_background"
    android:gravity="center_vertical"
    android:onClick="onMarkRead" >
</ImageButton>

score 1 · Answer 1 · answered Dec 03 '11 at 17:42

This is done in the Google IO 2011 Schenduling app, using a TouchDelegate. Take a look at the Activity that uses it like this;

// Larger target triggers star toggle
final View starParent = mRootView.findViewById(R.id.header_session);
FractionalTouchDelegate.setupDelegate(starParent, mStarred, new RectF(0.6f, 0f, 1f, 0.8f));

The TouchDelegate implementation is implemented here. It is open source and should be easy to import into your project.

Good luck, hope this helps!

score 0 · Answer 2 · answered Apr 02 '14 at 10:17

Just add Layout parent and set eg 20dp greater size of width and height

<RelativeLayout android:id="@+id/relativeLayoutButton"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:paddingRight="20dp"
        android:paddingLeft="20dp" >

<ImageButton
    android:id="@+id/markReadButton"
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:adjustViewBounds="true"
    android:background="@android:drawable/checkbox_on_background"
    android:gravity="center_vertical"
    android:onClick="onMarkRead" >
</ImageButton>

And next set the same posision of layout and your image. set also clickable same layout and button

score 0 · Answer 3 · edited May 23 '17 at 11:55

I think using padding instead of the margin will allow you to give your item more space but also allow it to be clickable.

Have a look at this description of margins vs padding: Difference between a View's Padding and Margin

Edit: Try using android:src for the image, setting android:background="@null" and increasing the overall size of the ImageButton object. At that point, I'm not even sure you'll need the padding at all. You can just modify the height and width as needed with the src image centered in the ImageButton.

    <ImageButton
        android:id="@+id/markReadButton"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:src="@android:drawable/checkbox_on_background"
        android:background="@null"
        android:adjustViewBounds="true"
        android:onClick="onMarkRead"
    />

Looks like there are a couple of extra things that have to be done to get the padding to work like you want. You can use the src value to set the image and set the background to @null. Increasing the overall width of the ImageButton object will then give you the size that you want. — Aldryd, Dec 03 '11 at 17:22

Android: expand an ImageView clickable zone

3 Answers3