Extended FAB を BottomAppBarにめり込ませる (なろうリーダー(仮) 4日目)

やりたいこと

• 【大目標】 小説家になろうの小説ダウンロードAndroidアプリの作成。
• 【この記事のゴール】Extended FAB を BottomAppBarにめり込ませたい。
• ズバリこれ。

Extended FABって何？

Google I/O 2018から利用可能になったテキスト付きのFloating Action Button。
詳細は Material I/O にあります。

BottomAppBarって何？

• Material I/Oで規定された画面下部の操作用インタフェース。
• BottomNavigationView にFABが付いたイメージ。

実装➀ FAB + BottomAppBar

• Material Components for Android を利用します。
• @furusin_oriverさんの記事 を参考に実装。
• Material Components同士でお互いに気を利かせあって、コード量も少なく実装できていい感じです。

Build.gradle

dependencies {
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'com.google.android.material:material:1.0.0-alpha1'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
}

layout/fragment_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_menu_search"
        app:layout_anchor="@id/bottom_app_bar"
        app:fabSize="normal"/>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:fabAttached="true"
        app:navigationIcon="@android:drawable/ic_menu_upload" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Extended FAB実装にあたっての課題

• 課題➀ FloatingActionButtonの拡張がむつかしい。
  • 上記のFloatingActionButtonにsetText()なんて気の利いたものはありません。
  • drawableあたりに「アイコン＋テキスト画像」を設定したとしても、真円である事は変わりません。
• 課題➁ BottomAppBarもExtended FABに対応していない。
  • fabCradleDiameterに値を設定してみたらよくわかります。BottomBarを円でくりぬいてるだけだ…

layout/fragment_main.xml

    <com.google.android.material.bottomappbar.BottomAppBar
        ...
        app:fabCradleDiameter="128dp" />

→ 結論： Material Componentsさんに頼るのが厳しいことが判明。

実装➁　MaterialButton を拡張して Extended FAB を実装する。

• 世の中ではMaterialButtonやButtonを拡張してExtended FABを実装している人が多い模様。
• TJ氏の記事 などを参考に ExtendedFAB(っぽいMaterialButton)を作ります。

layout/fragment_main.xml

        <com.google.android.material.button.MaterialButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="小説を探す"
            android:gravity="center"
            app:layout_anchorGravity="top|center"
            android:paddingStart="12dp"
            android:paddingEnd="20dp"
            app:cornerRadius="32dp"
            app:iconPadding="12dp"
            app:icon="@android:drawable/ic_menu_search"
            style="@style/Widget.Design.FloatingActionButton"
            app:layout_anchor="@id/bottom_app_bar"
            />

実装③　BottomAppBar をくりぬきます。

• Extended FAB よりも一回りほど大きく背景と同化する 背景FAB をもう一つ作ります。
  • 背景FABの横はExtended FABと合わせ、anckerはBottomAppBarとします。
  • 背景FABのelevation(高さ)を 0dp とし、BottomAppBarのelevationを -1 dpとします。
  • Viewはdisable固定とします。

layout/fragment_main.xml

        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" 小説を探す "
            android:gravity="center"
            android:textColor="@color/background"
            android:backgroundTint="@color/background"
            android:paddingStart="12dp"
            android:paddingEnd="10dp"
            android:layout_gravity="center"
            app:cornerRadius="24dp"
            app:iconPadding="12dp"
            app:icon="@android:drawable/ic_search_category_default"
            android:layout_alignLeft="@id/fab"
            android:layout_alignRight="@id/fab"
            app:layout_anchor="@id/bottom_app_bar"
            app:layout_anchorGravity="top|center"
            android:enabled="false"
            />

    <com.google.android.material.bottomappbar.BottomAppBar
        ...
        android:elevation="-1dp" />

まとめ

• FAB を BottomAppBarにめり込ませるのは可能です。
• Extended FABを作ることも可能です。
• Extended FABをBottomAppBarにめり込ませるのは困難です（どなたか、よい解決策があればご教示いただけると幸いです)