하고 싶은 일

【대목표】 소설가가 되자의 소설 다운로드 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을 -1dp로 합니다.

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에 밀어 넣는 것은 어렵습니다.