[BottomAppBar] Replacing menu while changing fab alignment mode causes flickering

[valentingavran]

Description: If you change the fab alignment mode and replace the menu in the BottomAppBar the items get replaced 2 times. It looks like the icons are flickering.

Expected behavior: There should be a smooth transition of the items if they change the side in the BottomAppBar. Also the animation should not be affected, if in this time the menu items change.

Source code:

controller.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener(){
    @Override
    public void onDestinationChanged(@NonNull NavController controller, @NonNull NavDestination destination, @Nullable Bundle arguments){
        if (destination.getId() == R.id.homeFragment){
            bottomAppBar.setNavigationIcon(R.drawable.ic_menu);
            bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_CENTER);
            bottomAppBar.replaceMenu(R.menu.home_fragment_menu);
        }else{
            bottomAppBar.setNavigationIcon(null);
            bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_END);
            bottomAppBar.replaceMenu(R.menu.details_fragment_menu);
        }
    }
});

Android API version: 29

Material Library version: Material Android Library version you are using here (e.g., 1.2.0-alpha03)

Device: Pixel 3 Emulator

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

[adrielcafe]

Same behavior with me. Tested with 1.1.0 and 1.2.0-alpha04.

In addition, the menu is replaced first and then the FAB moves, as you can see below:

[AxelBlaz3]

Not sure, but can you confirm if animateLayoutChanges=true is set to true in container layout (Assuming it to be a CoordinatorLayout)? If yes, that might be the root cause of your issue. Verify disabling it.

[TerryGlen]

With 1.3.0-alpha02 setFabAlignmentModeAndReplaceMenu() has been added.

bottomAppBar.setFabAlignmentModeAndReplaceMenu(BottomAppBar.FAB_ALIGNMENT_MODE_END, R.menu.sample)

Using this, I am no longer experiencing the flickering effect.

[DanteAndroid]

With 1.3.0-alpha02 setFabAlignmentModeAndReplaceMenu() has been added.

bottomAppBar.setFabAlignmentModeAndReplaceMenu(BottomAppBar.FAB_ALIGNMENT_MODE_END, R.menu.sample)

Using this, I am no longer experiencing the flickering effect.

Unfortunately, I'm using setHasOptionsMenu and onCreateOptionsMenu in fragment (for handle menu click event in it), so I cannot use replaceMenu methods. Any idea?

[hunterstich]

@TerryGlen thank you for pointing out the setFabAlignmentModeAndReplaceMenu method.

@DanteAndroid would you be able to upload a small sample that reproduces your issue?

[DanteAndroid]

BottomAppBarDemo.zip @hunterstich Please check it out