[Google Material Design] Bottom Navigation 만들기 -1

지난 포스트에 이어서 이번 포스트에서는 마찬가지로 Material Components가 지원하는 Bottom Navigation을 만들어 보자. 이번 포스트 역시 Material 공식 가이드 문서를 참조한다.

우리가 흔히 쓰는 앱들 안에서 하단에 탭이 위치해 탭의 버튼을 누르면 특정 페이지로 넘어가는 뷰를 본 적이 있을 것이다. 해당 페이지는 액티비티가 넘어가는 것이 아니라, Navigation의 원리로 인해 전환되는 것이다. 우선 우리가 만들어볼 화면의 완성본은 다음과 같다.

하단에 보라색 바가 있고, 아이콘과 텍스트가 결합되어 하나의 메뉴를 이루고 있다. 또한 메뉴를 클릭하면 클릭한 메뉴만 흰색으로 변하게 된다.

---

우선 가장 먼저 필요한 Bottom Navigation을 구현하기 위해 BottomNavigationView 컴포넌트를 구성해 보자. 이 컴포넌트는 Button과 동일하게 중첩되거나 포함하는 요소가 없어도 된다.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent" />

이 컴포넌트는 버튼과 달리 화면 하단에 붙어 있어야 하기에 constraintBottom_toBottomOf 속성만 parent로 주었다. 해당 속성을 주고 배치하면 다음과 같이 컴포넌트의 위 테두리만 아주 희미하게 보일 것이다.

이렇게 보이는 이유가 뭘까? 당연하지만 이 Navigation 뷰에 어떤 네비게이션을 보여줄지 전혀 정의하지 않았기 때문이다. 해당 네비게이션을 정의하기 위해 res/menu 폴더를 생성해, 그 안에 bottom_navigation_menu.xml 파일을 생성하고, 다음 코드를 작성하자.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/page_1"
        android:enabled="true"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="메뉴 1" />

    <item
        android:id="@+id/page_2"
        android:enabled="true"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="메뉴 2" />
</menu>

menu 파일에 대해 모르시는 분들을 위해 간략히 설명하자면, menu 컴포넌트 안에 item 컴포넌트가 포함되고, item 컴포넌트 하나하나가 메뉴 하나하나를 의미한다. enabled 속성을 통해 해당 메뉴를 선택할 수 있게 할지 없게 할지를 정할 수 있고, 아이콘, 텍스트 등도 지정할 수 있다.

​

해당 코드를 작성하면, 해당 xml 파일의 Preview 탭에 자동으로 다음과 같이 사이드 메뉴가 표시될 것이다.

해당 메뉴가 잘 구현되었다면, 다시 activity_main.xml 파일로 돌아와, 해당 menu 파일을 적용해 준다.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"

    <!-- 네비게이션 메뉴 적용하기 -->
    app:menu="@menu/bottom_navigation_menu" />

그러면 Preview 화면에 다음과 같이 메뉴가 생길 것이다.

이제 조심스레 앱을 구동해 보자. 구동하면 다음과 같이 하단에 메뉴가 생성되고 클릭될 것이다.

여기까지 구현이 잘 되지 않았다면 다음 코드를 참조하기 바란다.

​

activity_main.xml

<?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">
    
    <com.google.android.material.button.MaterialButton
    	android:id="@+id/materialButton"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorPrimary"
        android:elevation="5dp"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textColor="@android:color/white"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconGravity="start"
        app:iconPadding="@dimen/cardview_compat_inset_shadow"
        app:iconSize="50dp"
        app:iconTint="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rippleColor="@color/colorAccent"
        app:shapeAppearance="@style/ShapeAppearance.MaterialComponents.MediumComponent"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="3dp" />
        
        <com.google.android.material.button.MaterialButton
        	android:id="@+id/materialButton2"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:text="Outlined button"
            app:icon="@drawable/ic_launcher_foreground"
            app:iconSize="50dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialButton"
            app:strokeColor="@color/colorPrimary"
            app:strokeWidth="1dp" />
            
        <com.google.android.material.button.MaterialButton
        	android:id="@+id/materialButton3"
            style="@style/Widget.MaterialComponents.Button.TextButton"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:text="Outlined button"
            app:icon="@drawable/ic_launcher_foreground"
            app:iconSize="50dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialButton2" />
        
        <com.google.android.material.button.MaterialButtonToggleGroup
        	android:id="@+id/toggleButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialButton3"
            app:singleSelection="true">
            
            <com.google.android.material.button.MaterialButton
            	android:id="@+id/button1"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1" />
            
            <com.google.android.material.button.MaterialButton
                android:id="@+id/button2"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2" />
            
            <com.google.android.material.button.MaterialButton
            	android:id="@+id/button3"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3" />
        </com.google.android.material.button.MaterialButtonToggleGroup>
        
    	<com.google.android.material.bottomnavigation.BottomNavigationView
        	android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/bottom_navigation_menu" />
	</androidx.constraintlayout.widget.ConstraintLayout>



menu/bottom_navigation_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item
    	android:id="@+id/page_1"
        android:enabled="true"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="메뉴 1" />
        
    <item
    	android:id="@+id/page_2"
        android:enabled="true"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="메뉴 2" />
</menu>

다음 포스트에서는 본격적으로 Bottom Navigation의 Bar의 style을 꾸며 보겠다.