こんにちは。ピクトリンク事業部の古川です。

今回は、Google IO 2018アプリで突如現れて衝撃的だった、BottomAppBarにめり込んだFloatingActionButtonの実装方法を紹介します。

このようなレイアウトです。

fabWithBottonAppBar

下部のView(ここではおそらくBottomAppBarのみ)にFloatingActionButtonがめり込んでいて、被る部分はうまく避けられています。

今回の最終形態は次のような画面を目指します。

bottomnavigationviewsample-MainActivity-08212018170527

事前準備

app/build.gradleに必要なものを追加します。

 

BottomAppBarを設置する

今回実装したい方法を実現するには、BottomAppBarを利用します。

また、BottomAppBarはCoordinatorLayoutを親に持つ必要があることに注意してください。

ここまでで、次のようなとてもシンプルな画面が完成しました。

bottomnavigationviewsample-MainActivity-08212018173254

ちなみに

の「56dp」は、Google IO 2018アプリBottomNavigationViewの高さを参考にしました。

Material Design Guidelineにも56dpにするように指定されています

FloatingActionButtonを設置する

次に、めり込ませるFloatingActionButtonを設置します。

重要なのは

この部分です。

この1行だけで、BottomAppBarによしなに設置してくれます。

これだけで、BottomAppBarにFloatingActionButtonがめり込みました。

bottomnavigationviewsample-MainActivity-08212018173937

ちなみに、BottomAppBarの

を “end” に変えると、FloatingActionButtonが右側に設置されます。

bottomnavigationviewsample-MainActivity-08212018174105

おまけ

これだけだとシンプルすぎるので、BottomAppBarにBottomNavigationViewを追加します。

まずはBottomNavigationViewで表示するためのメニューを res/menu/bnv_menu.xml に用意します。

次に、BottomNavigatoinViewをBottomAppBarの中へ追加します。

これで次のような画面が完成しました!

bottomnavigationviewsample-MainActivity-08212018170527

BottomNavigationViewのItemが選択された時に画面(Fragment)を切り替えたい場合は次のようにします。

まとめ

とても簡単に実装できました!

これをうまく活用すれば、リッチでかっこいい画面が作れるかもしれませんね!