Extended FAB を実装するモチベーションはFAB をよりユーザーにわかりやすく実装するため
普通のアイコンだけのFAB だけで実装してましたが、 「アイコンだけでは何をするためのものかすぐに理解して使い始めることができない」という問題が出てきました。
当初考えたのは、FAB を長押しすればヒントが出るとかそうすれば良いのかなーとか考えてました。けど、長押しするとヒントが出てくるって思わなくない?w
そこでテキスト付きFAB こと Extended FAB を使ってみようかなと。とはいえ、標準ではまだ実装が存在してないみたいなので自力で頑張ってみました...
Material Design 2(?) に導入された Extended FAB はテキスト付きFAB みたいなもの
Extended FAB は Google I/O 2018 で追加されたもので既存のFAB にテキストをつけれるようにしたものです。
ガイドライン的なのは以下のウェブサイトに乗ってます。
コンテナの中に テキストラベルが存在してて、オプション要素としてアイコンがあるって感じいらしいです。
公式サイトより引用
実装方針は Material Button にスタイルを当てて微調整して実装
今回は、 基となるUI コンポーネントに material button
を利用しました。
そこに、 Floating Action Button
のスタイルを当てて、空白等を微調整したって感じです。
具体的な実装コード
以下のようなコードをとりあえず書きました。細かい部分ではまだまだ調整が必要そうですがとりあえずはそれっぽいものが実装できます。
ラベルとアイコン周りの空白の調整に苦戦
Extended FAB は横の幅にゆとりがあるような実装になっています。
Material Button
のアイコン周りに Padding を効かせれるのとかは初めて知りましたw
実装のコード
<com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="新しいタスクを追加" app:layout_anchor="@id/bottom_app_bar" app:layout_anchorGravity="top|center" android:textSize="12sp" app:cornerRadius="24dp" android:padding="12dp" app:iconSize="24sp" app:iconPadding="8dp" style="@style/Widget.Design.FloatingActionButton" app:icon="@drawable/ic_baseline_search_24px"/>
実装
Extended FABっぽいもの実装できた!!(Todoアプリの文言に変えてる pic.twitter.com/Qpd01IANk4
— くぅ寿司大好き🍣 (@Fumiya_Kume) October 29, 2018