Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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 '12 at 13:41
    
How large are your touch target areas? –  dnbrv Apr 4 '12 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 '12 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 '12 at 0:53
add comment

1 Answer

up vote 2 down vote accepted

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));
    }
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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