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

11204 ワード
MaterialDesign FloatingActionButton Android ExtendedFAB BottomAppBar Android テキストリンク

やりたいこと

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

Extended FABって何？


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

BottomAppBarって何？

実装➀ FAB + BottomAppBar

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にめり込ませるのは困難です（どなたか、よい解決策があればご教示いただけると幸いです)