[안드로이드/코틀린] 바텀네비게이션 .feat custom library

오늘은 커스텀 바텀네비게이션을 만들어 볼게요.
특별히 custom된 라이브러리를 사용했답니다!

https://github.com/ismaeldivita/chip-navigation-bar
여기 깃허브에서 가져왔어요

1. Gradle에 의존성을 추가해줍니다.

implementation 'com.github.ismaeldivita:chip-navigation-bar:1.4.0'

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

이렇게 두가지를 그래들에 추가해줘야 해요!

2. Menu파일에 menu.xml 파일 생성

이렇게 res폴더 밑에 하위 폴드로 menu를 생성해주고 그안에 bottom_menu.xml 리소스 파일을 생성해 줍니다!

bottom_menu.xml 소스코드

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home"
        android:icon="@drawable/home"
        android:title="Home"
        app:cnb_iconColor="@color/navigation_home"/>
    <item
        android:id="@+id/search"
        android:icon="@drawable/search"
        android:title="Search"
        app:cnb_iconColor="@color/navigation_search"/>
    <item
        android:id="@+id/favorites"
        android:icon="@drawable/heart"
        android:title="Favorites"
        app:cnb_iconColor="@color/navigation_favorites" />
    <item
        android:id="@+id/post"
        android:icon="@drawable/team"
        android:title="Posting"
        app:cnb_iconColor="@color/navigation_post"/>
    <item
        android:id="@+id/my"
        android:icon="@drawable/user"
        android:title="My"
        app:cnb_iconColor="@color/navigation_my" />
</menu>

app:cnb_iconColor 이 부분은 Colors 라는 폴더가 보일겁니다. 거기에 색상을 지정해 주면 됩니다!

3. main.xml 파일일에 네비게이션 추가

      <com.ismaeldivita.chipnavigation.ChipNavigationBar
           android:id="@+id/chipNav"
           android:layout_width="match_parent"
           android:layout_height="70dp"
           android:background="#fff"
           android:gravity="center"
           android:elevation="16dp"
           app:cnb_menuResource="@menu/bottom_menu"
           app:layout_constraintBottom_toBottomOf="parent"/>

4. MainActivity.kt 소스코드

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this,R.layout.activity_main)

        setTheFirstFragment()
        navigationItemSelect()
    }

    private fun replaceFragment(fragment: Fragment) {
        val fragmentTransaction: FragmentTransaction = supportFragmentManager.beginTransaction()
        fragmentTransaction.replace(R.id.mainFrag, fragment)
        fragmentTransaction.commit()
    }

    private fun navigationItemSelect() {
        var selectedItemId = 0
        binding.chipNav.run {
            setOnItemSelectedListener { item ->
                when (item) {
                    R.id.home -> replaceFragment(HomeFragment())
                    R.id.post -> replaceFragment(PostFragment())
                    R.id.my -> replaceFragment(MyFragment())
                }
                true
            }
            selectedItemId = R.id.mainFrag
        }
    }

    private fun setTheFirstFragment(){
        val fragmentTransaction : FragmentTransaction = supportFragmentManager.beginTransaction()
        fragmentTransaction.add(R.id.mainFrag,HomeFragment())
        fragmentTransaction.commit()
        binding.chipNav.setItemSelected(R.id.home)

    }
}

참고로 저는 바인딩을 사용해가지고 바텀네비게이션이 있는 소스코드에 가장 최 상위 레이아웃을 Layout으로 감싸주었습니다. 참고하시길 바라요!

5. 실행결과