[Android] 안드로이드 - 하단 탭바, 네비게이션 바 만드는 방법 BottomNavigationView

안드로이드 앱 개발 시 하단 탭바를 어렵지 않게 만들 수 있다.
탭바는 주로 네비게이션의 기능을하여 사용자의 편의를 돕는다.

 

1. build.gradle.kts  라이브러리 설치

최신버전으로 업그레이드 되어 있을 수 있으니
버전 번호를 확인하여 변경할 수 있도록 한다.

dependencies {

    implementation("androidx.navigation:navigation-fragment:2.7.6")
    implementation("androidx.navigation:navigation-ui:2.7.6")
}

 

2. activity_main.xml

2.1. 레이아웃 변경

ConstraintLayout을 RelativeLayout으로 변경해준다.

<?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=".MainActivity">
    
</RelativeLayout>

 

2.2. BottomNavigationView 생성

네비게이션이 보일 BottomNavigationView을 생성하여
레이아웃 스타일 값을 아래와 같이 지정해준다.

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FF5252"

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

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FF5252" />

</RelativeLayout>

 

3.Navigation Resource File 생성

Resource Manager-Navigation- + 플러스 버튼 클릭

리소스 파일 이름 설정-OK

생성된 파일 클릭

 

Create new destination

Fragment (Blank) 선택

 

Fargment Name 설정

 

이렇게 총 네비게이션 아이콘 수 만큼 만든다.
본인은 총 3개를 만들었다.

 

 

4. activity_main.xml Fragment  배치

activity_main.xml에서 NavHostFragment를
RelativeLayout에 끌어다 놓는다.

Navigation Graphs에서 아까 생성한 my_nav.xml를 선택한다.

 

activity_main.xml에서 이 Fragment의 id와 위치(layout_avove)를 설정해준다.

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottomNavigationView"
    app:navGraph="@navigation/my_nav"/>

 

5. Menu 만들기

Resource Manager에서 더보기 눌러 Menu 선택 후
+ 버튼 눌러서 Menu Resource File을 새로 생성한다.

 

파일명 설정 후 OK

 

오른쪽 상단 디자인 보기로 바꾸고
탭이 3개이므로 메뉴아이템 3개 추가한다.

item들의 Common Attributes를 id, title, icon을 설정해준다.

아이콘 생성하는 방법은 아래와 같다.

https://ruriruriya.tistory.com/147

[Android] 안드로이드 - 메뉴 아이콘 이미지를 만드는 방법(Vector Asset)

 

6. activity_main.xml에서 BottomNavigationView 메뉴 세팅

label을 보여주기 여부를 설정
app:labelVisibilityMode="unlabeled"

menu 에 아까 만든 Menu Resource 지정.
app:menu="@menu/bottom_menu"

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#FF5252"
    app:labelVisibilityMode="unlabeled"
    app:menu="@menu/bottom_menu" />

 

7. MainActivity.java 세팅

아래와 같이 코드로 세팅한다.

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

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

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

public class MainActivity extends AppCompatActivity {

    // 아래 아이콘 나오는 영역
    BottomNavigationView bottomNavigationView;

    // 각 프레그먼트를 멤버변수로 만든다.
    Fragment firstFragment;
    Fragment secondFragment;
    Fragment thirdFragment;


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

        bottomNavigationView = findViewById(R.id.bottomNavigationView);

        firstFragment = new FirstFragment();
        secondFragment = new SecondFragment();
        thirdFragment = new ThirdFragment();

        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int itemId = item.getItemId();

                Fragment fragment = null;
                
                if(itemId == R.id.firstFragment){

                    fragment = firstFragment;
                    
                } else if (itemId == R.id.secondFragment) {

                    fragment = secondFragment;
                    
                } else if (itemId == R.id.thirdFragment) {

                    fragment = thirdFragment;
                    
                }


                return loadFragment(fragment);
            }
        });


    }

    boolean loadFragment(Fragment fragment){
        if(fragment != null){
            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(R.id.fragment,fragment)
                    .commit();
            return true;
        }else {
            return false;
        }
    }
}

 

8. 화면 확인