Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animation problem Android BottomNavigationView with Lottie

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

like image 232
Jonatas Caram Avatar asked May 03 '26 16:05

Jonatas Caram


1 Answers

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.

like image 137
Akanshi Srivastava Avatar answered May 06 '26 07:05

Akanshi Srivastava



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!