[TopAppBar] TopAppBar is flickering when changing tabs and using app:liftOnScrollTargetViewId

Description: I’ve created an app with different tabs whereas each tab contains a separate fragment with separate id’s. Each fragment contains a RecyclerView. The main activity setup consists of AppBarLayout, MaterialToolbar and TabLayout followed by a ViewPager2. In order to control the color effect when lifting the AppBar, I’m using app:liftOnScrollTargetViewId in addOnTabSelectedListener of the TabLayout. The list is updated in the background by a handler.

I’ve noticed the following behavior when two adjacent tabs are in different states:

1. The AppBar of the first tab (called “Alpha”) is in lifted state whereas the AppBar of the second tab (called “Beta”) is not in lifted state. That means that the AppBar of tab “Alpha” has a darker color (light-grey) than the one from tab “Beta” (white).
2. When switching between the tabs, the AppBar is flickering. See video: https://github.com/patrickfrei/test_coding/blob/main/issue.mp4
3. Looking closely at that video you can see the following effects (you have to scroll manually and very slowly through the video): ==> When switching from tab “Alpha” to “Beta”, the AppBar color is changing from light-grey to white, then again to light-grey and is then fading to white. ==> When switching from tab “Beta” to “Alpha”, the AppBar color is changing from white to dark-grey (for the AppBar only) and then to light-grey (for status bar and AppBar; seems to be adapting to the status bar color).

I was debugging the code and modified different parameters of the AppBarLayout. I couldn’t find the exact reason for the flickering but it seems to me that the logic behind app:liftOnScrollTargetViewId somehow interferes with the default elevation-parameter of the AppBarLayout. They seem to have different colors in different layout states.

Expected behavior: The AppBar doesn’t flicker when switching from one tab to another.

Source code:

tabLayout.addOnTabSelectedListener(
                new TabLayout.OnTabSelectedListener() {
                    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
                    @Override
                    public void onTabSelected(TabLayout.Tab tab) {
                        int recyclerviewId;
                        switch (tab.getPosition()) {
                            case 0:
                                recyclerviewId = R.id.tab1ListView;
                                break;
                            case 1:
                                recyclerviewId = R.id.tab2ListView;
                                break;
                            default:
                                recyclerviewId = R.id.tab1ListView;
                        }
                        AppBarLayout appBarLayout = findViewById(R.id.appbar);
                        appBarLayout.setLiftOnScrollTargetViewId(recyclerviewId);
                    }
                    @Override
                    public void onTabUnselected(TabLayout.Tab tab) {
                        // no-op
                    }
                    @Override
                    public void onTabReselected(TabLayout.Tab tab) {
                        // no-op
                    }
                }
        );

Minimal sample app repro: For the whole code, a sample app and a video, see here: https://github.com/patrickfrei/test_coding

Android API version: 33

Material Library version: 1.7.0-beta01

Device: Pixel 5 emulator and various real devices such as e.g. Nokia 7.2

[OxygenCobalt]

Just chiming in that I have a very similar issue, although it only appears when fast-scrolling from/to the top of a list. Not sure if it’s caused by the same issue, but hoping that this might fix it too.

[aberaud]

@patrickfrei Thanks for the suggestion, unfortunately, this requires forking the Material library which is not an option for us at the moment for our production builds.