Extended FAB を実装するモチベーションはFAB をよりユーザーにわかりやすく実装するため

普通のアイコンだけのFAB だけで実装してましたが、「アイコンだけでは何をするためのものかすぐに理解して使い始めることができない」という問題が出てきました。

当初考えたのは、FAB を長押しすればヒントが出るとかそうすれば良いのかなーとか考えてました。けど、長押しするとヒントが出てくるって思わなくない？w

そこでテキスト付きFAB こと Extended FAB を使ってみようかなと。とはいえ、標準ではまだ実装が存在してないみたいなので自力で頑張ってみました...

Material Design ２(?) に導入された Extended FAB はテキスト付きFAB みたいなもの

Extended FAB は Google I/O 2018 で追加されたもので既存のFAB にテキストをつけれるようにしたものです。

ガイドライン的なのは以下のウェブサイトに乗ってます。

material.io

コンテナの中にテキストラベルが存在してて、オプション要素としてアイコンがあるって感じいらしいです。

公式サイトより引用

実装方針は 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"/>