Search code examples
androidandroid-layoutandroid-fragmentsandroid-architecture-navigationandroid-navigation

How to remove white flicker / flash while navigating between fragments?


I've set bottom navigation using Navigation Component, but whenever I navigate between fragments I see a white flicker.

enter image description here

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    navController = Navigation.findNavController(this, R.id.dashboardNavHostFragment)
    bottomNavigationView.setupWithNavController(navController)
}

this is how I setup my bottom navigation.


Solution

  • setupWithNavController uses a cross fade animation to swap between tabs as per the material design guidelines. A cross fade means that the previous tab is going from fully opaque to fully transparent while the new tab is going from fully transparent to fully opaque. During the middle of this transition, both tabs are semi-transparent. This means that you'll partially see through both of them to see the android:windowBackground you've set on your activity.

    In your case, it appears that you have a white windowBackground, which is where the white flash is coming from.

    You should either:

    1. Update your activity's theme to use a Dark theme, which will give you a dark windowBackground by default or

    2. Manually update your theme to include a dark background:

        <item name="android:windowBackground">@color/black</item>