System navigation bar needs a little styling
The Android Developers documentation refer to the different system bars that appear at the bottom of the user's device as "System navigation" or the "Navigation bar". These are not to be confused with the Navigation bar used to switch between UI views within an app, which, confusingly, the MD3 design docs refer to by the same name.
For clarity, I'll distinguish between these two components within this issue as follows:
- System navigation bar
- App navigation bar
With that in mind, there are three categories of system navigation bar referenced in the Android Developers docs:
- Gesture navigation
- 3-button navigation
- Other navigation bar variations
In pre-alpha version 0.9.0 and prior, system navigation bars have a solid black background. In Material Design 3, these bars are typically styled like so:
- When the system navigation bar appears in conjunction with an app navigation bar, it inherits the same color as the app navigation bar's container:
-
md.sys.color.surface-container
In Figma, this maps to
surface-container
.
- When the app navigation bar isn't present, the gesture bar's container is fully transparent (i.e. has no background color). whereas the 3-button navigation bar uses a semi-opaque background.