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.
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):
|
1 2 3 |
implementation 'com.google.android.material:material:1.1.0-alpha09' |
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:
|
1 2 3 4 5 6 7 8 9 |
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/extFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="CLEAR" app:icon="@android:drawable/ic_delete"/> |
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:iconattribute. - To set an icon in the fab widget we use the
app:srcCompatattribute.
Following are some of the attributes and methods used in Extended FAB:
app:iconapp:iconSizeapp:iconPaddingapp:iconTintapp:iconTintModeapp:strokeColorapp:strokeWidthapp: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
Code
The code for activity_main.xml layout is given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" tools:context=".MainActivity"> <TextView android:text="Default" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/extFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="CLEAR" app:icon="@android:drawable/ic_delete"/> <TextView android:text="With Padding.." android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/extFab2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="CLEAR" app:iconPadding="40dp" app:icon="@android:drawable/ic_delete"/> <TextView android:text="Without Icon" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/extFab3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="CLEAR" /> <TextView android:text="Without Icon, With Text Style" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/extFab4" style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="CLEAR" /> <TextView android:text="Ripple, Icon Tint, Background Tint, Text Color" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/extFab6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" app:icon="@android:drawable/ic_delete" app:iconTint="@android:color/holo_red_dark" app:rippleColor="@android:color/holo_red_light" android:textColor="@android:color/holo_red_dark" app:backgroundTint="@android:color/holo_orange_light" android:text="CLEAR" /> <TextView android:text="Strokes, Icon Size" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/extFab7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" app:icon="@android:drawable/ic_delete" app:iconTint="@android:color/holo_red_dark" app:rippleColor="@android:color/holo_red_light" android:textColor="@android:color/holo_red_dark" app:strokeColor="@android:color/holo_red_dark" app:iconSize="32dp" app:strokeWidth="4dp" app:backgroundTint="@android:color/white" android:text="CLEAR" /> </LinearLayout> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
package com.journaldev.androidextendedfab; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton; public class MainActivity extends AppCompatActivity implements View.OnClickListener { ExtendedFloatingActionButton extendedFAB; ExtendedFloatingActionButton extendedFAB2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); extendedFAB = findViewById(R.id.extFab); extendedFAB2 = findViewById(R.id.extFab2); extendedFAB2.setOnClickListener(this); extendedFAB.setOnClickListener(this); } @Override public void onClick(View view) { switch (view.getId()) { case R.id.extFab: if(extendedFAB.isExtended()) { extendedFAB.shrink(true); } else{ extendedFAB.extend(true); } break; case R.id.extFab2: if(extendedFAB.isShown()) extendedFAB.hide(true); else { extendedFAB.show(true); } break; } } } |
The output of the above application in action is given below:
Android Extended Fab Output
That brings an end to this tutorial. You can download the project from the link below: