안드로이드 BottomNavigationView

이번 글에서는 안드로이드 BottomNavigationView를 사용해서 화면을 전환하는 법에 대해 알아보자.

 

Menu

---

가장 먼저 BottomNavigationView에 들어갈 메뉴들을 정의해보도록 하자.

res에서 menu폴더를 생성해준 뒤, 해당 폴더 안에 xml파일을 작성한다.

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

    <item android:id="@+id/second"
        android:title="Second"
        android:enabled="true"
        android:icon="@drawable/second"/>

    <item android:id="@+id/third"
        android:title="Third"
        android:enabled="true"
        android:icon="@drawable/third"/>
</menu>

이 글에선 3개의 아이템을 가진 menu파일을 작성해보았다.

id를 통해서 해당 메뉴에 접근할 수 있고, title과 icon은 BottomNavigationView에서 보이는 제목과 아이콘을 지정할 수 있다.

 

MainActivity.xml

---

다음으로 MainActivity를 작성해보도록 할텐데, 이 글에선 BottomNavigationView와 화면(Fragment)이 들어갈 container를 가지고 있는 뷰를 만들어보도록 하자.

<?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">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_main"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

BottomNavigationView에 처음에 만든 menu를 지정해주면, 우측의 design에서 어떻게 표시되는지 볼 수 있다.

 

MainActivity.kt

---

이제 BottomNavigationView에서 메뉴 아이템 클릭 시 화면(Fragment)를 전환해주는 동작을 구현해보자.

그러기 위해서 먼저 화면에 표시될 Fragment들을 만들어주어야 할 텐데, 간단한 화면만 구성해보도록 하자.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/teal_200">
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple_200">
</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 backgroundColor만 다른 세 Fragment를 만들어주도록 하자.

 

이제 BottomNavigationView의 각 메뉴를 클릭했을 때 사용할 Listener를 만들고,

이 안에 fragment를 바꿔주는 코드만 넣으면 된다.

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        setBottomNavigation()
    }

    private fun setBottomNavigation() {
        binding.bottomNavigation.selectedItemId = R.id.first
        replaceFragment(FirstFragment())
        
        binding.bottomNavigation.setOnItemSelectedListener {
            val fragment = when (it.itemId) {
                R.id.first -> FirstFragment()
                R.id.second -> SecondFragment()
                else -> ThirdFragment()
            }
            replaceFragment(fragment)
            true
        }
    }
    
    private fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(R.id.container, fragment, "")
            .commit()
    }
}