[Android] FAB가 추가된 바텀 네비게이션뷰 만들기

CoordinatorLayout과 BottomAppBar를 이용하면 위 화면처럼

Floating Action Button이 추가된 바텀 네비게이션뷰를 만들 수 있다.

 

 

레이아웃 변경하기

기본 레이아웃을 CoordinatorLayout으로 변경해준다. 코드에서 변경해도 된다.

 

BottomAppBar, FAB 추가

<com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="5dp"
        app:fabCradleRoundedCornerRadius="10dp">

    </com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/addButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_baseline_add_24"
        android:clickable="true"
        android:backgroundTint="@color/main_green"
        app:layout_anchor="@id/bottomAppBar"/>

바텀 앱바와 플로팅버튼을 추가해준다.

여기서 

app:layout_anchor="@id/bottomAppBar"

를 통해 바텀앱바에 연결해준다.

 

 app:fabCradleMargin="5dp"
        app:fabCradleRoundedCornerRadius="10dp"

바텀앱바의 두가지 속성으로

버튼과의 마진, 모서리 굴곡을 설정할 수 있다.

 

 

BottomNavigationView 추가

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_marginRight="16dp"
            android:background="@android:color/transparent"
            app:menu="@menu/bottom_nav_menu"/>

바텀앱바안에 네비게이션뷰를 추가해준다.

백그라운드를

transparent 로 설정하여 투명하게 해야 하고,

앱바의 기본 leftmargin에 맞춰서 right 마진도 설정해준다.

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/listFragment"
        android:icon="@drawable/ic_baseline_list_24"
        android:title="목록"
        android:enabled="true"/>

    <item android:id="@+id/rankingFragment"
        android:icon="@drawable/ic_baseline_bar_chart_24"
        android:title="순위"
        android:enabled="true"/>

    <item android:id="@+id/blank"
        android:title=""
        android:enabled="false"/>

    <item android:id="@+id/chatFragment"
        android:icon="@drawable/ic_baseline_chat_24"
        android:title="대화"
        android:enabled="true"/>

    <item android:id="@+id/moreFragment"
        android:icon="@drawable/ic_baseline_more_horiz_24"
        android:title="더 보기"
        android:enabled="true"/>
</menu>

사용할 메뉴 부분에서는

가운데 메뉴를 비워줌으로써 FAB가 들어갈 칸을 좀 더 자연스럽게 설정해줄 수 있다.

 

 

이제 xml 화면을 확인해보면

잘 추가되었으나 음영이 겹쳐지는 것을 확인할 수 있다.

 

이것을 제거하기 위해

코드에서

// 바텀네비게이션 음영 삭제
            bottomNavigationView.background = null

처리해주면 이제 원하는 UI를 얻을 수 있다.

 

제트팩 네비게이션을 사용할 경우는 상관없지만,

바텀네비게이션 아이템 선택에 대한 처리를 해줘야 할 경우

아까 가운데 메뉴를 비워주었기 때문에

bottomNavigationView.menu.getItem(2).isEnabled = false

비워준 메뉴를 비활성화 해주면 오류없이 처리할 수 있다.