4

What are some good ways to make the CheckBox widget easier to tap in Android apps? In my app, both the CheckBox and the thing-behind-and-next-to-the-CheckBox are tappable, serving distinct functions. I've noticed that it's hard to target the CheckBox with my index finger, and I have slender fingers.

For context, this CheckBox is on the right side of a ListView adapter. The left side of the item has two TextViews. The ListView is a shopping list; the user taps the item in the shopping list to see a detailed description in a dialog, and taps the CheckBox to mark the item as purchased. Therefore, I can't just make the whole item tappable to toggle the CheckBox, as there would be no good way to view the detail dialog.

I've considered making some kind of ghost widget surrounding the CheckBox, which triggers a CheckBox toggle, just to make it a bigger target for fingers, but is that good UI design? Is there a best-practice solution?

4
  • Why is the checkbox distinct from the row/ect item the checkbox is on? This isn't usually a problem because apps use checkboxes in a list where the whole row is clickable, the actual checkbox is too small but it's not mean to be the strict tap target.
    – Ben Brocka
    Apr 4, 2012 at 13:41
  • How large are your touch target areas?
    – dnbrv
    Apr 4, 2012 at 15:31
  • @dnbrv I kinda take it he's using the default Android checkbox size and nothing else. That checkbox isn't meant to be the only tap target as I said.
    – Ben Brocka
    Apr 4, 2012 at 19:59
  • @BenBrocka I agree that, if the item isn't tappable with a distinct function, then the whole item should toggle the CheckBox, so I updated the question.
    – Jacob
    Apr 5, 2012 at 0:53

1 Answer 1

3

You can try using a TouchDelegate to increase the clickable area of the checkbox itself. You can find an answer on SO indicating how to do that here.

Copy-pasting:

final View parent = (View) delegate.getParent();
parent.post( new Runnable() {
    // Post in the parent's message queue to make sure the parent
    // lays out its children before we call getHitRect()
    public void run() {
        final Rect r = new Rect();
        delegate.getHitRect(r);
        r.top -= 4;
        r.bottom += 4;
        parent.setTouchDelegate( new TouchDelegate( r , delegate));
    }
});
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.