[Android Studio] 하단 네비게이션 (Bottom Navigation)

하단 내비게이션 (Bottom Navigation)

 

하단 탭으로 화면을 이동할 수 있는 기능을 구현할 수 있다.

 

xml : menu_bottom

 

<?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"
        android:enabled="true"
        android:icon="@android:drawable/ic_dialog_email"
        android:title="이메일"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/tab2"
        android:icon="@android:drawable/ic_dialog_info"
        android:title="정보"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/tab3"
        android:icon="@android:drawable/ic_dialog_map"
        android:title="위치"
        app:showAsAction="ifRoom"/>
</menu>

 

android:enabled="true"를 false로 하면 비활성화로 변경하는 것이다.

 

xml : main

 

<?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=".BottomActivity">

    <FrameLayout
        android:id="@+id/bottom_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:elevation="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:itemBackground="@color/white"
        app:itemIconTint="@drawable/bottom_navigation_color"
        app:itemTextColor="@drawable/bottom_navigation_color"
        app:menu="@menu/menu_bottom"/>

</androidx.constraintlayout.widget.ConstraintLayout>

BottomNavigationView : 하단 탭을 보여주는 위젯 하단에 표시될 수 있도록 layout_constraintBottom_toBottomOf를 설정해줌 itemBackground : 각 탭의 배경색 itemColorTint : 아이콘 색상 itemTextColor : 텍스트 색상 menu : menu 디렉토리에서 만들었던 xml 파일로 설정

 

xml : bottom_navigation_color

 

선택 여부 (selected)에 따라 원하는 아이콘과 텍스트 색상으로 바꾸기 위해 커스텀한 파일이다.

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:color="#364fa3"/>
    <item
        android:state_selected="false"
        android:color="#959595"/>
</selector>

 

java

 

package com.example.myapplication;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {
    private FragmentManager fragmentManager = getSupportFragmentManager();
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;

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

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();

        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.bottom_container, fragment1).commitAllowingStateLoss();

        BottomNavigationView bottomNavigation = findViewById(R.id.bottom_navigation);
        bottomNavigation.setOnItemSelectedListener(new ItemSelectedListener());
    }

    class ItemSelectedListener implements BottomNavigationView.OnItemSelectedListener {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            FragmentTransaction transaction = fragmentManager.beginTransaction();

            switch (item.getItemId()) {
                case R.id.tab1:
                    Toast.makeText(getApplicationContext(), "첫번째 탭", Toast.LENGTH_SHORT).show();
                    getSupportFragmentManager().beginTransaction().replace(R.id.bottom_container, fragment1).commit();
                    return true;
                case R.id.tab2:
                    Toast.makeText(getApplicationContext(), "두번째 탭", Toast.LENGTH_SHORT).show();
                    getSupportFragmentManager().beginTransaction().replace(R.id.bottom_container, fragment2).commit();
                    return true;
                case R.id.tab3:
                    Toast.makeText(getApplicationContext(), "세번째 탭", Toast.LENGTH_SHORT).show();
                    getSupportFragmentManager().beginTransaction().replace(R.id.bottom_container, fragment3).commit();
                    return true;
            }
            return false;
        }
    }
}