[Android] BottomNavigationView 구현하기

 

밑에 사진은 많은 앱들을 실행해보았을 때 쉽게 볼 수 있는 화면이다.

바로 BottomNavigationView인데 어떻게 구현할까?

 

BottomNavigationView

BottomNavigationView을 만들기 위해선 먼저 activity_main.xml에 BottomNavigationView를 추가해준다.

 

<LinearLayout 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.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/menu"
        app:labelVisibilityMode="labeled"/>

</LinearLayout>

 

 

labelVisibilityMode 속성은 아이콘 밑에 텍스트가 보여질지 설정하는 것이다.

 

이렇게 만들면 menu에 에러가 뜨게 되는데 menu파일을 아직 만들지 않아서 그렇다.

 

이후에 BottomNavigationView 안에 들어갈 아이템들을 만들어보자.

res-New-AndroidResource File을 만들어 menu파일을 생성한다.

 

 

 

menu 파일을 생성했다면, 각 아이템들을 만들어보자.

*menu 아이템은 3개 이상 만드는 것을 권장하고있다.

 

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

    <item
        android:id="@+id/menu1"
        android:title="@string/menu1"
        android:icon="@drawable/ic_baseline_playlist_play_24"
        android:enabled="true" />

    <item
        android:id="@+id/menu2"
        android:title="@string/menu2"
        android:icon="@drawable/ic_baseline_library_music_24"
        android:enabled="true" />

    <item
        android:id="@+id/menu3"
        android:title="@string/menu3"
        android:icon="@drawable/ic_baseline_playlist_play_24"
        android:enabled="true" />

    <item
        android:id="@+id/menu4"
        android:title="@string/menu4"
        android:icon="@drawable/ic_baseline_album_24"
        android:enabled="true" />

    <item
        android:id="@+id/menu5"
        android:title="@string/menu5"
        android:icon="@drawable/ic_baseline_folder_24"
        android:enabled="true" />
</menu>

나같은 경우엔 5개의 아이템을 만들었다.

 

여기서 아이콘은 내가 설정하고 싶은 아이콘을 설정해 가져오면 된다.

기본적으로 제공하는 아이콘은 res-New-Vector Assest에서 추가할 수 있다.

 

아이콘 색상을 바꾸고 싶다면 android:iconTint 로 원하는 색상값을 넣어주면 된다.

 

이후 Run을 하게 되면 맨 처음 나왔던 사진과 같은 BottomNavigationView가 완성된다.

 

다음엔 BottomNavigationView를 이용하여 화면을 구성해보아야겠다.