[Android / Kotlin] Bottom Navigation과 ViewPager2 연결하기

📍 결과 동영상

📍 ViewPager2 구현 하기

💡 BottomNavigation을 구현하기 전에 ViewPager와 Fragment를 구현 해주자 (아래 링크 참고)
ViewPager2 구현

📍 BottomNavigation 구현 하기

👩🏻‍💻 menu.xml 생성하기

BottomNavigation에서 사용할 아이템 메뉴를 추가한다.
res 아래에 menu directory를 생성한 후 menu.xml을 생성해준다.
나는 item_menu_navi.xml로 생성한 상태이다.

// item_menu_navi.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item_home"
        android:enabled="true"
        android:icon="@drawable/bottom_home_white"
        android:title="Home" />
    <item
        android:id="@+id/item_edit"
        android:enabled="true"
        android:icon="@drawable/bottom_edit_white"
        android:title="Edit" />
    <item
        android:id="@+id/item_like"
        android:enabled="true"
        android:icon="@drawable/bottom_like_white"
        android:title="Like" />
    <item
        android:id="@+id/item_user"
        android:enabled="true"
        android:icon="@drawable/bottom_user_white"
        android:title="User" />

</menu>

• android:icon : item에 들어가는 이미지
• android:title : item에 들어가는 텍스트

👩🏻‍💻 color.xml 생성하기

BottomNavigation의 아이템을 클릭했을 때 클릭한 아이콘의 색상을 다르게 하고 싶은 경우에 사용한다.
menu.xml와 마찬가지로 res 아래에 color directory를 생성한 후 color.xml 파일을 생성해준다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FF8C00" android:state_checked="true" />
    <item android:color="#000000" />
</selector>

• android:state_checked="true" : 클릭했을 경우 아이콘 색상을 바꿔준다.

👩🏻‍💻 activity_main.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=".MainActivity">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            app:itemIconTint="@color/color_navi"
            app:labelVisibilityMode="unlabeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/item_menu_navi" />

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

• app:itemIconTint : 아이콘 색상 변경 부분으로 선택한 아이콘의 색상을 다르게 하고 싶을 경우 위에서 생성한 color.xml을 추가한다.
• app:itemTextColor : 아이템의 텍스트 색상 변경 부분으로 선택한 아이템의 텍스트 색상을 다르게 하고 싶을 경우 위에서 생성한 color.xml을 추가한다.
• app:labelVisibilityMode
  • auto : 항목이 3개 이하일 경우 속성이 labeled, 4개 이상일 경우 selected
  • labeled : 텍스트 항상 표시
  • selected : 아이템이 선택 되었을 때만 텍스트 표시
  • unlabeled : 텍스트 표시하지 않음
• app:menu : BottomNavigation에서 사용할 메뉴로 위에서 생성한 menu.xml을 추가한다.

👩🏻‍💻 MainActivity.kt 구현하기

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

        initViewPager()
        initNavigation()
    }

    private fun initViewPager() {
        val viewPager = binding.viewPager
        val viewPagerAdapter = ViewPagerAdapter(this)
        // pager에 adapter 연결 
        viewPager.adapter = viewPagerAdapter

        // ViewPager로 슬라이드 시 BottomNavigation도 페이지로 활성화
        viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                binding.bottomNavigation.menu.getItem(position).isChecked = true
            }
        })
    }

    private fun initNavigation() {
        binding.bottomNavigation.setOnItemSelectedListener {
            when (it.itemId) {
                R.id.item_home -> {
                    binding.viewPager.currentItem = 0
                    return@setOnItemSelectedListener true
                }
                R.id.item_edit -> {
                    binding.viewPager.currentItem = 1
                    return@setOnItemSelectedListener true
                }
                R.id.item_like -> {
                    binding.viewPager.currentItem = 2
                    return@setOnItemSelectedListener true
                }
                R.id.item_user -> {
                    binding.viewPager.currentItem = 3
                    return@setOnItemSelectedListener true
                }
                else -> {
                    binding.viewPager.currentItem = 4
                    return@setOnItemSelectedListener false
                }
            }
        }
    }
}