Search code examples
androidandroid-jetpackmaterial-components-android

Material Toolbar & Jetpack navigation glitch issues

I have some strange "glitch" and refresh issues with my application, using jetpack navigation library (2.3.5), Material Toolbar and view bindings.

The demo scenario is the following: a simple navigation between 3 different fragments.

ENTRY POINT ---> SCREEN C ---> SCREEN D

DISCLAIMER

Sorry for the "pseudo-blur boxes" on the screen, but I can't show the real UI, and if I change the fragment layout for demo purpose, the issue changes. So I need to use the real UI.

First step : ENTRY POINT ---> SCREEN C

The user enter in our app: an empty MaterialToolbar is on screen top, with a standard back icon.

Initial State

Then the user tap on a button and enter into SCREEN C. When the SCREEN C is fully rendered, the Material Toolbar is updated with the screen title "SCREEN C", a custom navigation icon and a menu item on the right (the question mark icon).

Step 1

As you can see in the gif, there are 2 main issues during the navigation:

  • The screen title "SCREEN C" is initially shown with a very large font and wrong color (the white one). This is the style of the empty MaterialToolbar in the ENTRY POINT fragment.
  • The back icon is initially the standard one, after a while (when the whole screen is rendered) it is changed with the custom navigationIcon.

Second step: SCREEN C ---> SCREEN D

The user is on "SCREEN C". Then tap on a card and enter into "SCREEN D".

From C to D

When the SCREEN D is fully rendered, the Material Toolbar is updated with the screen title "SCREEN D", a custom back arrow icon and the menu item on the right will disappear.

second step

As you can see in the gif, there are also some issues:

  • First, the title "SCREEN D" is shown to the user, with the standard back icon and the menu item on the right
  • Then, when "SCREEN D" is fully rendered, the back icon is the custom one and the menu item disappears.

The MaterialToolbar, in every fragment, is configured as following:

val navController = NavHostFragment.findNavController(fragment)
val appBarConfiguration = AppBarConfiguration(navController.graph)
setupWithNavController(navController, appBarConfiguration)

This is called in the fragment onViewCreated callback.

Why there is such rendering issue during every navigation step?

Solution

  • When you pass a toolbar to setupWithNavController, it'll automatically set the title as you navigate around the app, using the label value of the navigation destination. It's designed so you have a static toolbar in your activity, with the destination fragments swapped out underneath it, and the toolbar updates to reflect the current fragment.

    When you have a separate toolbar in every fragment, you get this glitch where the title updates on the current fragment's toolbar before the navigation to the next fragment happens. The easiest fix here is to just clear the label values on each fragment in the navigation graph, and set them manually on each toolbar (e.g. in the layout XML). I've seen Ian Lake (one of the developers) say that the labels are really intended for that automatic-title-change behaviour, and you shouldn't use them if you have separate toolbars

    here we are - in the comments on this question: How to remove glitch when navigating between Fragments with different toolbars?

    Why are you using labels in your navigation graph at all then? Toolbars have APIs to set a static title, which is certainly appropriate if you know that Toolbar is only associated with one fragment.