[Android] Bottom Navigation View 만들기

Bottom Navigation View 란 ?

Bottom Navigation View 는 앱 하단 탭에서 화면을 이동할 수 있도록 해주는 기능을 제공합니다.

Bottom Navigation View 사용법

1. build.gradle 에 의존성 추가
   

   • bottom navigation view 사용을 위해 material design 라이브러리의 의존성을 추가해줍니다.
   • app 레벨의 build.gradle 에 정의합니다.

dependencies {
	...
    implementation 'com.google.android.material:material:1.6.1'
}

2. Bottom Navigation View 를 구성할 메뉴 목록 만들기

   • 먼저 res 폴더 안에 menu 라는 resource directory 를 생성합니다.
   • 그 안에 menu를 구성할 item 목록을 저장할 리소스 파일을 만들어줍니다.
   • bottom_navigation_menu.xml 파일 안에는 네비게이션 뷰를 구성할 아이템 목록을 정의합니다.

<item android:id="@+id/feed"
    android:icon="@drawable/ic_baseline_view_list_24"
    android:title="피드" />

<item android:id="@+id/mypage"
    android:icon="@drawable/ic_baseline_person_24"
    android:title="마이페이지"/>

<item android:id="@+id/settings"
    android:icon="@drawable/ic_baseline_settings_24"
    android:title="설정" />

3. 메인화면에서 불러오기

   • 메인화면에서 bottom navigation view 를 불러오기 위해 activity_main.xml 파일 안에 Bottom Navigation View 를 추가해줍니다.

<data>
    <variable
        name="activity"
        type="com.jae464.placememo.MainActivity" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="0dp"
        app:menu="@menu/bottom_navigation_menu"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fragmentContainer" />

</androidx.constraintlayout.widget.ConstraintLayout>

app:menu에 아이템 목록을 만들었던 bottom_navigation_menu를 넣어줍니다.

4. 네비게이션 화면 이동 구현하기

• 메인 액티비티에서 바텀 네비게이션 메뉴를 클릭하였을때 해당되는 화면(여기서는 fragment) 를 불러오도록 구현합니다.
  여기서는 data binding 을 통해 뷰에 접근하였습니다.

package com.jae464.placememo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import com.jae464.placememo.databinding.ActivityMainBinding
import com.jae464.placememo.presentation.feed.FeedFragment
import com.jae464.placememo.presentation.home.HomeFragment
import com.jae464.placememo.presentation.mypage.MyPageFragment
import com.jae464.placememo.presentation.settings.SettingsFragment

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.activity = this
        binding.bottomNavigationView.setOnItemSelectedListener { item ->
            when(item.itemId) {
                R.id.home -> {
                    replaceFragment(HomeFragment())
                    true
                }
                R.id.feed -> {
                    replaceFragment(FeedFragment())
                    true
                }
                R.id.mypage -> {
                    replaceFragment(MyPageFragment())
                    true
                }
                R.id.settings -> {
                    replaceFragment(SettingsFragment())
                    true
                }
                else -> false
            }
        }
        replaceFragment(HomeFragment())
    }

    private fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .apply {
                replace(R.id.fragmentContainer, fragment)
                commit()
            }
    }
}

setOnItemSelectedListener 를 메뉴 아이템이 선택되었을때 수행할 내용을 구현합니다.

여기서는 fragment 를 교체하여 선택된 화면을 보여주도록 했습니다.

fragment 는 supportFragmentManager를 통해 위와 같이 교체할 수 있습니다.

각각의 fragment 에는 해당 메뉴의 이름을 나타내도록 아래와 같이 만들었습니다.

• fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".presentation.home.HomeFragment">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:text="Home" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

• HomeFragment.kt

package com.jae464.placememo.presentation.home

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.jae464.placememo.R


class HomeFragment : Fragment(R.layout.fragment_home) {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
    }

}

위와 같이 FeedFragment, MyPageFragment, SettingsFragment 를 만들었습니다.

결과