Navigation bar color not set when using 3-button navigation

[kosenda]

Describe the bug Navigation bar color not set when using 3-button navigation

To Reproduce

1. Launch this app

Expected behavior The color of the 3-button navigation is the same as the KaigiBottomBar container color.

Screenshots If applicable, add screenshots to help explain your problem.

What I know at this time

The following will fix the problem for API28 and other devices, but if the device switches between gesture navigation and 3-button navigation in the settings, the color of the 3-button navigation will not be displayed.

https://github.com/DroidKaigi/conference-app-2023/blob/0fb3c4d81e1deb4bd976cded6601977ad20efc01/app-android/src/main/java/io/github/droidkaigi/confsched2023/MainActivity.kt#L26

↓ ↓ ↓ ↓ ↓

enableEdgeToEdge(
    statusBarStyle = SystemBarStyle.auto(
        lightScrim = Color.Transparent.toArgb(),
        darkScrim = Color.Transparent.toArgb(),
    ),
    navigationBarStyle = SystemBarStyle.auto(
        lightScrim = Color.Transparent.toArgb(),
        darkScrim = Color.Transparent.toArgb(),
    ),
)

Before	After	Description
		Emulator Pixel4 API28 (Only 3-button navigation can be configured.)
		Emulator Pixel6 API30 3-buttonNavigation
		Emulator Pixel6 API30 GestureNavigation

[takahirom]

Looks great!

[takahirom]

@kosenda Do you want to do this?

[kosenda]

@takahirom Thank you ! In conclusion, I wouldn't want to do this issue. Because I had been trying various ways to do this, but on a device that allows both 3-button navigation and gesture navigation, I have no idea how to set the color for the 3-button navigation at the moment.

[takahirom]

@kosenda What if we include a comment indicating the issue and only implement a fix for API 28?

[kosenda]

@takahirom If those are the only two things I would like to do !

[takahirom]

@kosenda I'll leave this issue as it is since this issue is not solved but you can do the two things whenever you want!

[kosenda]

@takahirom I understand !

[ked4ma]

Sorry for jumping in from the side. :pray: I tried specifying containerColor = Color.Red for KaigiBottomBar, and it seemed like the navbar indeed displayed a faint ping color (as seen in the left image). Also, during the dark theme, it seemed like the contrast was adjusted (as shown in the right image). The settings seem to be applied correctly, but maybe the contrast made it barely noticeable. (I tryed with "Pixel 6 API 30")

light	dark

Other Experiment

And If set `navigationBarStyle` like following, navbar's style seems to be changed. (It is displaying navbar as dark mode, so it might be a BAD CODE.) ```kotlin // TODO: ※※ IT IS SAMPLE CODE. ※※ navigationBarStyle = if (VERSION.SDK_INT >= VERSION_CODES.Q) { // >= 29 (ref: `EdgeToEdge.kt`) SystemBarStyle.auto( lightScrim = Color.Transparent.toArgb(), darkScrim = Color.Transparent.toArgb(), ) { _ -> true } // always display as dark mode to change the contrast when it is on light mode. } else { SystemBarStyle.auto( lightScrim = Color.Transparent.toArgb(), darkScrim = Color.Transparent.toArgb(), ) }, ```

[kosenda]

Thank you ! It was very helpful to have the color settings themselves!

[nkratochwill]

This should color the statusbar and 3 button navigation bar correctly on all android versions in both light and dark mode:

val currentNightMode = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
val systemBarStyle = when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> SystemBarStyle.light(Color.Transparent.toArgb(), Color.Transparent.toArgb())
    Configuration.UI_MODE_NIGHT_YES -> SystemBarStyle.dark(Color.Transparent.toArgb())
    else -> error("Illegal State, current mode is $currentNightMode")
}
enableEdgeToEdge(
    statusBarStyle = systemBarStyle,
    navigationBarStyle = systemBarStyle,
)

Cheers