[Android] Bottom Navigation 사용하기

Bottom Navigation이란?

이름만 봐도 대충 감이 잡힐 것이다.

인스타, 카카오톡, 유튜브, 넷플릭스 등 다양한 곳에서 볼 수 있는 "하단에 있는 바"이다.

탭의 갯수는 3개 이하는 권장하지 않고, 5개를 초과할 수 없다. 

또한 각 탭의 텍스트들은 너무 길어선 안되며, 크기를 기본 값보다 작게 하면 안된다.

단계 별로 사용법을 알아보자.

1. 탭 아이콘 추가

각 탭에 사용할 아이콘들을 drawable에 추가한다.

나는 간단한 예시를 들 것이기에 탭 3개를 기준으로 할 것이다.

무료 아이콘 사이트가 많으니 원하는 아이콘을 찾아보도록 하자.

2.  메뉴 resource 파일 생성

res -> New -> Android Resource File에서 menu 파일을 만든다. 이때 Resource type은 MENU로 선택해준다.

이 메뉴에는 말 그대로 Bottom Navigation에 들어갈 탭들을 모아놓은 즉, 메뉴를 만들 것이다.

 

메뉴의 xml을 작성해보자.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/bottom_home"
        android:enabled="true"
        android:icon="@drawable/home"
        android:title="@string/home"/>

    <item
        android:id="@+id/bottom_user"
        android:enabled="true"
        android:icon="@drawable/user"
        android:title="@string/user"/>

    <item
        android:id="@+id/bottom_setting"
        android:enabled="true"
        android:icon="@drawable/setting"
        android:title="@string/setting"/>
</menu>

각 아이템들의 속성은 다음과 같다.

• id: 각 탭의 이름을 정한다.
• enabled: 해석해보면 "활성화"이다. 말 그대로 true라면 사용가능하고, false라면 터치가 되지 않는다. default로 true를 가지고 있어 생략해도 된다.
• icon: 탭 아이콘을 설정한다.
• title: 탭의 텍스트를 정한다.

3. Layout 작성

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Bottom Navigation의 위에는 각 탭마다 상응하는 화면을 보여줘야 하므로, 레이아웃을 놓는다.

Bottom Navigation의 각 탭은 아까 menu.xml을 통해 만들어놓았다. 따라서 app:menu를 사용하여 가져와 사용하면 된다.

4. 각 탭의 화면(Fragment) 생성

각 탭마다 Fragment를 통해 화면을 생성한다.

탭 아이콘을 누를 때마다 각각의 Fragment로 화면이 전환되며 기능에 맞게 구현을 해주면 된다.

5. MainActivity에 Fragment와 BottomNavigation 코드 작성

package com.example.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        supportFragmentManager.beginTransaction().replace(R.id.main_view, HomeFragment()).commit()

        val bottomNavigation: BottomNavigationView = findViewById(R.id.bottom_navigation_view)

        bottomNavigation.run {
            setOnItemSelectedListener { item ->
                when(item.itemId) {
                    R.id.bottom_home -> {
                        supportFragmentManager.beginTransaction().replace(R.id.main_view, HomeFragment()).commit()
                        true
                    }
                    R.id.bottom_user -> {
                        supportFragmentManager.beginTransaction().replace(R.id.main_view, UserFragment()).commit()
                        true
                    }
                    R.id.bottom_setting -> {
                        supportFragmentManager.beginTransaction().replace(R.id.main_view, SettingFragment()).commit()
                        true
                    }
                    else -> false
                }
            }
        }
    }
}

각 탭을 클릭할 때마다, 그에 상응하는 Fragment로 전환시켜준다.

결과