[Android Studio]Bottom Navigation View

하단 메뉴를 선택하여 다른 Fragment를 띄어주는 예제

1. Bottom Navigation View 에 들어갈 item 정의

하단바에 4개의 item이 들어가는 것을 구현하였다.

• Smenu.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/tab1"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/home"
        android:title="Home"/>
    <item
        android:id="@+id/tab2"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/monitoring"
        android:title="Monitoring"/>
    <item
        android:id="@+id/tab3"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/gallery"
        android:title="Gallery"/>
    <item
        android:id="@+id/tab4"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/setting"
        android:title="Setting"/>

</menu>

• android: id = "@+id/tab1"
  각 메뉴에 대한 이름을 지정해준다. 추후에 id를 사용한다.
  

• app : showAsAction = "always"
  항상 하단 메뉴가 보이도록 설정한다. 이 값에 따라 보이지 않는 경우가 발생할 수 있다.
  

• android: enabled = "true"
  시스템에서 서비스를 인스턴스화할 수 있는지 여부. 인스턴스화할 수 있으면 'true'이고 인스턴스화할 수 없으면 'false'이다. 기본값은 'true'이다.

• android : icon = "@drawable/home"
  하단 메뉴에서 텍스트과 함께 아이콘을 보여주고 싶을 때 사용하는 코드로, drawable 하단에 이미지를 저장하고 다음과 같이 코드를 작성해준다.

• android : title = "Home"
  하단 메뉴에 나타나는 텍스트를 나타내는 코드이다.

2. Fragment 생성

4가지 Fragment를 생성하였다. Fragment생성 시 Activity 생성과 똑같은 단계로 생성하면 된다. Fragment 생성시 java 파일과 xml 파일이 생성된다.

다음과 같은 Fragment를 생성하였다.

• HomeFragment
• Monitoring
• Gallery
• Setting

3. Fragment가 올라갈 MainActivity정의

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">



	<!--FrameLayout-->
    <FrameLayout
        android:id="@+id/main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_gravity="bottom"
        android:background="#ffffff"
        app:menu="@menu/smenu"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@color/selectedcolor"
        app:itemTextColor="@color/selectedcolor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

• android:layout_marginBottom="?attr/actionBarSize"/>
  FrameLayout에 다음 코드를 추가하여야 하단 메뉴바를 생성할 수 있다.
  
• app:menu="@menu/smenu"
  이전에 만들어둔 smenu를 연결시킨다.
  

• app:itemIconTint="@color/selectedcolor"
  app:itemTextColor="@color/selectedcolor"
  메뉴의 텍스트와 아이콘에 대한 색상 지정이다. 만약, 지정해주고 싶다면 color디렉터리 내에 파일을 만들어서 지정하면 된다.

  <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--색상이 선택되었을 때 -->
      <item android:state_checked="true" android:color="#7EC341"/>
    <!--평소 색상 -->
      <item android:color="#858585"/>
  </selector>

• MainActivity.java

public class MainActivity extends AppCompatActivity {

	//BottomNavigationView 선언
    BottomNavigationView bottomNavigationView;
    //Fragment 선언
    HomeFragment homeFragment;
    MonitoringFragment monitoringFragment;
    GalleryFragment galleryFragment;
    SettingFragment settingFragment;

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


        //초기 세팅
        init();


        //bottomNavigation의 아이콘을 선택했을 때 원하는 프레그먼트가 띄어질 수 있도록 리스너를 추가한다.
        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

				
                switch (item.getItemId()) {
                    case R.id.tab1: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new HomeFragment())
                                .commit();
                        return true;
                    }
                    case R.id.tab2: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new MonitoringFragment())
                                .commit();
                        return true;
                    }
                    case R.id.tab3: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new GalleryFragment())
                                .commit();
                        return true;
                    }
                    case R.id.tab4: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new SettingFragment())
                                .commit();
                        return true;
                    }

                }
                return false;
            }
        });
    }

    private void init(){
        //fragment 객체 생성
        homeFragment = new HomeFragment();
        monitoringFragment = new MonitoringFragment();
        galleryFragment = new GalleryFragment();
        settingFragment = new SettingFragment();

        //main.xml상의 bottomNavigationView 연결
        bottomNavigationView = findViewById(R.id.bottomNavigationView);

        //제일 처음 띄어줄 뷰 세팅
        getSupportFragmentManager().beginTransaction().replace(R.id.main_layout,homeFragment).commitAllowingStateLoss();

    }
}

• bottomNavigation View에 대하여 tab1에 해당하는 클릭이 들어오게 되면, main_layout에 homeFrament이 나타나게 된다.

이전 프로젝트에서는 하나씩 아이콘과 텍스트를 배치하여 하단바를 만들고, Activity에 연결하여 무겁고, 느리다는 느낌을 받았는데 안드로이드 스튜디오에서 제공하는 Bottom Navigation View를 사용하니 가볍고 구현하기에 쉬웠다.