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

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

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/306047/43e104f3-cfeb-f2f3-dfa3-a3e622bb52a6.png)

# Extended FABって何？
![mio-design_assets_1nwZJdz065h8Hid2DKIXHnFR03IYDZ4Ri_extended-fab-layout-elements.png](https://qiita-image-store.s3.amazonaws.com/0/306047/f76d13b3-b0fb-12ae-edd2-92389920ac1d.png)
Google I/O 2018から利用可能になったテキスト付きのFloating Action Button。
詳細は [Material I/O](https://material.io/design/components/buttons-floating-action-button.html#extended-fab) にあります。

# BottomAppBarって何？
![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/306047/e927d944-4e3c-72c8-3352-d44cbc0b0395.png)

* [Material I/O](https://material.io/develop/android/components/bottom-app-bar/)で規定された画面下部の操作用インタフェース。
* [BottomNavigationView](https://developer.android.com/reference/android/support/design/widget/BottomNavigationView) にFABが付いたイメージ。

# 実装➀ FAB + BottomAppBar
* [Material Components for Android](https://github.com/material-components/material-components-android) を利用します。
* [@furusin_oriverさんの記事](https://qiita.com/furusin_oriver/items/d7b3c6504b892c353d63) を参考に実装。
* Material Components同士でお互いに気を利かせあって、コード量も少なく実装できていい感じです。

![無題3.png](https://qiita-image-store.s3.amazonaws.com/0/306047/3b7197a5-c6b8-4bd0-2ffd-f8e0acc38a99.png)


```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を円でくりぬいてるだけだ…**
![無題4.png](https://qiita-image-store.s3.amazonaws.com/0/306047/4e5f1ec5-5ac5-6de2-3f61-e9b750112390.png)

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

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

# 実装➁　MaterialButton を拡張して Extended FAB を実装する。
* 世の中では`MaterialButton`や`Button`を拡張してExtended FABを実装している人が多い模様。
* [TJ氏の記事](https://proandroiddev.com/creating-an-expandable-floating-action-button-in-android-6626b968559e) などを参考に `ExtendedFAB`(っぽい`MaterialButton`)を作ります。

![無題5.png](https://qiita-image-store.s3.amazonaws.com/0/306047/891c8185-77de-e172-d404-f6528e9b581e.png)

```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固定とします。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/306047/43e104f3-cfeb-f2f3-dfa3-a3e622bb52a6.png)



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