What exactly is "Touch Target Size" in Android Material Design

Question

With reference to Android docs on Material Design, I often find that we are guided to set the "touch target" of a button to, let say, 48dp in height (https://www.google.com/design/spec/components/buttons.html#buttons-style). But is it a default value for every Button element, or I have to set it explicitly and how?

Answer 1

If you're fine with the default Material Button, just use it. It's ok for most things. Material theme for Button is defined as:

<!-- Bordered ink button -->
<style name="Widget.Material.Button">
    <item name="background">@drawable/btn_default_material</item>
    <item name="textAppearance">?attr/textAppearanceButton</item>
    <item name="minHeight">48dip</item>
    <item name="minWidth">88dip</item>
    <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
    <item name="focusable">true</item>
    <item name="clickable">true</item>
    <item name="gravity">center_vertical|center_horizontal</item>
</style>

As you can see the minHeight attribute is set to 48dp, which means that this button will be at least 48dp tall. What's bad about it is that Button's background has insets, which means that additional touch area is achieved by having some transparent pixels around a button. It makes buttons really hard to layout properly, as in the following SO post:

How to align Material buttons with other UI elements

Such widget design really limits layout building options. The guidelines describe a touch target as an external, additional touch area which should affect a widget. It should be done like this:

• overwrite the default background with a round rect shape with 2dp radius
• set minHeight to 36dp
• use setTouchDelegate to change touch target
• or overwrite getHitRect to change touch target

See:

https://developer.android.com/reference/android/view/TouchDelegate.html

https://developer.android.com/reference/android/view/View.html#getHitRect(android.graphics.Rect)