SPEAKER: Any onscreen element that someone
can touch to perform an action on your app
should be large enough for reliable interaction.
In general, you should ensure that interactive elements
have a width and height of at least 48dp.
And in this video, you'll learn about a few ways in which
you can make this happen.
So why are touch targets important?
For users with limited touch, physical strength, or mobility,
small touch targets may be difficult to interact with.
Even users with perfect touch may
struggle to easily use such controls
if their touch precision is temporarily impaired.
For example, when they are walking or riding a bus.
So what are your options for ensuring that touch targets are
adequate?
You can use an Android minWidth and an Android minHeight
to set lower bounds on unused dimensions;
or you can add padding; or, to retain
the original size of a view while expanding
its touchable region, you can use
a TouchDelegate, which allows a parent
layout to handle touch events on behalf of the descendant view.
Let's make all this concrete with an actual example.
Consider this 24dp by 24dp ImageButton,
which is not considered large enough
for a reliable interaction.
First, how do you test this?
How do you discover that the touch
target isn't actually adequate?
Android's automated testing tools can help,
and they can help you detect small touch targets.
Consider using Accessibility Scanner for Android
for manually testing your app on your device.
If you run Accessibility Scanner on the screen which
has this button, it will recommend
you fix the touch target.
And if you are running Android Studio 3.1 Arctic
Fox or higher, the issues panel will also
flag the touch target.
So pay attention to those warnings.
For automated tests, you can also
turn on accessibility checking in Espresso and Robolectric,
and we will cover that in a separate video
later in the series.
Let's get into Android Studio and try
to make this image button more accessible.
Approach 1.
You can add an Android midWidth and an Android midHeight
of 48dps or greater.
And when you do this, both the scanner and studio warnings
will disappear.
This may make the icon larger.
So let's try approach 2.
Because maybe you want to keep the icon small--
in this case, 24dp by 24dp--
but you want to expand the touchable area of the icon.
So you can now add padding.
In this case, if you add a 12dp padding on each side,
you can attain a touchable area of 48dp by 48dp.
One useful resource when working with padding
is to visualize the layout bounds of your views.
Going into Developer Options on your phone,
and turn on Show Layout Bounds.
With that option turned on, you can
see exactly how each view on the screen is laid out.
Here's how a 24dp by 24dp icon looks with layout bounds
enabled and no padding added.
And here's how the same icon looks
with 12dp padding on all sides.
The icon now has a bigger touchable area
that meets the minimum recommendations
for touchable elements.
Now let's try approach 3.
You can use the TouchDelegate API.
When you use this API, you redefine the hit rect
of a view.
And you expand out the touchable area for that view
beyond its actual bounds.
Note that Accessibility Scanner can detect and account
for the use of TouchDelegate only when running
on Android 10 or higher.
On earlier Android versions, touch target size results
may appear even when this API is used to enlarge touch
targets to an appropriate size.
As usual, when accessibility is involved,
you can help yourself by following best practices
at the design stage.
For example, as you consider making touch targets
at least 48dp by 48dp, consider also
separating them by 8dp of space or more
to ensure balanced information density and usability.
Refer to the Material Design Accessibility
Guidelines for recommendations related
to touch targets and other accessibility issues.
The link to these guidelines has been added to this video's
description below.
To summarize, you should strive to make
all interactive elements at least 48dp high and 48dp wide.
You can do this by setting an Android minWidth and an Android
minHeight, or by adding padding, or by installing
a TouchDelegate.
And you can use Android Studio's issue panel warnings
and automated testing tools like Accessibility Scanner
to detect small-touch targets.
Thanks for listening, and stay tuned for more accessibility
videos.