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

Question

To remove any doubts or thoughts about duplicate: on Material Design is defined what is "extended".

But most of the people confuses "extended" with "Type of Transition: Speed Dial", what make hard to find solutions. Like here

Question So what I'm looking forward is how setup the FAB with text and a extended size.

Today my code is like this:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/maps_main_distance_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="@string/str_distance_btn"
    app:elevation="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

But my button look like this:

No text and no right format. I'm using it in a Constraint Layout.

Answer 1

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" />