[BottomNavigationView] Switch tab will blink on target 29

[kexuejin]

Description: BottomNavigationView set labelVisibilityMode is auto or labeled, and set build target sdk to 29, switch tab will cause text blink.

Expected behavior: Text show normal when switch tab.

Source code: The code snippet which is causing this issue. Seems android 29 cause setVisibility not smooth.

BottomNavigationItemView.java: if (checked) { setViewLayoutParams( icon, (int) (defaultMargin + shiftAmount), Gravity.CENTER_HORIZONTAL | Gravity.TOP); setViewValues(largeLabel, 1f, 1f, VISIBLE); setViewValues(smallLabel, scaleUpFactor, scaleUpFactor, INVISIBLE); } else { setViewLayoutParams(icon, defaultMargin, Gravity.CENTER_HORIZONTAL | Gravity.TOP); setViewValues(largeLabel, scaleDownFactor, scaleDownFactor, INVISIBLE); setViewValues(smallLabel, 1f, 1f, VISIBLE); }

Android API version: Minimun: 27, target:29, Android Emulator: 29

Material Library version: com.google.android.material:material:1.1.0-alpha09

Device: Device: Pixel 3XL Emulator

[tonylin99]

We encountered the similar issue. Here is the BottomNavigationView sample record. The inactive tab label blinks when

[michaldrabik]

I'm experiencing the same thing. Testing on emulator, target 29.

[ghost]

I am seeing the same thing when I change my target SDK to 29.

I've tested across a few devices and it appears to only happen on those running Android 10 (my device is a Pixel 3). It's fine on devices running anything below Android 10.

[davideagostini]

I encountered the similar issue. The bug appears when I change my target SDK to 29.

[tonylin99]

It happens when it is targeted to Q(29) and runs on Android Q. Here is the test result

1. If the navigation sample is compiled and targeted to 28(P),
   it runs on Android P: normal. it runs on Android Q: normal.

2. If the navigation sample is compiled and targeted to 29(Q),

it runs on Android P: normal. it runs on Android Q: blinking.

[michaldrabik]

@tonylin99 To clarify - It's not only 28 specific. It also blinks on lower SDKs. Can see it on M(23) as well.

[tonylin99]

My pixel 3xl is upgraded to Android 10. Shared the video of the issue here. blink on pixel 3XL(Android 10).mp4.zip

[lihenggui]

Encountered similar issue, waiting for fixing.

[gswierczynski]

The color drops to transparent (presumably) for both items (currently selected and the one just tapped) after that they bot fade in to their correct colors (default and active respectively).

Selector passed to itemTextColor does not impact this transitional color.

[adelinolobao]

I'm also facing the same issue. I tried with latest publish version 1.1.0-alpha10 but the problem is still there. For me the issue is only happening in Android 10.

[pvl2061]

It happens because of a transition that is implemented in BottomNavigationMenuView:

        this.set.setOrdering(0);
        this.set.setDuration(115L);
        this.set.setInterpolator(new FastOutSlowInInterpolator());
        this.set.addTransition(new TextScale());

The temporary ugly hack to fix the blinking is:

fun BottomNavigationView.fixBlinking() {
    val menuView = getChildAt(0) as BottomNavigationMenuView
    with(menuView::class.java.getDeclaredField("set")) {
        isAccessible = true
        set(menuView, AutoTransition().apply { duration = 0L })
    }
}

[Amagi82]

GrafOrlov's fix reduced the blinking for me, but it was still noticeable. Removing the fade animation that's automatically added to an AutoTransition appears to do the trick.

fun BottomNavigationView.fixBlinking() {
    val menuView = getChildAt(0) as BottomNavigationMenuView
    with(menuView::class.java.getDeclaredField("set")) {
        isAccessible = true
        val transitionSet = (get(menuView) as AutoTransition).apply {
            for (i in transitionCount downTo 0) {
                val transition = getTransitionAt(i) as? Fade ?: continue
                removeTransition(transition)
            }
        }
        set(menuView, transitionSet)
    }
}

[michaldrabik]

This is getting more and more ugly :)

[hunterstich]

Hey all,

So this ended up being caused by an api change in Q which affected the Transition used to animate BottomNavigationView menu items.

This has been fixed by bumping the version of androidx.transition that the lib uses. In the meantime, you can manually include implementation androidx.transition:transition:1.2.0-rc01 or greater in your build file's dependencies to get around this.

[txhai]

This happens when I try to check active item manually too BottomNavigationView.getMenu().getItem(index).setChecked(true) Add implementation androidx.transition:transition:1.2.0-rc01 doesn't fix

[sinienfin]

Add implementation androidx.transition:transition:1.2.0-rc01 doesn't fix this issue.

[antonKozyriatskyi]

@hunterstich neither transition:1.2.0-rc01 nor newer versions fix this issue. Can you, please, reopen it?

[soshial]

androidx.transition:transition:1.3.0-rc02 didn't fix the bug for me either

[kenumir]

androidx.transition:transition:1.3.1 didn't fix the bug

[boldijar]

Any fix?

[Kotlinovsky]

Any updates?

[jeannegarciano]

Any updates?

Apply @hunterstich 's answer, add that library to your gradle and the blinking will vanish. I stumbled upon this issue last night and his solution fixed the issue.

[h4rz]

@hunterstich's answer isn't working anymore neither @Amagi82's workaround.

Any other workaround/fix?

[hunterstich]

@h4rz Do you have a sample that reproduces this that I can use to look into what might be happening?

[codespearhead]

@h4rz Do you have a sample that reproduces this that I can use to look into what might be happening?

There you go: bug: BottomNavView's unselected items flicker

Notice what happens to text "Relatórios", located in the lower left-hand corner of the screen, in the bottom navigation menu, when the other item, labelled "Sobre Nós", is selected. The blinking only happens on the first tap on the other button and vice-versa.

You might need to open the video in full screen to see the flickering happen.

What I have tried:

• Run the app on both Android 9.x and Android 10.x (with both dark mode on and off)
• Upgrade / downgrade the Material Components dependency (minor versions ranging from 1.1.0 to 1.5.0)
• Change the size and colors of the bottom navigation menu, the background of the main activity, the itemRippleColor's, the iconTint's and the iconText's

Video of the Bug

https://user-images.githubusercontent.com/72931357/164985649-dc09b693-5bdb-41b5-9c83-59ca69b7cd4e.mp4

[freaksgit]

It's possible to override transition duration using ThemeOverlay

Theme:

    <style name="ThemeOverlay.BottomNavView" parent="">
        <item name="motionDurationLong1">0</item>
    </style>

And then use the theme in your layout:

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    android:theme="@style/ThemeOverlay.BottomNavView"
    .../>

[mosmb]

Bumping androidx.transition does not solve the issue. Any update on this? Tested with 1.9.0-rc01

[stevezuju]

Tested with 1.11.0-alpha01 do not fix

[ericbateman]

Looks like we have to now use

<style name="ThemeOverlay.BottomNavView" parent="">
        <item name="motionDurationMedium4">0</item>
</style>