material-components / material-components/material-components-android

[TopAppBar] Spacing does not match M3 specs

Open
#2,742 8 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request Issue: Design Spec Mismatch Widget: TopAppBar
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Is your feature request related to a problem? Please describe.**
According to the Material Design 3 docs, this is how a Top App Bar should be laid out:

![image](https://user-images.githubusercontent.com/65370175/172750298-5a8eb3a8-ae2b-4ca8-8b64-863538554e1e.png)

There should be 16dp of spacing from the edge of the screen to the icon, and each icon should be spaced 24dp apart.

`MaterialToolbar` (which is based on AppCompat `Toolbar`) is inconsistent with this design for three reasons:

1. The overflow icon has a `minWidth` of 36dp. It should be 48dp.
2. The navigation icon is also sized strangely, with it taking up 56dp instead of 48dp.
3. The toolbar does not pad correctly. While the navigation icon seems to be padded right, the action buttons have no padding whatsoever. The Toolbar does apply padding on tablet layouts, but not only is it 8dp, it is also applied to the already-padded navigation icon.

**Describe the solution you'd like**
I want the library to override the Toolbar styles to remove these inconsistencies. I would bring this over to the core AppCompat libraries, but I imagine that these quirks exist due to compat reasons, so I feel like it would be better if such was overridden in the material design library.

**Describe alternatives you've considered**
I've figured out how to implement this myself using some ugly hacks.

To resize the overflow icon, I redefined `actionOverflowButtonStyle` to this:
```xml

<!-- 48dp + no padding hacks -->
<item name="android:minWidth">48dp</item>
<item name="android:minHeight">48dp</item>
<item name="android:paddingStart">0dp</item>
<item name="android:paddingEnd">0dp</item>

```

To resize the navigation icon, I redefined `toolbarNavigationButtonStyle` to this:
```xml

<!-- Can't change the height, but we can change the width -->
<item name="android:minWidth">48dp</item>

```

To resolve the padding issue, I defined a custom toolbar style to this in a plain `values` folder:
```xml

<!-- Navigation icon already pads correctly, do not pad it -->
<item name="android:layout_marginEnd">4dp</item>

```

And then defined the same style as this in `values-sw600dp`:
```xml

<!-- Remove the 8dp navigation padding (navigation icon already pads correctly) -->
<item name="android:layout_marginStart">-8dp</item>
<!-- Remove half of the 8dp navigation padding (keep 4dp) -->
<item name="android:layout_marginEnd">-4dp</item>

```

This causes the toolbar to go from this:
![image](https://user-images.githubusercontent.com/65370175/172752407-0a678c50-22c7-455a-8255-11441df023b4.png)

To this:

![image](https://user-images.githubusercontent.com/65370175/172752111-85da16cd-e9fe-43cd-a759-a28c279ef085.png)

Which I feel is much more consistent with the Material Design guidelines.

**Additional context**
I don't know what the reasoning is behind this. I hope it is simply some legacy cruft that this library can clear out. If this isn't possible, I'm fine with my hacks to fix this.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with MaterialToolbar and its AppCompat Toolbar styles, especially actionOverflowButtonStyle and toolbarNavigationButtonStyle. Compare the current icon sizing and padding with the Material Design 3 spacing described in the issue, including tablet behavior. Done means the toolbar consistently provides 48dp icon areas and the specified 16dp edge and 24dp inter-icon spacing without compatibility regressions.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, xml
Domain
design, mobile
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.