Skip to content

Commit b8e1f97

Browse files
dsn5ftdrchen
authored andcommittedApr 11, 2022
[Docs] Add status bar / edge-to-edge section to Top App Bar dev doc
Resolves #2626 PiperOrigin-RevId: 440945116
1 parent 19d0500 commit b8e1f97

File tree

1 file changed

+15
-0
lines changed

1 file changed

+15
-0
lines changed
 

‎docs/components/TopAppBar.md

+15
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,21 @@ In the layout:
260260
</androidx.coordinatorlayout.widget.CoordinatorLayout>
261261
```
262262

263+
### Status bar and edge-to-edge
264+
265+
![Small top app bar with edge-to-edge status bar](assets/topappbar/topappbar_small.png)
266+
267+
A common configuration for modern Top App Bars, as seen above, is to have a
268+
seamless color shared with the status bar. The best way to achieve this is to
269+
follow the
270+
[edge-to-edge guidance](https://developer.android.com/training/gestures/edge-to-edge),
271+
which will result in a transparent status bar that lets the background color of
272+
the Top App Bar show through.
273+
274+
Make sure to set `android:fitsSystemWindows="true"` on your `AppBarLayout` (or
275+
`MaterialToolbar` if not using `AppBarLayout`), so that an extra inset is added
276+
to avoid overlap with the status bar.
277+
263278
### Center aligned top app bar example
264279

265280
All of the same guidance and code from the sections above is relevant for Center

0 commit comments

Comments
 (0)
Please sign in to comment.