Is your app offering a backward appropriate edge-to-edge expertise? | by Yuichi Araki | Android Builders | Jan, 2023

“Please make the navigation bar clear”
— Android customers (androidpolice.com)

We suggest that all apps use an edge-to-edge structure, which means that it attracts behind the system bars to make use of the complete width and top of the show. This implies your app ought to do the entire following.

• Sign to the system that the app desires to attract behind the system bars.
  In your Exercise’s onCreate:
  WindowCompat.setDecorFitsSystemWindows(window, false)
• Set the system bar colours to be both clear or translucent.
  ・ In theme XML: <merchandise identify=”android:statusBarColor” instruments:targetApi=”21">@android:coloration/clear</merchandise>
  ・ In code: window.statusBarColor = clear.
• Offset composables or views by the sizes of the system bars.
  ・ Compose: Modifier.safeDrawingPadding(), and so forth
  ・ View: Use ViewCompat.setOnApplyWindowInsetsListener to acquire the insets.

To study extra about how you can arrange edge-to-edge on the newest Android model, try “Designing a top quality app with the newest Android options” from Android Developer Summit ‘22.

The sting-to-edge app seems particularly good within the gesture navigation mode as a result of it may present extra content material utilizing the complete display actual property. When the system is ready to the three-button navigation mode, the system robotically applies a translucent scrim to the navigation bar background.

API stage 29 (Android 10) launched gesture navigation. Totally different app builders would possibly make totally different choices on how or whether or not edge-to-edge must be arrange for API stage 28 and under. Some builders would possibly arrange edge-to-edge solely API ranges 29 and above for the reason that older API ranges solely had three-button navigation. If you wish to arrange edge-to-edge in essentially the most backward-compatible method potential, right here’s how.

Let’s begin by itemizing key API ranges that launched options associated to edge-to-edge.

API stage 19 (Android 4.4 KitKat)

• The background of system bars will be translucent by the flags WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS / _NAVIGATION
  Nevertheless, it’s a translucent gradient and the looks is kind of totally different from that on later variations.

API stage 21 (Android 5.0 Lollipop)

• The background of system bars will be translucent by the flags
  WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS / _NAVIGATION
  Now, the colour is solely translucent.
• The background of the standing bar will be set to clear (or translucent) by Window.setStatusBarColor.
  Nevertheless, this isn’t absolutely usable for the reason that icon coloration can’t be modified from white.
• The background of the navigation bar will be translucent (or clear) by Window.setNavigationBarColor.
  Nevertheless, this isn’t absolutely usable for the reason that icon coloration can’t be modified from white.

API stage 23 (Android 6.0 Marshmallow)

• The icon coloration on the standing bar will be toggled gentle or darkish by WindowInsetsControllerCompat#isAppearanceLightStatusBars.

API stage 26 (Android 8.0 Oreo)

• The icon coloration on the navigation bar will be toggled gentle or darkish by WindowInsetsControllerCompat#isAppearanceLightNavigationBars.

API stage 29 (Android 10)

• Helps all of the options associated to edge-to-edge.
  ・ Gesture navigation.
  ・ Auto scrim on three-button navigation. May be adjusted by Window#isNavigationBarContrastEnforced.
• Darkish mode

With these in thoughts, right here’s one potential technique.

API stage 20 and under

• No edge-to-edge on these variations.

API stage 21 and 22

• Each the standing bar and the navigation bar have white icons on black translucent background.

API stage 23 to 25

• The standing bar has a clear background. The icon coloration will be gentle or darkish relying on the app design.
• The navigation bar has white icons on black translucent background.

API stage 26 to twenty-eight

• The standing bar has a clear background. The icon coloration will be gentle or darkish relying on the app design.
• The navigation bar has a translucent background. The icon coloration will be gentle or darkish relying on the app design.

API stage 29 and above

• Each the standing bar and the navigation bar have clear backgrounds.
• The system handles the remaining. It applies a translucent background on three-button navigation. It adjusts the colours in darkish mode.

Let’s see the way it works on emulators operating numerous API ranges.

Right here’s a code to set these all up.