[BottomNavigationView] Active indicator blinking on the edges (API 28)

[b-brebion]

trafficstars

Description: When changing tab, the pill-shaped active indicator is blinking on the edges.

(Android 9 device)

Expected behavior:

(Android 12 device)

Source code:

<!-- activity_main.xml -->
<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigation_menu" />

<!-- bottom_navigation_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/recognition"
        android:icon="@drawable/recognition_selector"
        android:title="@string/recognition"/>
    <item
        android:id="@+id/draw"
        android:icon="@drawable/draw_selector"
        android:title="@string/draw"/>
</menu>

<!-- Selector example -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_filled_recognition"
        android:state_checked="true"/>
    <item android:drawable="@drawable/ic_outlined_recognition"
        android:state_checked="false"/>
</selector>

Android API version: Android 9 (API 28)

Material Library version: 1.7.0-alpha03

Device: Tested on Pixel 2 (Emulator) and Huawei P10 (Not able to reproduce the bug on Pixel 3a (API 32) and Asus Zenpad 3s 10 (API 24))

[drchen]

Looks like it's caused by ripples. Maybe we should disable ripple on clicking. Will check with the team.

[c1rcle]

Any progress on this? I was able to reproduce this bug on Samsung Galaxy A33 (API 33). Setting item ripple color to null seems to fix this issue.

[philip-lackmann]

I was able to mitigate this issue by shortening the duration of the active indicator animator. Which is possible by overlaying the theme's motion duration. Originally this duration is around 500ms, so the ripple is animated way faster than the active indicator, which leads to this effect.

<style name="MyTheme.ThemeOverlay.BottomNavigation" parent="">
	<!-- item's active indicator animation duration -->
	<item name="motionDurationLong2">200</item>
</style>

I recommend playing around with the duration value according to taste

and then in your bottom navigation style <item name="theme">@style/MyTheme.ThemeOverlay.BottomNavigation</item>

A more sustainable solution would be more than welcome though.