Animation problem Android BottomNavigationView with Lottie

Viewed 987

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)

with three items

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)

with Two items

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

with five items

1 Answers

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
)
...
Related