Issue with Bottom Navigation Animation (Icon Moves Up on Selection)

Question

I'm encountering an issue with the animation of my Bottom Navigation in my Android app. When I select a menu item, the icon associated with it moves up. Here's the relevant code :

        val controller = WindowInsetsControllerCompat(window, window.decorView)
    controller.hide(WindowInsetsCompat.Type.statusBars() or WindowInsetsCompat.Type.navigationBars())
    controller.systemBarsBehavior =
        WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

    val bottomNavigation = findViewById<BottomNavigationView>(R.id.nav_footer)
    bottomNavigation.itemIconTintList = null
    bottomNavigation.itemTextColor = null
    bottomNavigation.itemRippleColor = null
    bottomNavigation.stateListAnimator = null
    bottomNavigation.setOnItemSelectedListener { menuItem ->
        when (menuItem.itemId) {
            R.id.home -> {
                menuItem.setIcon(R.drawable.home_degrade)
                bottomNavigation.menu.findItem(R.id.stat)?.setIcon(R.drawable.progress)
                bottomNavigation.menu.findItem(R.id.calender)?.setIcon(R.drawable.calender_white)
                bottomNavigation.menu.findItem(R.id.account)?.setIcon(R.drawable.account)
                bottomNavigation.menu.findItem(R.id.settings)?.setIcon(R.drawable.settings)
                true
            }
            R.id.stat -> {
                menuItem.setIcon(R.drawable.progress_degrade)
                bottomNavigation.menu.findItem(R.id.home)?.setIcon(R.drawable.home_white)
                bottomNavigation.menu.findItem(R.id.calender)?.setIcon(R.drawable.calender_white)
                bottomNavigation.menu.findItem(R.id.account)?.setIcon(R.drawable.account)
                bottomNavigation.menu.findItem(R.id.settings)?.setIcon(R.drawable.settings)
                true
            }
            R.id.calender -> {
                menuItem.setIcon(R.drawable.calender_degrade)
                bottomNavigation.menu.findItem(R.id.stat)?.setIcon(R.drawable.progress)
                bottomNavigation.menu.findItem(R.id.home)?.setIcon(R.drawable.home_white)
                bottomNavigation.menu.findItem(R.id.account)?.setIcon(R.drawable.account)
                bottomNavigation.menu.findItem(R.id.settings)?.setIcon(R.drawable.settings)
                true
            }
            R.id.account -> {
                menuItem.setIcon(R.drawable.account_degrade)
                bottomNavigation.menu.findItem(R.id.stat)?.setIcon(R.drawable.progress)
                bottomNavigation.menu.findItem(R.id.calender)?.setIcon(R.drawable.calender_white)
                bottomNavigation.menu.findItem(R.id.home)?.setIcon(R.drawable.home_white)
                bottomNavigation.menu.findItem(R.id.settings)?.setIcon(R.drawable.settings)
                true
            }
            R.id.settings -> {
                menuItem.setIcon(R.drawable.settings_degrade)
                bottomNavigation.menu.findItem(R.id.stat)?.setIcon(R.drawable.progress)
                bottomNavigation.menu.findItem(R.id.calender)?.setIcon(R.drawable.calender_white)
                bottomNavigation.menu.findItem(R.id.account)?.setIcon(R.drawable.account)
                bottomNavigation.menu.findItem(R.id.home)?.setIcon(R.drawable.home_white)
                true
            }
            else -> false
        }

Here is some screenshot of the bottom menu : I've tried removing animations by setting stateListAnimator to null, but the issue persists. How can I prevent the icon from moving up when it's selected ? Any suggestions or insights would be greatly appreciated. Thank you in advance !

Answer 1

You can fix the animation with labelVisibilityMode, which is a property of BottomNavigationView you placed in mainactivity.xml.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav_view"
    style="@style/MyBottomNavViewStyle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@color/white"
    app:itemIconTint="@color/bottom_nav_selector"
    app:itemTextColor="@color/bottom_nav_selector"
    app:labelVisibilityMode="labeled"
    android:paddingStart="@dimen/_3sdp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_menu" />

Answer 2

I fixed my issue by adding app:labelVisibilityMode="unlabeled" to my bottomNavigationView tag. This completely removed the animation. Thank you for your assistance !