[Kotlin] BottomNavigation With Lottie

class MainActivity : AppCompatActivity(), 
	BottomNavigationView.OnNavigationItemSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        binding.bottomNavi.menu.apply {
            add(Menu.NONE, 0, Menu.NONE, "brand")
            add(Menu.NONE, 1, Menu.NONE, "category")
            add(Menu.NONE, 2, Menu.NONE, "home")
            findItem(0).icon = getLottieDrawable(
                LottieAnimation.BRAND,
                binding.bottomNavi
            )
            findItem(1).icon = getLottieDrawable(
                LottieAnimation.CATEGORY,
                binding.bottomNavi
            )
            findItem(2).icon = getLottieDrawable(
                LottieAnimation.HOME,
                binding.bottomNavi
            )
            // 최초 진입시 아이콘 선택된 상태로 보이기 위해 설정
            val homeIcon = findItem(2).icon as? LottieDrawable
            homeIcon?.playAnimation()
        }

        binding.bottomNavi.setOnNavigationItemSelectedListener(this)
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        Log.e(TAG, "item.id ==> ${item.itemId}")
        binding.bottomNavi.menu.apply {
            brandIcon = findItem(0).icon as? LottieDrawable
            categoryIcon = findItem(1).icon as? LottieDrawable
            homeIcon = findItem(2).icon as? LottieDrawable
        }

        // item 클릭시 lottie 애니메이션 재생
        val icon = item.icon as? LottieDrawable
        icon?.apply {
            playAnimation()
        }

        when (item.itemId) {
            // brand
            0 -> {
                navController.navigate(R.id.brandFragment)
                // 해당하는 itemId를 제외한 나머지 lottie 애니메이션 취소
                categoryIcon?.progress = 0.0f
                categoryIcon?.cancelAnimation()

                homeIcon?.progress = 0.0f
                homeIcon?.cancelAnimation()
            }
            // category
            1 -> {
                navController.navigate(R.id.searchFragment)
                // 해당하는 itemId를 제외한 나머지 lottie 애니메이션 취소
                brandIcon?.progress = 0.0f
                brandIcon?.cancelAnimation()

                homeIcon?.progress = 0.0f
                homeIcon?.cancelAnimation()
            }
            // home
            2 -> {
                navController.navigate(R.id.homeFragment)
                // 해당하는 itemId를 제외한 나머지 lottie 애니메이션 취소
                brandIcon?.progress = 0.0f
                brandIcon?.cancelAnimation()

                categoryIcon?.progress = 0.0f
                categoryIcon?.cancelAnimation()
            }
        }
        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) {
        BRAND("brand.json"),
        CATEGORY("category.json"),
        HOME("home.json")
    }
}

BottomNavigation 에 Lottie 애니메이션 적용하는데 엄청 애를먹었다..

BottomNavi에 연결된 Menu Item icon에 Lottie 애니메이션 적용하는 부분이 제일 핵심이다.

 

 

* 참고

https://stackoverflow.com/questions/62312586/animation-problem-android-bottomnavigationview-with-lottie