[안드로이드] 하단 메뉴(바텀 내비게이션)를 이용해보자-BottomNavigationView, Fragment

 

 

 

 

하단 메뉴를 이용해서 아이콘을 터치할때마다 다른 프래그먼트를 띄워주는 예제를 만들어보겠습니다.

새로 업데이트 된 예제를 확인하실 분들은 링크를 확인해주세요

프래그먼트 별 백버튼 이벤트 예제가 궁금하신분은 클릭해주세요

 

1.  build.gradle 에 dependencies 추가

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

이또한 최신 버전이 다를 수 있기 때문에 구글 검색을 해보시거나

File -> Project Structure ->Dependencies 에서 추가하는 방법을 이용하시기 바랍니다.

 

 

 

 

마지막으로 Apply를 꼭 눌러주세요

 

 

2. 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
        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="@color/cardview_dark_background"
        app:menu="@menu/menu_bottom"
        app:labelVisibilityMode="unlabeled"
        app:itemBackground="@color/cardview_dark_background"
        app:itemIconTint="@drawable/item_color"
        app:itemTextColor="@drawable/item_color"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

FrameLayout 안의 android:layout_marginBottom="?attr/actionBarSize" 를 꼭 추가하셔야 bottomnavigationview가 보여질 수 있습니다. margin을 액션바 사이즈만큼 준다고 설정을 해줬다고 생각하시면 됩니다.

 

BottomNavigationView 참고사항

 

android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"

-빈틈 없이 뷰에 딱 맞게 들어갈 수 있도록 margin을 0으로 설정

 

android:layout_gravity="bottom"

-아래 부분에 위치 할 수 있도록 gravity 설정

 

android:background="@color/cardview_dark_background"

-BottomNavigationView의 background 색상을 설정, 원하는 색상으로 변경해서 사용하세요

 

app:menu="@menu/menu_bottom"

-참조할 메뉴의 xml파일의 경로를 지정해주면 됩니다.

menu_bottom.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:icon="@drawable/main_list_icon"
        android:enabled="true"
        android:checked="true"
        android:title="리스트"
        />
    <item
        android:id="@+id/tab2"
        app:showAsAction="always"
        android:icon="@drawable/main_record_icon"
        android:enabled="true"
        android:title="기록"/>

    <item
        android:id="@+id/tab3"
        app:showAsAction="always"
        android:icon="@drawable/main_more_icon"
        android:enabled="true"
        android:title="더보기"/>

</menu>

android:icon - 아이콘으로 설정할 이미지의 경로를 지정해주는건데 저는 파일명을 저렇게 만들어서 저장했습니다.

똑같이 사용하실 분들은 다운 받아서 사용하시면 될 것 같습니다.

 

 

main_list_icon.png

 

 

main_more_icon.png

 

main_record_icon.png

 

app:itemIconTint="@drawable/item_color"

-아이콘을 터치했을때 아이콘의 색상을 변경할때 사용하시면 됩니다.

item_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#132DB3"/>
    <item android:color="#FFFFFF"/>
</selector>

<item android:state_checked="true" android:color="#132DB3"/>

해당 코드의 color를 수정하시면 원하시는 색상으로 사용하실 수 있습니다.

 

app:itemTextColor="@drawable/item_color"

-아이콘과 함께 텍스트도 같이 띄우실 예정이라면 아이콘과 동일하게 설정해주시면 텍스트 또한 선택 됐을때 색상이 변경되도록 사용하실 수 있습니다.

 

위 참고 사항들중 메뉴에 관한 내용은 링크로 들어가서 더 확인해보실 수 있습니다.

 

 

3. fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#9C27B0">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Fragment1"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

fragment2, fragment3은 원하시는대로 layout의 backgroundcolor, TextView의 text를 수정해서 사용하시면 됩니다.

fragment1,2,3 3개를 다 만드셔야합니다.

 

 

4. Fragment1.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Fragment1 extends Fragment{
    ViewGroup viewGroup;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        viewGroup = (ViewGroup) inflater.inflate(R.layout.fragment1,container,false);
        return viewGroup;
    }


}

간단하게 뷰만 보이도록 코딩했습니다.

Fragment2, Fragment3도 동일하고

viewGroup = (ViewGroup) inflater.inflate(R.layout.fragment1,container,false);

주황색 글씨 부분만 변경해서 사용하시면 됩니다.

xml과 마찬가지로 1,2,3을 전부 만드셔야 합니다.

 

 

5. MainActivity.java

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

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

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

public class MainActivity extends AppCompatActivity {
    BottomNavigationView bottomNavigationView;
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigationView = findViewById(R.id.bottomNavigationView);

        //프래그먼트 생성
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();

        //제일 처음 띄워줄 뷰를 세팅해줍니다. commit();까지 해줘야 합니다.
        getSupportFragmentManager().beginTransaction().replace(R.id.main_layout,fragment1).commitAllowingStateLoss();


        //bottomnavigationview의 아이콘을 선택 했을때 원하는 프래그먼트가 띄워질 수 있도록 리스너를 추가합니다.
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    //menu_bottom.xml에서 지정해줬던 아이디 값을 받아와서 각 아이디값마다 다른 이벤트를 발생시킵니다.
                    case R.id.tab1:{
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout,fragment1).commitAllowingStateLoss();
                        return true;
                    }


                    case R.id.tab2:{
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout,fragment2).commitAllowingStateLoss();
                        return true;
                    }


                    case R.id.tab3:{
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout,fragment3).commitAllowingStateLoss();
                        return true;
                    }



                    default: return false;


                }

            }

        });



    }
}

 

 

이제 실행해보시면 확인해보실 수 있습니다.

 

getSupportFragmentManager().beginTransaction().replace(R.id.main_layout,fragment1).commitAllowingStateLoss();

해당부분으로 원하는 프래그먼트를 띄워주면서 setArguments를 사용해주면 뷰를 띄우실때 프래그먼트로 원하는 값을 전달하실 수 있는데 해당 부분은 다음 포스팅에 추가하도록 하겠습니다.