Android full screen sticky immersive mode - how to change the navigation bar background or icon colors?
Asked Answered
P

0

6

I followed the Android dev tutorial and got full screen sticky immersive mode working. This makes the status bar and navigation bar hidden until the user swipes up from the bottom or down from the top, at which point they appear and slowly fade out if not used.

The problem is on Android 10 (and possibly other versions): the navigation bar at the bottom of the screen is just white icons. There's no transparent black background. This makes it really hard to see with a light UI.

Is there any way to change the background or icon colors of the navigation bar? Specifically the sticky immersive navigation bar that appears and fades away (since it is too light to work with light UI's).

I've tried styles and setting the color programmatically, but they only work in non-full screen mode:

<!-- does not work -->
<item name="android:navigationBarColor">@android:color/white</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowLightNavigationBar">true</item>

I've also tried listening to OnSystemUiVisibilityChangeListener so I could show my own transparent bar behind the navigation bar, but it doesn't trigger for sticky immersive mode (as explained in this SO post and video):

Detecting when the system ui is visible with sticky immersive mode

https://www.youtube.com/watch?v=cBi8fjv90E4&feature=youtu.be&t=6m56s

Activity code for setting full screen (kotlin):

protected fun isFullscreen() = defaultSharedPref.getBoolean(SharedPreferenceKey.IS_FULL_SCREEN, false)

private fun supportsFullscreenMode(): Boolean {
    return Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT
}

override fun onWindowFocusChanged(hasFocus: Boolean) {
    super.onWindowFocusChanged(hasFocus)
    if (hasFocus && isFullscreen()) toggleFullScreenMode(true)
}

/**
 * "sticky immersive" full screen mode.
 * When user swipes from top/bottom edge, transparent status bar and navigation bar appear and slowly fade out if not used.
 * https://developer.android.com/training/system-ui/immersive
 */
protected fun toggleFullScreenMode(goFullScreen: Boolean) {
    when {
        !supportsFullscreenMode() -> {
            makeActivityToast("Your version of Android is too old to support this feature", Toast.LENGTH_LONG).show()
        }
        goFullScreen -> {
            hideSystemUI()
        }
        !goFullScreen -> {
            showSystemUI()
        }
    }
}

private fun showSystemUI() {
    window.decorView.systemUiVisibility = 0
}

private fun hideSystemUI() {
    window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        // Set the content to appear under the system bars so that the
        // content doesn't resize when the system bars hide and show.
        or View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
        // Hide the nav bar and status bar
        or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_FULLSCREEN)
}
Pickerel answered 5/6, 2020 at 17:8 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.