[Android] BottomNavigationView(하단 바) 설정하기

BottomNavigationView 란?

 ▶ 밑의 그림에서 앱의 하단에 있는 홈, 알림, 더보기같은 탭이 있는 하단바를 말합니다.

 

---

BottomNavigationView 설정하는 방법

 

1. menu Directory 만들기

 1-1 res -> New -> Android Resource Directory

 

1-2 Resource type -> menu -> OK

 

2. menu 폴더에 파일 추가

 2-1 menu -> New -> Menu Resource File

 

 2-2 임의의 File name을 입력 -> OK

 

 2-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/tab1"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_home"
        android:title="홈" />

    <item
        android:id="@+id/tab2"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_notifications"
        android:title="알림" />

    <item
        android:id="@+id/tab3"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_more_horiz"
        android:title="더보기" />

</menu>

▶ icon은 본인이 준비 한 이미지를 drawable 폴더에 넣으면 됩니다.

▶ item의 개수에 따라 표시되는 양이 달라집니다.

 

3. layout에 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=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:title="제목"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:itemBackground="@color/blue"
        app:itemIconTint="@drawable/item_select"
        app:itemTextColor="@drawable/item_select"
        app:menu="@menu/menu_bottom"/>
</androidx.constraintlayout.widget.ConstraintLayout>

▶ itemIconTint : 아이콘에 적용될 색입니다.

▶ itemTextColor : 아이콘 밑에 있는 글씨에 적용될 색입니다.

▶ menu : bottomNavigationView에 지정될 menu입니다. menu 폴더의 menu_bottom 파일을 지정하였습니다.

 

4. 각 탭 클릭 시, 탭에 표시되는 색 변경

 : 다른 종류의 탭을 클릭할 때 마다 클릭되지 않은 탭과 색의 차이를 주게 하기 위해 설정합니다.

 

 4-1 res -> drawable -> New -> Drawable Resource File

 

 4-2 임의의 이름 지정 -> Root element -> selector -> OK

 

 4-3 파일에 내용 추가

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

▶ state_checked="true" : color 속성의 색을 탭을 눌렀을 때 표시합니다.

▶ state_checked="false" : color 속성의 색을 누르지 않은 탭에 표시합니다. 이 속성을 쓰지 않고 color 속성만 써도 무방합니다.

▶ state_pressed="true" : color 속성의 색을 탭을 누르고 있을 때 표시합니다.

 

5. 각 탭 클릭 시, 나타내는 화면 변경

 : 서로 다른 탭을 클릭할 때 마다 표시되는 화면을 변경합니다.

 

▶ framelayout : 여러장의 사진을 끼울 수 있고, 맨 위에 있는 사진이 표시되는 액자 형태로 된 layout입니다.

▶ fragment : activity에 종속되어 있지만, 자체 레이아웃을 정의 및 관리하고 자체 수명 주기를 보유하며 자체 입력 이벤트를 처리할 수 있습니다.

 

5-1 탭의 개수만큼 fragment를 생성합니다.

 ▶ New -> Fragment -> Fragment(Black)

 

 ▶ 임의의 제목을 입력 -> Finish

 

5-2 각 fragment 마다 onCreateView를 제외한 나머지를 삭제합니다.

 

5-3 layout의 activity_main에서 Framelayout을 추가합니다.

<?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">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:title="제목"/>

    <FrameLayout
        android:id="@+id/constraint"
        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_toBottomOf="@id/toolbar"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:itemBackground="@color/blue"
        app:itemIconTint="@drawable/item_select"
        app:itemTextColor="@drawable/item_select"
        app:menu="@menu/menu_bottom"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

5-4 실행 시 fragment를 구분하기 위해 배경색을 변경합니다.

 

5-5 MainActivity에 내용을 추가합니다.

public class MainActivity extends AppCompatActivity {
    fragment1 fragment1;
    fragment2 fragment2;
    fragment3 fragment3;
    BottomNavigationView bottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        bottomNavigationView = findViewById(R.id.bottom_navigation);
        fragment1 = new fragment1();
        fragment2 = new fragment2();
        fragment3 = new fragment3();
        getSupportFragmentManager().beginTransaction().replace(R.id.constraint, fragment1).commit();

        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.tab1:
                        getSupportFragmentManager().beginTransaction().replace(R.id.constraint, fragment1).commitAllowingStateLoss();
                        break;
                    case R.id.tab2:
                        getSupportFragmentManager().beginTransaction().replace(R.id.constraint, fragment2).commitAllowingStateLoss();
                        break;
                    case R.id.tab3:
                        getSupportFragmentManager().beginTransaction().replace(R.id.constraint, fragment3).commitAllowingStateLoss();
                        break;
                }
                return true;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_top, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.search:
                // 여기에 입력
                return true;
            case R.id.menu:
                // 여기에 입력
                return true;
        }
        return false;
    }
}

 ▶ getSupportFragmentManager().beginTransaction().replace(R.id.constraint, fragment1).commit();

       : 초기화면으로 fragment1를 지정합니다. R.id.constraint는 framelayout의 id입니다. 첫 번째 인수는 fragment가 표시 될 화면입니다.

 ▶ switch - case 안에서 각 탭을 선택할 때 마다 화면이 바뀌게 설정하였습니다.

 

---

실행 결과