How use the real Floating Action Button (FAB) Extended?

1. Add the dependencies in your Gradle file:

implementation 'com.google.android.material:material:1.1.0-alpha04'

in your xml file:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_margin="@dimen/fab_margin"
            android:text="Create"
            app:icon="@drawable/outline_home_24" />

You can create a utility class that animates a MaterialButton to an Extended FloatingActionButton using a ConstraintLayout. You'll first need to declare the two states of the MaterialButton in xml, and then use the TransitionManager to animate between them.

You can read a medium post about it here, in the meantime, I'll add bits of relevant code here.

Collapsed FAB state:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/extend_fab_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_fab"
    android:elevation="8dp">

    <android.support.design.button.MaterialButton
        android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_width="56dp"
        android:layout_height="56dp"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Extended FAB State:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/extend_fab_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="8dp"
    android:background="@drawable/bg_fab">

    <android.support.design.button.MaterialButton
        android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Background Drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent" />
    <corners android:radius="56dp" />
</shape>

And relevant Java Expansion code:

private void setExtended(boolean extended, boolean force) {
    if (isAnimating || (extended && isExtended() && !force)) return;

    ConstraintSet set = new ConstraintSet();
    set.clone(container.getContext(), extended ? R.layout.fab_extended : R.layout.fab_collapsed);

    TransitionManager.beginDelayedTransition(container, new AutoTransition()
            .addListener(listener).setDuration(150));

    if (extended) button.setText(currentText);
    else button.setText("");

    set.applyTo(container);
}

You can use this library to do that. (I used another way) But I used a FancyButton to create a round and awesome button in coordinator layout as below:

    <mehdi.sakout.fancybuttons.FancyButton
    android:id="@+id/actMain_btnCompare"
    app:layout_behavior="@string/fab_transformation_sheet_behavior"
    android:layout_width="125dp"
    android:layout_height="38dp"
    android:layout_gravity="bottom|center"
    android:layout_margin="20dp"
    android:elevation="3dp"
    android:padding="2dp"
    fancy:fb_borderColor="@color/white"
    fancy:fb_borderWidth="3dp"
    fancy:fb_defaultColor="@color/colorPrimaryDark"
    fancy:fb_radius="20dp"
    fancy:fb_text="مقایسه محصول"
    fancy:fb_textColor="@color/white"
    fancy:fb_textGravity="center"
    fancy:fb_textSize="13sp" />

and result is:

That can have icon in it (see FancyButton).

with app:layout_behavior="@string/fab_transformation_sheet_behavior" it acts like fab as below:

Good luck.