Android Studio Bottom navigation(Kotlin)

1. 가장 먼저 gradle에 support design  라이브러리를 추가한다.
(숫자는 해당 sdk 버전에 맞게끔 바꿔주면 됨)

-> implementation 'com.android.support:design:29.0.2'

 

2. Bottom Navigation에 쓰일 메뉴 목록들을 정의해주어야 한다.

-> menu.xml 정의 : 주의할 점으로는 item을 최소 3개 이상 추가하여야 함. ( item을 3개 이상 추가하여야 하는 이유는 2개만 작성할 경우, 보이는 화면상에서 딱 맞게 뷰가 그려지지 않기 때문임.)

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

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Home" />

    <item
        android:id="@+id/nav_test"
        android:icon="@drawable/ic_mode_edit_black_24dp"
        android:title="Test"/>

    <item
        android:id="@+id/nav_info"
        android:icon="@drawable/ic_filter_none_black_24dp"
        android:title="Information" />

</menu>

 

3. 메인 화면에 레이아웃 구성하기(FrameLayout, BottomNavigationView)

-> BottomNavigation에서 버튼을 클릭했을 시, 바뀌는 화면이 나타나는 뷰인 FrameLayout을 설정해주고, 하단부에 BottomNavigationView를 입력해준다.

<?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=".homeFragment.MainActivity">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
        
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:menu="@menu/navigation_bar"
        app:itemTextColor="#4CAF50"
        android:background="#FFFFFF"
        app:layout_constraintTop_toBottomOf="@id/fragment_container"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

4. 각각의 프래그먼트들을 만든다. 총 3개의 화면이 필요함. ( 본인이 만든 menu의 갯수에 따라 변화 가능)

-> empty Fragment를 만든다.

-> 아래 형태로 Fragment를 3개 구현한다.

class HomeFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_home, container, false)

        return view
    }

}

 

5. MainActivity에서 BottomNavigation의 버튼 클릭시의 이벤트를 구성한다.

-> onNavigationItemSelectedListener를 이용하여 해당 아이템을 클릭했을 시 replaceFragment로 다른 프래그먼트 이동이 가능하게 끔 설정을 해줌.

-> MainActivity가 처음 띄워질 때의 첫 화면에는 대부분 첫번째 버튼의 프래그먼트가 그려질 것이다. 그렇기 때문에 replaceFragment라는 이름의 함수를 만들어 첫 화면이 항상 보이게끔 설정을 해준다.

class MainActivity : AppCompatActivity() {

    
    private val mOnNavigationiItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener {item ->
        
        when(item.itemId){
            R.id.nav_home -> {
                println("home pressed")
                replaceFragment(HomeFragment())
                return@OnNavigationItemSelectedListener true
            }

            R.id.nav_test -> {
                println("test pressed")
                replaceFragment(TestFragment())
                return@OnNavigationItemSelectedListener true
            }

            R.id.nav_info -> {
                println("info pressed")
                replaceFragment(InfoFragment())
                return@OnNavigationItemSelectedListener true
            }

            else -> false
        }
    }

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

        replaceFragment(HomeFragment())
        bottom_navigation.setOnNavigationItemSelectedListener(mOnNavigationiItemSelectedListener)
    }

    fun replaceFragment(fragment: Fragment){
        val fragmentTransaction = supportFragmentManager.beginTransaction()
        fragmentTransaction.replace(R.id.fragment_container, fragment)
        fragmentTransaction.commit()
    }
}

 

 

※ 메뉴 아이템 만들 시, 주의하면 좋을 점들

 1. 메뉴 아이템의 색상, 크기 등은 모두 통일하는 것이 좋음.

 2. 메뉴 아이템의 텍스트는 최대한 짧게!!(적어도 1줄에 들어올 수 있을만큼만 작성할 것)