[Android Studio / Kotlin] Bottom Navigation Bar 추가하기

앱에서 흔하게 볼 수 있는 하단 네비게이션바를 추가해보도록 하겠습니다.

1. 아이콘 추가

drawable에 vector Asset을 눌러 아이콘을 추가해줍니다.

아이콘 이미지는 반드시 SVG 혹은 PSD 파일이어야 합니다.

Local file -> Path에서 파일 모양 아이콘을 눌러 이미지를 불러오고, next -> finish를 눌러 추가를 완료합니다.

2. 네비게이션바 아이콘 활성화/비활성화 색상 설정

drawable에 원하는 이름으로 xml 파일을 하나 생성합니다. 아이콘 클릭 시 옵션이므로 파일 이름을 item_selector.xml로 생성했습니다.

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

    <item android:state_pressed="true" android:color="@color/black" />
    <item android:state_checked="true" android:color="@color/black" />
    <item android:color="@color/btn_false" />
</selector>

기본 색상과, 클릭했을 때의 색상을 구분하여 설정합니다.

3. menu 생성

res 디렉토리에 menu 디렉토리를 새로 추가합니다.

생성된 디렉토리 내부에 원하는 이름으로 xml 파일을 추가합니다. 하단 네비게이션바의 menu이므로 item_menu.xml로 생성했습니다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/nav_calendar"
        android:title="Calendar"
        android:icon="@drawable/ic_calendar" />
    <item android:id="@+id/nav_chart"
        android:title="Chart"
        android:icon="@drawable/ic_analytics" />
    <item android:id="@+id/nav_memo"
        android:title="Memo"
        android:icon="@drawable/ic_pencil" />
</menu>

4. activity_main에 bottomNavigationView 추가

activity_main에 미리 만들어둔 menu를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/body_container"
    android:background="@color/main_background"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:elevation="2dp"
        app:menu="@menu/item_menu"
        android:background="@drawable/round_corner"
        app:itemRippleColor="@android:color/transparent"
        app:itemIconSize="22dp"
        app:labelVisibilityMode="unlabeled"
        app:itemIconTint="@drawable/item_selector"
        android:id="@+id/bottom_navigation"/>

</RelativeLayout>

5. Fragment 생성

mainActivity와 같은 위치의 폴더에서 new -> Frament -> Fragment(Blank)를 클릭해 Fragment를 생성합니다.

6. 화면 전환 구현

하단 네비게이션에서 아이콘 클릭 시 원하는 화면으로 전환되게 하기 위해서, MainActivity에서 이를 구현해줍니다.

class MainActivity : AppCompatActivity() {

    private val frame: RelativeLayout by lazy { // activity_main의 화면 부분
        findViewById(R.id.body_container)
    }
    private val bottomNagivationView: BottomNavigationView by lazy { // 하단 네비게이션 바
        findViewById(R.id.bottom_navigation)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

		// 애플리케이션 실행 후 첫 화면 설정
        supportFragmentManager.beginTransaction().add(frame.id, CalendarFragment()).commit()

		// 하단 네비게이션 바 클릭 이벤트 설정
        bottomNagivationView.setOnNavigationItemSelectedListener {item ->
            when(item.itemId) {
                R.id.nav_calendar -> {
                    replaceFragment(CalendarFragment())
                    true
                }
                R.id.nav_chart -> {
                    replaceFragment(ChartFragment())
                    true
                }
                R.id.nav_memo -> {
                    replaceFragment(MemoFragment())
                    true
                }
                else -> false
            }
        }
    }

	// 화면 전환 구현 메소드
    fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction().replace(frame.id, fragment).commit()
    }
}