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?
2 Answers
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)
Material Design is a design spec, and as such, talks a lot about the "what," and not a lot about the "how." The touch target size is based on what has been found over the years to be the minimum size a widget should be, to be easily interacted with by the average person's finger. If you stick with themes and styles defined by Google (AppCompat themes, for example), you should be fine. If you are using completely custom themes (which I'd personally recommend you don't do), then you'd have to style your widgets with a minWidth and/or minHeight of 48dp.