From b8e1f978940c218502ee6161d0b3f673299eceb0 Mon Sep 17 00:00:00 2001 From: dsn5ft <1420597+dsn5ft@users.noreply.github.com> Date: Mon, 11 Apr 2022 14:20:59 -0400 Subject: [PATCH] [Docs] Add status bar / edge-to-edge section to Top App Bar dev doc Resolves https://github.com/material-components/material-components-android/issues/2626 PiperOrigin-RevId: 440945116 --- docs/components/TopAppBar.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/components/TopAppBar.md b/docs/components/TopAppBar.md index 0fc3f802783..a9b2c655afb 100644 --- a/docs/components/TopAppBar.md +++ b/docs/components/TopAppBar.md @@ -260,6 +260,21 @@ In the layout: ``` +### Status bar and edge-to-edge + +![Small top app bar with edge-to-edge status bar](assets/topappbar/topappbar_small.png) + +A common configuration for modern Top App Bars, as seen above, is to have a +seamless color shared with the status bar. The best way to achieve this is to +follow the +[edge-to-edge guidance](https://developer.android.com/training/gestures/edge-to-edge), +which will result in a transparent status bar that lets the background color of +the Top App Bar show through. + +Make sure to set `android:fitsSystemWindows="true"` on your `AppBarLayout` (or +`MaterialToolbar` if not using `AppBarLayout`), so that an extra inset is added +to avoid overlap with the status bar. + ### Center aligned top app bar example All of the same guidance and code from the sections above is relevant for Center