Extended Floating Action Button is the newly introduced class with Material Components library in Android.

Material Components is introduced with SDK 28 or Android P. It’s a superset of Support Design Library with lots of new additions and improvements. In this tutorial, we’ll be focusing on Extended FAB an extension of Floating Action Button.

Extended Floating Action Button

Much like its name, it extends the floating action button.
Talking about functionality, Extended FAB contains a text alongside the icon to provide more info.

This class is extended from the MaterialButton class and not the FloatingActionButton.

An extended fab is wider in width than a FAB. Though it can be shrunk to show icon only depending on the behavior you choose.

To use an Extended FAB we need to import the google material components dependency as shown below (the version number might be higher than the one below when you are reading this):

Note: Material components require the activity to have a Theme.MaterialComponents or descendants dependency.

Here’s how we define an extended FAB in our layout:

Difference between FAB and Extended FAB

  • An extended FAB contains text alongside the icon.
  • To set an icon in the extended fab we use the app:icon attribute.
  • To set an icon in the fab widget we use the app:srcCompat attribute.

Following are some of the attributes and methods used in Extended FAB:

  • app:icon
  • app:iconSize
  • app:iconPadding
  • app:iconTint
  • app:iconTintMode
  • app:strokeColor
  • app:strokeWidth
  • app:rippleColor

To show or hide the extended FAB, we use show() and hide() methods. setVisibility does not work with Material Components.

To shrink or grow the extended FAB, shrink() and extend() methods can be used. In order to apply animation we can pass a boolean inside the methods.

Shrink mode resembles FAB with the text label hidden.

addOnShrinkAnimationListener is used to listen to the callbacks when the shrinking begins on an Extended FAB.

Now let’s implement extended FAB in an Android Studio project.

Project Structure



Android Extended Fab Project Structure


The code for activity_main.xml layout is given below:

We’ve covered the different attributes that can be used in Extended FAB.
Two primary styles available:

  • Widget.MaterialComponents.ExtendedFloatingActionButton – Should be used when extended FAB contains text only in order for them to behave like a text button
  • Widget.MaterialComponents.ExtendedFloatingActionButton.Icon

The code for the MainActivity.java class is given below:

The output of the above application in action is given below:

Android Extended Fab Output

Android Extended Fab Output

That brings an end to this tutorial. You can download the project from the link below:

By admin

Leave a Reply

%d bloggers like this: