How to add Extended Floating Action Button in Android App

Ayushi Agarwal

24 January 2024

An Extended Floating Action Button displays the primary action in an application.

The Extended FAB is wider than the regular FloadtingActionButton, and it includes a text label.

Extended floating action buttons adjust their position and visibility in response to other UI elements on the screen.

The ExtendedFloatingActionButton widget provides a complete implementation of Material Design’s extended FAB component

Note: ExtendedFloatingActionButton is a child class of Material Button, rather than FloatingActionButton. This means that several attributes which are applicable to FloatingActionButton have different naming in ExtendedFloatingActionButton.

You just need to follow few steps to add ExtendedFloatingActionButton in your app ->

Compile your app with Android P

In order to use Material Components for Android, and the latest versions of the Support Libraries, you will have to update your app’s complieSdkVersion to 28

Dependency –

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

1	implementation 'com.google.android.material:material:1.1.0-alpha07'

You also need to migrate your project with AndroidX.

For AndroidX migration, you can refer this link -> AndroidX

In XML –

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
                android:id="@+id/exFb"
                style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="Add"
                android:contentDescription="@string/appbar_scrolling_view_behavior"
                app:icon="@android:drawable/ic_input_add"/>

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton

android:id="@+id/exFb"

style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="20dp"

android:text="Add"

android:contentDescription="@string/appbar_scrolling_view_behavior"

app:icon="@android:drawable/ic_input_add"/>

In Style File –

You need to change your app theme to inherit from a Material Components theme.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

1	<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

Note: You can use any child of “Theme.MaterialComponents” as a parent theme of your application.

Now, if you want to expand or shrink your button at any point, you need to call only two methods ->

shrink() -> to shrink your fab button
extend() -> to extend your fab button

To learn more about material extend floating action button, you can refer this link – Material Extended Floating Action Button

Hope, this blog is helpful for you to add Extended Floating Action Button in android app.