Material-components-android: Add new `Extended FAB` component

[sfdexter]

https://material.io/go/design-extended-fab

[mattpeskett]

An extended FAB was added to material-components-web here. Can we expect the same for Android anytime soon?

[benju69]

Any news ? Any deadline ?

[javadhme]

Is the material component supporting of this mode?

[GuiOliveira1995]

I can't find anything on internet. Hope they include android code soon.

[firatkarababa]

Extended FAB component will not be available as a part of Material Components till August at least, based on the roadmap.

[simonesestito]

@firatkarababa I can't see it in Android roadmap anymore. In July release I see "--" while every other platform has it.
Am I missing anything?

[firatkarababa]

@simonesestito you are right, it seems there is no release information about Extended FAB now. I am not sure but it may come with Shape Theme release.

[simonesestito]

I've been able to reproduce a FAB using MaterialButton. If you want to give a look, I've created a public Gist
https://gist.github.com/simonesestito/edf434544ed8bf6ef23ae5e9af625149

@benju69 @firatkarababa @GuiOliveira1995 @mattpeskett

[friederikewild]

Any news from the official site, when then Extended FAB will be added to Android? Still nothing on the future Roadmap :(

Great initiative @simonesestito 👍 I'll check that out as work-around since my designer already jumped at the new cool elements

[cdmistman]

@simonesestito I wonder if there's a way to inherit the Extended FAB from the standard FAB as well as Material Button (ie class ExtendFAB extends FAB implements MaterialButton) so we can use it anchored to a BottomAppBar...

[simonesestito]

@donnellycolton I would like to do that, but I haven't been able to.

Curiosity: I've just decompiled Google Tasks app and I was surprised to find a themed MaterialButton to reproduce the extended FAB

[tunjid]

I wrote a helper that animates a MaterialButton to a FloatingActionButton and back.

Full source can be seen here:

If you want to add it as a dependency to your project please see the readme for the project, you can also read about the implementation details here 😊

Here's a gif of it in action:

[AKalloe]

Hi there, any news on when this feature will be completed?

[joshfriend]

@AKalloe google will never comment on when a feature will be done. If the feature does not currently exist, the answer to your question will always be "not yet"

[nibmz7]

Can be achieved like so here. The output will look something like this.

Usage looks like this
<com.google.android.material.button.MaterialButton android:id="@+id/fab_qibla" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/Widget.PrayerTimes.FABlikeButton" app:icon="@drawable/ic_compass" android:text="Qibla Finder" app:layout_constraintTop_toBottomOf="@id/guideline" app:layout_constraintBottom_toBottomOf="@id/guideline" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:cornerRadius="32dp" />

[carstenhag]

Note: @nurilyas7's solution will not work in current projects.

android:textAppearance="?android:attr/textAppearanceLargeInverse" has to be declared too or inflating the xml will fail.

[judemanutd]

This worked quite well for me

 <com.google.android.material.button.MaterialButton
        android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="64dp"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginBottom="@dimen/fab_margin"
        android:elevation="@dimen/fab_elevation"
        android:text="@string/fab_text"
        android:textColor="@color/textOnAccent"
        android:textSize="14sp"
        app:backgroundTint="@color/colorAccent"
        app:cornerRadius="32dp"
        app:icon="@drawable/ic_night_mode"
        app:iconTint="@color/textOnAccent" />

[ldjcmu]

ExtendedFab will land in in the next alpha release (alpha-1.0.4). We'll start tracking individual issues for this component.

[AnkitPatanaik]

@ldjcmu when will ExtendedFab make it out of alpha?

[ldjcmu]

I unfortunately don't know when we will have a stable release as this is dependent on some other Google teams in our case.

For extended FAB specifically, we have no major plans to change the API, but it is possible that some things such as renamings happen before stable.