Extended FABを作る回

前回のブログに続きMaterial Components for Androidのお話です。
material.ioを参考にUIデザインをしてると意外と自力で作らなきゃいけない部品とかが出てくるので、作ってみようと。

やりたかったこと

下のリンクに出てくるExtended FAB (= アイコン以外にテキストも書いてある横長なfab)を使いたかった

やったこと

愚直にxmlをモチモチしました。
特に凝ったことはしてないので以下にxmlのやつを置いておきます。

<style name="extendedFab">
    <item name="android:elevation">6dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:paddingEnd">20dp</item>
    <item name="android:paddingStart">12dp</item>
    <item name="cornerRadius">32dp</item>
    <item name="iconPadding">12dp</item>
</style>

<com.google.android.material.button.MaterialButton
        style="@style/extendedFab"
        android:id="@+id/fab_save"
        android:text="save"
        app:icon="@drawable/ic_done_white_24dp"/>

上の感じで作ったものが以下です。
MaterialButtonにapp:cornerRadiusを設定するだけでもいい感じにはなるのですが、そこはgoogleさん準拠で頑張りたいなと思ったので他にも色々やりました。

特にstyle name="extendedFab"に入っているものはmaterial.ioのfabのspacesを参考にいい感じにしたつもりなのでいい感じにそれっぽいはずです。
あとはMaterialButtonの位置をいい感じに整えてあげればこれであなたもExtended FABer (なはず)

終わりに

上にも書いた通りちょっとButtonの角を大きめに丸めるだけでもそれっぽくはなるのですが、このExtended FAB、普通のfabとデフォルトの大きさが違ったり意外と面倒なのでそこの標準にこだわりたいなら是非もう一手間を、といった内容でした。