BottomNavigationView Menu Item 커스터마이징

 

최근 유튜브도 이런 식으로 BottomNavigation 메뉴를 커스텀해서 쓰는 것을 발견.

궁금해서 내 앱에도 적용해보기로 했다.

 

 

최근 적용된 유튜브의 하단 메뉴 아이템

 

 

 

메뉴 아이템 커스터마이징

 

 

bottom_menu_item3.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/center_menu_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_baseline_track_changes_24" />

</FrameLayout>

 

 

MainActivity

새로운 listener를 적용하고 나면 기존의 리스너는 동작하지 않으므로 navigate 동작을 다시 설정해주어야 한다.

return값을 false로 하면 해당 메뉴 아이템에 selectable이 동작하지 않는다.

...


val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        val bottomNav = binding.bottomNav

        //Init bottomNavigationView
        val navHostFragment =
            supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        navController = navHostFragment.navController
        appBarConfiguration = AppBarConfiguration(bottomNav.menu)
        bottomNav
            .setupWithNavController(navController)

        //Customize BottomMenuItem(3rd)
        val menuView = bottomNav.getChildAt(0) as BottomNavigationMenuView
        val menuItemView3 = menuView.getChildAt(2) as BottomNavigationItemView
        val newMenuView = LayoutInflater.from(this).inflate(R.layout.bottom_menu_item3, bottomNav, false)
        menuItemView3.addView(newMenuView)
        bottomNav.setOnNavigationItemSelectedListener {
            if (it.itemId == R.id.main3) {
                println("main3~~");
                false
            }
            else NavigationUI.onNavDestinationSelected(it, navController)
        }
        
        
 ...