안드로이드 스튜디오 BottomNavigationView 간단하게 만드는 방법 알아보기 [Android Studio]

 

 

애플리케이션을 사용하다 보면 아래 사진과 같이 BottomNavigationView를 쉽게 찾아보실 수 있습니다. 

이런 BottomNavigationView는 하단의 탭들을 이용하여 화면 간의 이동을 쉽게 해 줄 수 있습니다.

 

 

 

오늘은 BottomNavigationView를 만들기 위한 코드 작성과 메뉴 xml 파일를 추가하는 방법에 대해 알아보도록 하겠습니다.

 

1. 메뉴 xml을 만든다

res 파일에 오른쪽 버튼을 누르고 Android Resource File을 클릭해줍니다.

 

 

New Resource File 창이 뜨게 되면 내가 만들 xml 파일명을 입력해 주고

Resource type에는 Menu를 선택한 후 확인을 눌러줍니다.

 

 

그렇게 menu 디렉터리 안에 menus.xml 파일이 생성되고

menus.xml 파일 안에 내가 만들 메뉴 개수, 이름, 아이콘 등을 정하고

아래와 같이 코드를 작성해 주면 됩니다.

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab1"
        android:title="세부설정"
        android:icon="@android:drawable/ic_input_add"/>
    <item
        android:id="@+id/tab2"
        android:title="초기화"
        android:icon="@android:drawable/ic_menu_close_clear_cancel"/>

    <item
        android:id="@+id/tab3"
        android:title="시작하기"
        android:icon="@android:drawable/ic_menu_rotate">
    </item>

</menu>

 

여기서 아이콘은 안드로이드 스튜디오에 기본적으로 내재되어있는 아이콘들을 이용하였지만

내가 직접 아이콘을 만들어 사용하고 싶으면 drawable 파일에

만든 아이콘 사진을 넣고 android:icon="여기에" 주소를 입력하면 됩니다.

 

2. activity_main에 NavigationView 추가

 

activity_main으로 들어가 화면을 FrameLayout과 BottomNavigationView로

구성된 화면을 만든 후 app:menu="@menu/menus"를 BottomNavigationView에

넣어 내가 만든 메뉴로 구성된 하단내비게이션뷰를 만듭니다.

 

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/NavigationView_tabs">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/NavigationView_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/menus" />
</RelativeLayout>

 

3. 각 탭에 해당하는 화면 추가

​

BottomNavigationView가 완성되었다면 각 탭을 눌렀을 때 FrameLayout안에서 보일 화면을 만들어주면 됩니다.

3개의 탭에 각각 들어갈 Fragment와 그 Fragment에 해당하는 xml 파일을 3개씩 만들어줍니다.

 

 

MainActivity로 돌아와 a, b, cFragment를 모두 정의해 주고

getSupportFragmentManager().beginTransaction().replace(R.id.container, aFragement);를 이용하여

처음에 container(FrameLayout)에 보일 화면을 aFragment로 지정해 줍니다.

​

그리고 NavigationBarView.setOnItemSelectedListener를 이용하여

각 탭이 눌렸을 때 container에 어떤 Fragment로 전환될지 지정해 줍니다.

 

public class MainActivity extends AppCompatActivity {
    
    AFragement aFragement;
    BFragement bFragement;
    CFragement cFragement;
    
    SettingFragment settingFragment;
    PickFragment pickFragment;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        aFragement = new AFragement();
        bFragement = new BFragement();
        cFragement = new CFragement();
        
        getSupportFragmentManager().beginTransaction().replace(R.id.container, aFragement);


        NavigationBarView navigationBarView = findViewById(R.id.NavigationView_tabs);
        navigationBarView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.tab1:
                        getSupportFragmentManager().beginTransaction().replace(R.id.container, aFragement);
                        return true;
                    case R.id.tab2:
                        getSupportFragmentManager().beginTransaction().replace(R.id.container, bFragement);
                        return true;
                    case R.id.tab3:
                        getSupportFragmentManager().beginTransaction().replace(R.id.container, cFragement);
                        return true;

                }
                return false;
            }
        });
    }
}