Using Extended Floating Action Button

You may have seen gmail app where fab button expand and collapse as you scroll. fab button has been already there for some time new api extended dab button was added some time back. to use extended fab button you need to use com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton

simplest implementation looks like below :

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/floating_action_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_marginEnd="24dp"
    android:layout_marginBottom="24dp"
    android:contentDescription="fab button"
    android:text="Add Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:icon="@drawable/ic_baseline_add_24" />

Now say you want to change background colors and other things to fab button how you would do it.

you can create custom style for your fab button :

<style name="Widget.App.ExtendedFloatingActionButton" parent="Widget.MaterialComponents.ExtendedFloatingActionButton.Icon">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingActionButton</item>
    <item name="shapeAppearanceOverlay">
        @style/ShapeAppearance.App.SmallComponent
    </item>
</style>

<style name="Widget.App.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.FloatingActionButton</item>
    <item name="shapeAppearanceOverlay">
        @style/ShapeAppearance.App.SmallComponent
    </item>
</style>

<style name="ThemeOverlay.App.FloatingActionButton">
    <item name="colorSecondary">#ADD8E6</item>
    <item name="colorOnSecondary">#000000</item>
    <item name="colorOnSurface">#ADD8E6</item>
</style>

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">20dp</item>
</style>

as above example cornerFamily uses rounded or cut property to shape your fab button and corner size in dp to how much you want to be.

to color the Fab button you need yo apply colorSecondary property which changes color of the fab button. colorOnSecondary will be useful to change the text color of the fab button.

this property you can apply to parent theme like below :

<item name="extendedFloatingActionButtonStyle">@style/Widget.App.ExtendedFloatingActionButton</item>
<item name="floatingActionButtonStyle">@style/Widget.App.FloatingActionButton</item>

above example will look like this :

you may face problem with this style if your parent application theme is not part of Theme.MaterialComponents

to expand and collapse fab button material library provided expand and collapse api

.expand()

.collapse()

If you want to do something like gmail app which expand and collapse your layout need to have appbar collapsing toolbar and some scrolling component like recyclerview

below is the sample layout we have :

<?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.appbar.AppBarLayout
        android:id="@+id/app_bar_home"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <LinearLayout
                app:layout_collapseMode="parallax"
                android:background="#ADD8E6"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_animals"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="24dp"
        android:contentDescription="fab button"
        android:text="Add Button"
        app:icon="@drawable/ic_baseline_add_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

here we are using scrolling behaviour and parallax effect to have our top bar collapse with recyerview scroll now say we want our fab to exapand collapse given it has no property currently to apply like scrolling behavior to take care of directly you can use app bar behavior from your layout to expand and collapse like below :

findViewById<AppBarLayout>(R.id.app_bar_home).addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener {
    appBarLayout: AppBarLayout, _: Int ->
    if (appBarLayout.height > appBarLayout.bottom) {
        fab.shrink()
    } else {
        fab.extend()
    }
})

below is the video how it looks with scrolling