[안드로이드][레이아웃] bottom navigation bar - android material로 기본 디자인 적용하기

지난번엔 깃허브에 올라온 라이브러리를 바탕으로 커스터마이징을 했다면, 이번엔 Google Android Material Design library를 바탕으로 기본 디자인을 적용해보자. 물론 컬러, 아이콘 등은 취향에 따라 달라질 수 있다.

 

build.gradle 파일 업데이트

2020년 4월 24일 현재, alpha06 버전.

implementation 'com.google.android.material:material:1.2.0-alpha06'

 

 

 

 

 

menu 디렉토리 만들기

1. res폴더 우클릭 > New > Android Resource Directory

 

 

2. bottom navigation bar에 들어갈 아이콘 목록 추가

res > menu > bottom_navigation_menu.xml 만들기(파일명은 자유롭게)

본인이 만들 어플에 따라 설정한다. 
가이드에 따르면 3개 ~ 5개가 적당하다.
나는 home, favorite, category, profile 네 가지를 사용할 예정.

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

    <item
        android:id="@+id/home"
        android:title="home"
        android:icon="@drawable/ic_home_w"/>

    <item
        android:id="@+id/favorite"
        android:title="favorite"
        android:icon="@drawable/ic_star_w"/>

    <item
        android:id="@+id/category"
        android:title="category"
        android:icon="@drawable/ic_category_w"/>

    <item
        android:id="@+id/profile"
        android:title="profile"
        android:icon="@drawable/ic_profile_w"/>



</menu>

 

menu 태그 안에 포함되는 item 태그는 반드시 아래 세가지 속성을 포함해야 한다.

1. id: 소스의 고유한 id
2. title: 아이콘 아래 표시 될 텍스트
3. icon: 아이콘 이미지 파일

 

 

 

 

 

activity_main.xml

color는 자유롭게
여기까지 하면 별다른 설정 없이 기본 설정만으로 bottom navigation bar가 작동한다.

<FrameLayout 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/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@color/colorPrimary"
        app:menu="@menu/bottom_navigation_menu" />    # 앞서 menu 디렉토리에 만든 파일

</FrameLayout>

 

 

 

 

 

참고용 color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#4d4dff</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="white">#ffffff</color>
</resources>

 

 

 

 

 

참고 사이트

Bottom Navigation - Material Components for Android

Android Material Design Bottom Navigation View Example

Material Icons