This document is in beta. Help us by reporting issues via Github or email
On this page:
Make sure that touch targets are big enough and have enough distance from each other.
It should be easy to interact with all the touchable items in screen.
Please note this guideline provides informative guidance, but does not set requirements.
Note: This size is not dependent on the screen size, device or resolution. Screen magnification should not need to be used to obtain this size, because magnifying the screen often introduces the need to pan horizontally as well as vertically, which can decrease usability.
Many people have difficulty focusing on small touch targets on the screen. This could be because their fingers are large, or because they have a medical condition that impairs their motor skills. Small touch targets also make it harder for screen reader users to navigate apps using explore by touch.
3.3 Touch Target Size and Spacing: The high resolution of mobile devices means that many interactive elements can be shown together on a small screen. But these elements must be big enough and have enough distance from each other so that users can safely target them by touch.
See the W3C’s detailed explanation of this guideline.
This section needs more content. Contribute via Github or email.
This section needs more content. Contribute via Github or email.
According to the Material Design guidelines, any View that can be touched by the user would have at least a touchable area of 48dp x 48dp.
The easiest way of achieving this via XML is setting a minWidth and minHeight:
<ImageButton
...
android:minWidth="48dp"
android:minHeight="48dp" />
Alternatively, you could use some padding to increase the touchable area:
<ImageButton
...
android:layout_width="30dp"
android:layout_height="30dp"
android:padding="18dp" />
If the design doesn’t allow you to add paddings or change the size, you can use the TouchDelegate API to programatically increase the touchable area. Here’s an example of an extension function to increase the touch area a certain amount of pixels:
fun View.extendTouchArea(@Px space: Int) {
val parent = this.parent as View
parent.post {
val touchArea = Rect()
this.getHitRect(touchArea).also {
touchArea.apply {
top -= space
bottom += space
left -= space
right += space
}
}
parent.touchDelegate = TouchDelegate(touchArea, this)
}
}
Enable developer options by going to Settings > System > Developer Options. Under the Drawing category, find Show layout bounds and turn it on. Your screen should now show the clip bounds, margins, etc. of every visible view.
This section needs more content. Contribute via Github or email.
This section needs more content. Contribute via Github or email.
This document is in beta. Help us by reporting issues via Github or email