Animation 问题 Android BottomNavigationView with Lottie

Question

I'm trying to use BottomNavigationView with the lib Lottie in order to make icon animations. I'd rather use Lottie instead VectorAndroidAnimation because I want more complex animations. However the first item of BottomNavigationView does not animate and the other items do when I click on them

(Gif below)

Below is my code:

 class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        navView.menu.apply {
            add(Menu.NONE, 0, Menu.NONE, R.string.title_home).icon = getLottieDrawable(
                LottieAnimation.HOME,
                navView
            )
            add(Menu.NONE, 1, Menu.NONE, R.string.title_dashboard).icon = getLottieDrawable(
                LottieAnimation.CALENDAR,
                navView
            )
            add(Menu.NONE, 2, Menu.NONE, R.string.title_notifications).icon = getLottieDrawable(
                LottieAnimation.BELL,
                navView
            )
        }

        navView.setOnNavigationItemSelectedListener(this)
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        val icon = item.icon as? LottieDrawable
        icon?.apply {
            playAnimation()
        }
        return true
    }

    private fun getLottieDrawable(
        animation: LottieAnimation,
        view: BottomNavigationView
    ): LottieDrawable {
        return LottieDrawable().apply {
            val result = LottieCompositionFactory.fromAssetSync(
                view.context.applicationContext, animation.value
            )
            callback = view
            composition = result.value
        }
    }

}

enum class LottieAnimation(val value: String) {
    HOME("home.json"),
    CALENDAR("calendar.json"),
    BELL("bell.json")
} 

Tested with just two items into BottomNavigationView and the first item of tab was animate

(Two Items Gif below)

And finally I tested with five items in the BottomNavigationView, and in this test the first and second item didn't animated when clicked, just the last three items on the tab

Answer 1

How about using a custom bottom navigation view. You can add a Lottie view in each tab which starts animation on click. In my experience, a custom bottom navigation view has worked better for me than using Android's Bottom Navigation View.

Answer 2

I faced the same issue and it was a nightmare.. but I finally found the solution!

You have to set the icons of your menu items AFTER adding them all . Do a first loop to add your items and then a second one to set the icon of each brand new menu item.

            ...
            // First you add them ALL
            add(Menu.NONE, 0, Menu.NONE, R.string.title_home)
            add(Menu.NONE, 1, Menu.NONE, R.string.title_dashboard)
            add(Menu.NONE, 2, Menu.NONE, R.string.title_notifications)

            // Then you update their icons
            findItem(0).icon = getLottieDrawable(
                LottieAnimation.HOME,
                navView
            )
            findItem(1).icon = getLottieDrawable(
                LottieAnimation.CALENDAR,
                navView
            )
            findItem(2).icon = getLottieDrawable(
                LottieAnimation.BELL,
                navView
            )
            ...