Open In App

Extended Floating Action Button in Android with Example

Improve
Improve
Like Article
Like
Save
Share
Report

In the Floating Action Button (FAB) article, we have discussed on Normal/Regular Floating Action Button and Mini Floating Action Button. In this article, let’s discuss and implement an Extended Floating Action Button in android which extends when clicked and shrinks when closed and also shows the information about the sub-floating action button for what the context the sub-floating action buttons have popped up. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Prerequisite: Floating Action Button (FAB) in Android with Example

Sample GIF

Steps for Creating Extended Floating Action Button

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add a dependency to the app level Gradle file.

  • Here we are using the Floating action button which is designed and developed by Google Material Design Team.
  • Add the dependency in the build.gradle(app) file as:

implementation ‘com.google.android.material:material:1.3.0-alpha02’

  • Make sure that add the dependency to the app level Gradle file. After adding the dependency you need to click on the “Sync Now” button which appears at the top right corner of the Android Studio IDE.
  • When you click on the Sync Now button make sure that you are connected to the network so that it can download the required files.
  • Refer the below image if you can’t get the steps mentioned above or if you can’t locate the app level Gradle file:

Gradle File

Step 3: Change the base application theme in styles.xml file

  • The theme needs to be changed as the ExtendedFloating action button is the child class of the Google Material Design Buttons. So it needs the MaterialComponent theme to be applied to the Base theme of the application. Otherwise, the app will crash immediately as soon as we launch the application.
  • You may refer to this article: Material Design Buttons in Android with Example, as the ExtendedMaterial design button is child class of the Material design buttons. The article says, the advantages of having Material design buttons, and why the theme needs to be changed.
  • Go to app -> src -> main -> res -> values -> styles.xml and change the base application theme. The MaterialComponents contains various action bar theme styles, one may invoke any of the MaterialComponents action bar theme styles, except AppCompat styles. Below is the code for the styles.xml file.

XML




<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>


If you are unable to get the things in the step mentioned above you may refer to this image.

styles.xml

Step 4: Import some of the vector icons in the drawable folder

  • In this case, simple add vector, add alarm, vector, add person vector icons are imported for demonstration purpose.
  • To import any vector in the project one needs to right-click on the drawable folder -> New -> Vector Asset.
  • A new pop window will be opened and choose any vector you want by clicking on the Clip Art button.
  • You can refer the following image to how to open the vector asset selector.

Vector Asset

  • You may refer the following image to how to locate the Clip Art button and choose the vectors.

Clip art

Step 5: Working with the activity_main.xml file 

  • In the activity_main.xml file which add the Extended Floating Action Button (FAB).
  • Invoke the following code inside the activity_main.xml file. For clear understanding refer the comments inside the code given below:

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <!--This will be the parent Floating Action Button-->
    <!--After the implementation the Floating Action Button at
         the bottom right corner as we have constrained accordingly-->
    <!--After clicking the above button the
        following two buttons will pop up.
         So this button is considered as parent FAB-->
    <!--After opening the application it looks like regular
        FAB but after user clicks it, it extends-->
    <!--This functionality has been handled in the MainActivity.java-->
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/add_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:backgroundTint="@color/colorAccent"
        android:text="Actions"
        app:icon="@drawable/ic_add_black_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
 
    <!--Floating action button for add alarm-->
    <!--Make sure that you are constraining this
        button to the parent button-->
    <!--Make sure to add backgroundTint attribute to match
         the entire application color-->
    <!--because after changing the base application theme the color
         of the FAB is set Blue as default-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_alarm_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:backgroundTint="@color/colorAccent"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/add_fab"
        app:layout_constraintEnd_toEndOf="@+id/add_fab"
        app:srcCompat="@drawable/ic_add_alarm_black_24dp" />
 
    <!--Action name text for the add alarm button-->
    <!--Make sure that you are constraining this
        Text to the add Alarm FAB button-->
    <TextView
        android:id="@+id/add_alarm_action_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Add Alarm"
        app:layout_constraintBottom_toBottomOf="@+id/add_alarm_fab"
        app:layout_constraintEnd_toStartOf="@+id/add_alarm_fab"
        app:layout_constraintTop_toTopOf="@+id/add_alarm_fab" />
 
    <!--Floating action button for add person-->
    <!--Make sure that you are constraining this button
        to the add Alarm FAB button-->
    <!--Make sure to add backgroundTint attribute to match
         the entire application color-->
    <!--because after changing the base application theme
         the color of the FAB is set Blue as default-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_person_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:backgroundTint="@color/colorAccent"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/add_alarm_fab"
        app:layout_constraintEnd_toEndOf="@+id/add_alarm_fab"
        app:layout_constraintStart_toStartOf="@+id/add_alarm_fab"
        app:srcCompat="@drawable/ic_person_add_black_24dp" />
 
    <!--Action name text for the add person button-->
    <!--Make sure that you are constraining this Text
         to the add Person FAB button-->
    <TextView
        android:id="@+id/add_person_action_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Add Person"
        app:layout_constraintBottom_toBottomOf="@+id/add_person_fab"
        app:layout_constraintEnd_toStartOf="@+id/add_person_fab"
        app:layout_constraintTop_toTopOf="@+id/add_person_fab" />
 
</androidx.constraintlayout.widget.ConstraintLayout>


Step 6: Working with the MainActivity.java file 

  • Before proceeding to see the output it’s better to handle the Parent Floating Action Button and its sub Floating Action Buttons, as if it is not done you may end up getting some unusual output.
  • To handle them invoke the following code in the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
 
public class MainActivity extends AppCompatActivity {
 
    // Use the FloatingActionButton for all the add person
    // and add alarm
    FloatingActionButton mAddAlarmFab, mAddPersonFab;
 
    // Use the ExtendedFloatingActionButton to handle the
    // parent FAB
    ExtendedFloatingActionButton mAddFab;
 
    // These TextViews are taken to make visible and
    // invisible along with FABs except parent FAB's action
    // name
    TextView addAlarmActionText, addPersonActionText;
 
    // to check whether sub FABs are visible or not
    Boolean isAllFabsVisible;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // Register all the FABs with their appropriate IDs
          // This FAB button is the Parent
        mAddFab = findViewById(R.id.add_fab);
        // FAB button
        mAddAlarmFab = findViewById(R.id.add_alarm_fab);
        mAddPersonFab = findViewById(R.id.add_person_fab);
 
        // Also register the action name text, of all the
        // FABs. except parent FAB action name text
        addAlarmActionText = findViewById(R.id.add_alarm_action_text);
        addPersonActionText = findViewById(R.id.add_person_action_text);
 
        // Now set all the FABs and all the action name
        // texts as GONE
        mAddAlarmFab.setVisibility(View.GONE);
        mAddPersonFab.setVisibility(View.GONE);
        addAlarmActionText.setVisibility(View.GONE);
        addPersonActionText.setVisibility(View.GONE);
 
        // make the boolean variable as false, as all the
        // action name texts and all the sub FABs are
        // invisible
        isAllFabsVisible = false;
 
        // Set the Extended floating action button to
        // shrinked state initially
        mAddFab.shrink();
 
        // We will make all the FABs and action name texts
        // visible only when Parent FAB button is clicked So
        // we have to handle the Parent FAB button first, by
        // using setOnClickListener you can see below
        mAddFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if (!isAllFabsVisible) {
 
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs VISIBLE.
                            mAddAlarmFab.show();
                            mAddPersonFab.show();
                            addAlarmActionText.setVisibility(View.VISIBLE);
                            addPersonActionText.setVisibility(View.VISIBLE);
 
                            // Now extend the parent FAB, as
                            // user clicks on the shrinked
                            // parent FAB
                            mAddFab.extend();
 
                            // make the boolean variable true as
                            // we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = true;
                        } else {
 
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs GONE.
                            mAddAlarmFab.hide();
                            mAddPersonFab.hide();
                            addAlarmActionText.setVisibility(View.GONE);
                            addPersonActionText.setVisibility(View.GONE);
 
                            // Set the FAB to shrink after user
                            // closes all the sub FABs
                            mAddFab.shrink();
 
                            // make the boolean variable false
                            // as we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = false;
                        }
                    }
                });
 
        // below is the sample action to handle add person
        // FAB. Here it shows simple Toast msg. The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddPersonFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Person Added", Toast.LENGTH_SHORT).show();
                    }
                });
 
        // below is the sample action to handle add alarm
        // FAB. Here it shows simple Toast msg The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddAlarmFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Alarm Added", Toast.LENGTH_SHORT).show();
                    }
                });
    }
}


Kotlin




import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
 
class MainActivity : AppCompatActivity() {
    // Use the FloatingActionButton for all the add person
    // and add alarm
    var mAddAlarmFab: FloatingActionButton? = null
    var mAddPersonFab: FloatingActionButton? = null
 
    // Use the ExtendedFloatingActionButton to handle the
    // parent FAB
    var mAddFab: ExtendedFloatingActionButton? = null
 
    // These TextViews are taken to make visible and
    // invisible along with FABs except parent FAB's action
    // name
    var addAlarmActionText: TextView? = null
    var addPersonActionText: TextView? = null
 
    // to check whether sub FABs are visible or not
    var isAllFabsVisible: Boolean? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Register all the FABs with their appropriate IDs
        // This FAB button is the Parent
        mAddFab = findViewById(R.id.add_fab)
        // FAB button
        mAddAlarmFab = findViewById(R.id.add_alarm_fab)
        mAddPersonFab = findViewById(R.id.add_person_fab)
 
        // Also register the action name text, of all the
        // FABs. except parent FAB action name text
        addAlarmActionText = findViewById(R.id.add_alarm_action_text)
        addPersonActionText = findViewById(R.id.add_person_action_text)
 
        // Now set all the FABs and all the action name
        // texts as GONE
        mAddAlarmFab.setVisibility(View.GONE)
        mAddPersonFab.setVisibility(View.GONE)
        addAlarmActionText.setVisibility(View.GONE)
        addPersonActionText.setVisibility(View.GONE)
 
        // make the boolean variable as false, as all the
        // action name texts and all the sub FABs are
        // invisible
        isAllFabsVisible = false
 
        // Set the Extended floating action button to
        // shrinked state initially
        mAddFab.shrink()
 
        // We will make all the FABs and action name texts
        // visible only when Parent FAB button is clicked So
        // we have to handle the Parent FAB button first, by
        // using setOnClickListener you can see below
        mAddFab.setOnClickListener(
            object : OnClickListener() {
                fun onClick(view: View?) {
                    isAllFabsVisible = if (!isAllFabsVisible!!) {
 
                        // when isAllFabsVisible becomes
                        // true make all the action name
                        // texts and FABs VISIBLE.
                        mAddAlarmFab.show()
                        mAddPersonFab.show()
                        addAlarmActionText.setVisibility(View.VISIBLE)
                        addPersonActionText.setVisibility(View.VISIBLE)
 
                        // Now extend the parent FAB, as
                        // user clicks on the shrinked
                        // parent FAB
                        mAddFab.extend()
 
                        // make the boolean variable true as
                        // we have set the sub FABs
                        // visibility to GONE
                        true
                    } else {
 
                        // when isAllFabsVisible becomes
                        // true make all the action name
                        // texts and FABs GONE.
                        mAddAlarmFab.hide()
                        mAddPersonFab.hide()
                        addAlarmActionText.setVisibility(View.GONE)
                        addPersonActionText.setVisibility(View.GONE)
 
                        // Set the FAB to shrink after user
                        // closes all the sub FABs
                        mAddFab.shrink()
 
                        // make the boolean variable false
                        // as we have set the sub FABs
                        // visibility to GONE
                        false
                    }
                }
            })
 
        // below is the sample action to handle add person
        // FAB. Here it shows simple Toast msg. The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddPersonFab.setOnClickListener(
            object : OnClickListener() {
                fun onClick(view: View?) {
                    Toast.makeText(this@MainActivity, "Person Added", Toast.LENGTH_SHORT).show()
                }
            })
 
        // below is the sample action to handle add alarm
        // FAB. Here it shows simple Toast msg The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddAlarmFab.setOnClickListener(
            object : OnClickListener() {
                fun onClick(view: View?) {
                    Toast.makeText(this@MainActivity, "Alarm Added", Toast.LENGTH_SHORT).show()
                }
            })
    }
}


Output: Run on Emulator



Last Updated : 02 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads