CODEWITHSUNDEEP
androidandroid-layoutdesign-guidelines
Ersen Osman
Ersen Osman

Reputation: 7247

Android Material Design: How to set the touch target size of a Toolbar action button?

Reading this section

http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-touch-target-size

So in my tool bar I have buttons 

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
    <item android:id="@+id/action_settings" android:title="@string/action_settings"
        android:orderInCategory="100" app:showAsAction="never" />

    <item android:id="@+id/info" android:title="info"
        android:icon="@android:drawable/ic_dialog_info"
        android:orderInCategory="200" app:showAsAction="always" />

    <item android:id="@+id/map" android:title="map"
        android:icon="@android:drawable/ic_dialog_map"
        android:orderInCategory="300" app:showAsAction="always" />
</menu>

How would I go about setting the touch target size? All these action buttons have to be 48 by 48 dp

But as I understand the dimensions of the action buttons

  1. 18x18 (MDPI)
  2. 24x24 (HDPI)
  3. 36x36 (XDPI)
  4. 48x48 (XXHDPI)

So how can I set a 48dp touch target size for an MDPI image?

Please help

Upvotes: 1

Views: 3142

Answers (2)

Martin Zeitler
Martin Zeitler

Reputation: 76807

When the pre-launch accessibility-report complains about the ActionBar items' height:

Consider making this clickable item larger. This item's height is 43dp.
Consider making the height of this touch target 48dp or larger.

The problem may be, that ?android:attr/actionBarSize is simply 5dp too low,
which ultimately leads to touch-target surfaces with reduced or truncated height.

This can be fixed by adjusting the ActionBar height with android:actionBarSize.
Default height 56dp + the missing 5dp = a minimum height of 61dp is required.

<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
    <style name="Theme.SomeApp" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge">
        <item name="android:actionBarSize">@dimen/actionbar_default_height</item>
    </style>
</resources>

With dimens.xml:

<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
    <dimen name="actionbar_default_height">62dp</dimen>
</resources>

Widget.MaterialComponents.Toolbar also would have?attr/actionModeStyle, but changing ?android:attr/actionBarSize should make these action-buttons fit into the layout already.

Most useful for debugging: Show Layout Bounds.

Upvotes: 0

Eugene H
Eugene H

Reputation: 3568

ImageView making it clickable.

The Image is 18 x 18 dp.

The view is 48 x 48

Finding the padding. (48 - 18) / 2 = padding

<ImageView
    style="?android:buttonBarButtonStyle"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:clickable="true"
    android:padding="15dp"
    android:src="@mipmap/ic_launcher"/>

Upvotes: -1

Related Questions