Android Studio 바텀 네비게이션 사용하기 (Bottom Navigation)

1. Implementation 

build.gradle(Module:app) > dependencies 에 추가한다.

implementation 'androidx.navigation:navigation-fragment:2.3.2'
implementation 'androidx.navigation:navigation-ui:2.3.2' 

 

2. Menu 디렉터리와 item 만들기

res > new > Android Resource Directory > Resource type > menu 를 추가하여 메뉴 디렉터리를 생성해준다.

 

생성된 메뉴 디렉터리에 resource file 을 만들어준 후 아래 캡쳐와 같이 적어준다. 
아이콘이 될 이미지를 사전에 준비하지못해 안드로이드스튜디오에서 제공해주는 벡터이미지를 사용하였다.
// File > new > Vector Accet

 

3. Main Acticity 에서 bottom navigation 추가하기

bottomNavigation의 기본 색상은 검정색이며, 타이들(필수)+아이콘이 기본 외형이다.  만약 아이콘만 보여주고싶을땐app:labelVisibilityMode="unlable" 속성을 추가해주면 된다.

bottomNavigaion에 id값과 정렬을 해주고 아까 추가한 메뉴(bottom_menu.xml)를 적용시켜준다.

 

4.Fragment.xml와 .java 추가 해주기 

File > new > Fragment > Fragment(blank) >name : Fragment1 생성 하면 java와 layout이 동시에 생성된다.

먼저 Fragment1.java에 onCreateView를 제외하고 나머지는 아래 캡쳐와 같이 다 지워준다. 
그리고 fragment_1.xml에는 클릭시 화면 전환이 잘되는지 확인하기위해 background 색상을 추가해주었다. //생략가능
item 갯수에 맞게 xml,java 파일 복사붙여넣기 또는 new로 생성하기로 만들어준다. (Fragment 1~5)

 

5. MainActivity.java 소스 작성하기

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView; //바텀 네비게이션 뷰

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

        bottomNavigationView = findViewById(R.id.bottomNavi);

        //처음화면
        getSupportFragmentManager().beginTransaction().add(R.id.main_frame, new Fragment1()).commit(); //FrameLayout에 fragment.xml 띄우기

        //바텀 네비게이션뷰 안의 아이템 설정
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()) {
                    //item을 클릭시 id값을 가져와 FrameLayout에 fragment.xml띄우기
                    case R.id.item_fragment1:
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment1()).commit();
                        break;
                    case R.id.item_fragment2:
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment2()).commit();
                        break;
                    case R.id.item_fragment3:
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment3()).commit();
                        break;
                    case R.id.item_fragment4:
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment4()).commit();
                        break;
                    case R.id.item_fragment5:
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment5()).commit();
                        break;
                }
                return true;
            }
        });
    }
}

 

---

 

하단의 바텀 네비게이션바의 아이콘을 각각 클릭시 화면이 바뀌는걸 확인 할 수 있다!!