북극곰의 개발일기

Android Bottom Navigation Bar





posted by purplebeen on Sat Feb 03 2018 23:15:46 GMT+0900 (KST) in Android


안드로이드 어플리케이션 개발을 진행하다 보면 종종 하단 바가 필요해지는 때가 있다.

기존에는 탭레이아웃에서 탭 호스트를 내리는 방식으로도 구현이 가능 하기는 했지만,

2015년 Google이 Material Design을 공개하면서 새롭게 하단 바를 만드는 작업이 가능해졌다.

하단 탭 바를 추가하는 방법인 Bottom Navigation Bar를 알아보자

일단 app의 build.gradle에 라이브러리를 추가해준다.

compile 'com.android.support:design:25.0.0'

자 그럼 일단 먼저 레이아웃을 짜 보자.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.example.baehyeonbin.bottomnavigationbarexample.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/bottom_navigation_menu"
        />

</RelativeLayout>

일반 레이아웃 하단에 Bottom Navigation View를 추가 해줬고, 각 항목들을 bottom_navigation_menu라는 항목에,

활성화 되었을 때와 활성화 되지 않았을 때의 색상은 drawable 밑의 nav_item_color_state.xml에 정의해 주었다.

또한 하단 탭을 선택했을때 변화를 나타내기 위해 레이아웃의 중앙에 텍스트뷰 하나를 놓았다.

이제 메뉴에 정의된 아이템을 보자

<?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/action_favorites"
        android:enabled="true"
        android:title="favorites"
        android:icon="@drawable/ic_favorite_white_24dp"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/acton_schedules"
        android:enabled="true"
        android:title="schedules"
        android:icon="@drawable/ic_query_builder_white_24dp"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="music"
        app:showAsAction="ifRoom" />
</menu>

android:enabled="true"는 화면에 표시하는 것을 의미하고

app:showAsAction="ifRoom"은 네비게이션 뷰에 액션아이템으로 표시하라는 의미이다.

이제는 선택했을 때와 선택하지 않았을 때의 색상을 지정해보자

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

selector를 사용해서 item을 구분하여 아이템을 선택했을 때는 흰색이, 선택하지 않았을 때는 colorPrimaryDark색상이 표기되도록 하였다.

자바 소스코드에서 탭을 선택했을 때 텍스트뷰의 변화를 주도록 해 보자.

package com.example.baehyeonbin.bottomnavigationbarexample;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigation);
        textView = (TextView) findViewById(R.id.textView);

        bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch(item.getItemId()) {
                    case R.id.action_favorites:
                        textView.setText("Favorites");
                        break;
                    case R.id.action_music:
                        textView.setText("Music");
                        break;
                    case R.id.acton_schedules:
                        textView.setText("Schedules");
                        break;
                }
                return true;
            }
        });
    }
}

네비게이션 뷰에 NavigationItemSelected Listener를 달아서 아이템의 id를 기준으로 텍스트뷰를 바꿔주도록 코드를 작성했다.