Android Extended Floating Action Button

Filed Under: Android

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):


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:


<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: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

Android Extended Fab Project Structure

Code

The code for activity_main.xml layout is given below:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://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:


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

Android Extended Fab Output

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

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages