Bottom AppBar에 들어갈 FlatingAction Buton을 설정합니다.

갑자기 Google IO2018 앱에 나타난 그놈!깜짝 놀랐죠!

'그놈'이란 이런 느낌으로 오른쪽 하단 에이프바에 들어가는 플라팅 액션 버튼이다.
이번에는 그것을 실시해 보자.
이번 목표는 이런 느낌.

사전 준비

app/build.gradle에 필요한 것을 추가합니다.
build.gradle

dependencies {
    implementation 'androidx.appcompat:appcompat:1.0.0-rc01'
    implementation 'com.google.android.material:material:1.0.0-rc01'
}

BottomAppBar 설정

이번에 구현하려는 방법을 구현하기 위해 Bottom AppBar를 활용합니다.
또한, Bottom AppBar는 반드시 부모님께 Coordinator Layout을 가져다 드려야 한다는 것을 주의하세요.
activity_main.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!-- ... -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

여기까지 이렇게 나와요!

FlatingAction Button 설정

그런 다음 FlatingActionButton을 드릴다운하도록 설정합니다.
activity_main.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!-- ... -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:backgroundTint="#008577"
        app:fabAlignmentMode="center" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_attach_money_white_24dp"
        app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

중요한 것은

app:layout_anchor="@id/bottom_app_bar"

이 부분이야.
이 줄만 있으면 Bottom AppBar에 설정할 수 있습니다.
한 걸음에 FlatingAction Buton은 Bottom AppBar에 들어갔습니다.

그나저나 Bottom AppBar의

app :fabAlignmentMode="center"

end로 변경되면 FlatingAction Buton이 오른쪽에 설정됩니다.

덤

너무 간단해서 Bottom AppBar에 Bottom NavigationView를 추가합니다.
먼저 res/menu/bnv BottomNavigationView로 표시된 메뉴menu.xml 준비.
bnv_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item1"
        android:icon="@android:drawable/ic_btn_speak_now"
        android:title="item1" />

    <item
        android:id="@+id/item2"
        android:icon="@android:drawable/ic_delete"
        android:title="item2" />
</menu>

그런 다음 Bottom NavigatoinView를 Bottom AppBar에 추가합니다.
activity_main.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

 <!-- ... -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:backgroundTint="#008577"
        app:fabAlignmentMode="end">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:itemIconTint="#ffffff"
            app:itemTextColor="#ffffff"
            app:menu="@menu/bnv_menu" />

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_attach_money_black_24dp"
        app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

이렇게 되면 아래 화면이 완성됩니다!

BottomNavigationView의 Item을 선택할 때 화면(Fragment)을 전환하려면 다음과 같이 하십시오.
MainActivity.kt

bottomNavigationView.setOnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.item1 -> {
            setFragment()
            return@setOnNavigationItemSelectedListener true
        }
        R.id.item2 -> {
            setFragment()
            return@setOnNavigationItemSelectedListener true
        }
        else -> {
            setFragment()
            return@setOnNavigationItemSelectedListener true
        }
    }
}

총결산

아주 간단하게 이루어졌습니다!
이걸 잘 활용하면 돈도 많고 멋진 그림을 만들 수 있을지도 몰라요!