material-components / material-components/material-components-android
[TopAppBar] Spacing does not match M3 specs
Nobody has claimed this yet.
- 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:

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:

To this:

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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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