Any on-screen element that someone can click, touch, or otherwise interact with should be large enough for reliable interaction. Consider making sure these elements have a width and height of at least 48dp, as described in the Material Design Accessibility guidelines.
Implementation
View
Compose
Design
Touch targets include the area that responds to user input. Touch targets extend beyond the visual bounds of an element: An element like an icon may appear to be 24x24dp but the padding surrounding it comprises the full 48x48dp touch target. In Jetpack Compose, Material components like Checkbox
or Switch
automatically add padding to make sure they’re at least 48x48dp. In some cases, such as very small and close-together buttons, elements can’t be expanded without causing touchable regions to overlap.
Consider making touch targets at least 48x48dp, separated by 8dp of space or more, to ensure balanced information density and usability. A touch target of 48x48dp results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen objects is 7-10mm.
For examples, refer to the Material Design Accessibility guidelines.
Testing
To manually verify that an app's user interface doesn't contain small touch targets:
- Open the app.
- Identify all clickable, touchable, or interactable elements within the interface.
- Ensure that each of those elements is 48x48dp in size, or approximately 9mm in each dimension.
Android's automated testing tools can detect small touch targets. Consider using Accessibility Scanner for Android for manual testing of your app on-device. For automated tests, turn on accessibility checking in Espresso and Robolectric.