Floating Action Button (FAB) in Android with Example

The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app’s UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like adding an item in the existing list. So in this article, it has been shown how to implement the Floating Action Button(FAB), and also the buttons under the FAB are handled with a simple Toast message. Note that we are going to implement this project using Java language.

Types of Floating Action Button

There are mainly four types of floating action buttons available on Android.

  • Normal/Regular Floating Action Button
  • Mini Floating Action Button
  • Extended Floating Action Button
  • Theming Floating Action Button

In this article let’s discuss the Normal/Regular Floating Action Button and Mini Floating Action Button with a sample example in Android.

Normal/Regular Floating Action Button

Regular FABs are FABs that are not expanded and are regular size. The following example shows a regular FAB with a plus icon.

Sample FAB



Steps for Creating a Normal/Regular FAB

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 dependency on 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 the user click on the Sync Now button make sure that you are connected to network, so that it can download the required files.
  • Refer to the below image if you can’t get the steps mentioned above:

Gradle file

Step 3: Add the FAB icons to the Drawble file

  • For demonstration purpose will import 3 icons in the Drawable folder, one can import the icons of his/her choice. One can do that by right-clicking drawable folder -> New -> Vector Asset. Refer to the following image to import the vector Icon.

Vector Asset

  • Now select your vector icon:

 select your vector icon



  • Now open activity_main.xml and add the floating action buttons.

Step 4: Working with activity_main.xml file

  • In the activity_main.xml file add the floating action buttons and invoke the following code. Now invoke the normal FAB button. Which is of 56dp radius.
  • We have chained the sub FAB buttons to parent FAB button so that they are in single key line. Comments are added inside the code to understand the code in more detail.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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-->
    <!--After clicking the above button the following two buttons 
        will pop up. So this button is considered as parent FAB-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        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:src="@drawable/ic_add_black_24dp"
        app:fabSize="normal"
        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-->
    <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"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/add_fab"
        app:layout_constraintEnd_toEndOf="@+id/add_fab"
        app:layout_constraintStart_toStartOf="@+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-->
    <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"
        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>

chevron_right


Output UI is produced as:

Output UI

Step 5: Working with the MainActivity.java file

  • Now handle these all FAB buttons using the setOnClickListener() method you may refer Handling Click events in Button | Android.
  • Now in the MainActivity.java invoke the following code to handle them. Read the comments under the code for better understanding. In this code it’s been shown that when sub FABs are to be visible with onClickListener. Comments are added inside the code to understand the code in more detail.

Java

filter_none

edit
close

play_arrow

link
brightness_4
code

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.FloatingActionButton;
  
public class MainActivity extends AppCompatActivity {
  
    // Make sure to use the FloatingActionButton
    // for all the FABs
    FloatingActionButton mAddFab, mAddAlarmFab, mAddPersonFab;
  
    // These are taken to make visible and invisible along
    // with FABs
    TextView addAlarmActionText, addPersonActionText;
  
    // to check whether sub FAB buttons 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 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.
        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;
  
        // 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);
  
                            // 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);
  
                            // 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();
                    }
                });
    }
}

chevron_right


Output: Run on Emulator

Mini Floating Action Button

A mini FABs are used on smaller screens. Mini FABs can also be used to create visual continuity with other screen elements. The following example shows a mini FAB with a plus icon.

Creating a Mini FAB

Now invoke the mini FAB button. Which is of 40dp radius. All the other things are rename the same. Only one attribute needs to be changed that is:

app:fabSize=”mini”

After doing the changes the output UI looks like:

Note: The FAB button can also be made auto resizable by changing the fabSize attribute to auto. This will make FAB size automatically mini and normal according to the window size.

app:fabsize=”auto”

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.