Open In App

Floating Action Button (FAB) in Android with Example

Last Updated : 13 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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 to 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 FABs are handled with a simple Toast message.

Note that we are going to implement this project using Java/Kotlin 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 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 settings icon.

floating-action-button


Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Adding Dependency to the build.gradle File

 Go to Module build.gradle.kts file and add this dependency and click on Sync Now button.

implementation ("com.google.android.material:material:1.12.0")

Step 3: Add a vector asset to the Drawable File

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

vector-asset

Now select your vector icon

asset-studio-2


Step 4: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

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

XML 
<androidx.constraintlayout.widget.ConstraintLayout 
    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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <!-- 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/button_settings"
        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/settings"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- Floating action button for home -->
    <!-- Make sure that you are constraining this
         button to the parent button -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/button_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/button_settings"
        app:layout_constraintEnd_toEndOf="@+id/button_settings"
        app:layout_constraintStart_toStartOf="@+id/button_settings"
        app:srcCompat="@drawable/home" />

    <!-- Action name text for the home button -->
    <!-- Make sure that you are constraining this Text to
         the Home FAB button -->
    <TextView
        android:id="@+id/text_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Go to home"
        app:layout_constraintBottom_toBottomOf="@+id/button_home"
        app:layout_constraintEnd_toStartOf="@+id/button_home"
        app:layout_constraintTop_toTopOf="@+id/button_home" />

    <!-- Floating action button for profile -->
    <!-- Make sure that you are constraining this
         button to the Home FAB button -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/button_profile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/button_home"
        app:layout_constraintEnd_toEndOf="@+id/button_home"
        app:layout_constraintStart_toStartOf="@+id/button_home"
        app:srcCompat="@drawable/person" />

    <!-- Action name text for the profile button -->
    <!-- Make sure that you are constraining this Text
         to the Profile FAB button -->
    <TextView
        android:id="@+id/text_profile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Go to Profile"
        app:layout_constraintBottom_toBottomOf="@+id/button_profile"
        app:layout_constraintEnd_toStartOf="@+id/button_profile"
        app:layout_constraintTop_toTopOf="@+id/button_profile" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output UI:

design-ui-fab


Step 5: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. Now, we handle all FABs using the setOnClickListener() method you may refer to Handling Click events in Button in Android.

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.

MainActivity File:

MainActivity.java 
package org.geeksforgeeks.demo;

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 {

    // Declare Floating Action Buttons (FABs)
    private FloatingActionButton settings;
    private FloatingActionButton home;
    private FloatingActionButton profile;

    // Declare TextViews for FAB labels
    private TextView homeTextview;
    private TextView profileTextview;

    // Variable to track visibility of sub FABs
    private boolean areAllButtonsEnabled;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize the parent FAB (Settings)
        settings = findViewById(R.id.button_settings);

        // Initialize sub FABs (Home & Profile)
        home = findViewById(R.id.button_home);
        profile = findViewById(R.id.button_profile);

        // Initialize TextViews for sub FABs
        homeTextview = findViewById(R.id.text_home);
        profileTextview = findViewById(R.id.text_profile);

        // Initially hide sub FABs and labels
        home.setVisibility(View.GONE);
        profile.setVisibility(View.GONE);
        homeTextview.setVisibility(View.GONE);
        profileTextview.setVisibility(View.GONE);

        // Set default state to false (sub FABs are hidden)
        areAllButtonsEnabled = false;

        // Set click listener for the parent FAB
        settings.setOnClickListener(view -> {
            if (!areAllButtonsEnabled) {
                // Show sub FABs and labels
                home.show();
                profile.show();
                homeTextview.setVisibility(View.VISIBLE);
                profileTextview.setVisibility(View.VISIBLE);

                // Update the state
                areAllButtonsEnabled = true;
            } else {
                // Hide sub FABs and labels
                home.hide();
                profile.hide();
                homeTextview.setVisibility(View.GONE);
                profileTextview.setVisibility(View.GONE);

                // Update the state
                areAllButtonsEnabled = false;
            }
        });

        // Set click listener for the Profile FAB
        profile.setOnClickListener(view -> 
            Toast.makeText(MainActivity.this, "Switched to profile", Toast.LENGTH_SHORT).show()
        );

        // Set click listener for the Home FAB
        home.setOnClickListener(view -> 
            Toast.makeText(MainActivity.this, "Switched to Home", Toast.LENGTH_SHORT).show()
        );
    }
}
MainActivity.kt 
package org.geeksforgeeks.demo

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

class MainActivity : AppCompatActivity() {
    private lateinit var settings: FloatingActionButton
    private lateinit var home: FloatingActionButton
    private lateinit var profile: FloatingActionButton

    // These are taken to make visible and invisible along with FABs
    private lateinit var homeTextview: TextView
    private lateinit var profileTextview: TextView

    // to check whether sub FAB buttons are visible or not.
    private var areAllButtonsEnabled: Boolean? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Register all the FABs with their IDs This FAB button is the Parent
        settings = findViewById(R.id.button_settings)

        // FAB button
        home = findViewById(R.id.button_home)
        profile = findViewById(R.id.button_profile)

        // Also register the action name text, of all the FABs.
        homeTextview = findViewById(R.id.text_home)
        profileTextview = findViewById(R.id.text_profile)

        // Now set all the FABs and all the action name texts as GONE
        home.visibility = View.GONE
        profile.visibility = View.GONE
        homeTextview.visibility = View.GONE
        profileTextview.visibility = View.GONE

        // make the boolean variable as false, as all the
        // action name texts and all the sub FABs are invisible
        areAllButtonsEnabled = 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
        settings.setOnClickListener(View.OnClickListener {
            (if (!areAllButtonsEnabled!!) {
                // when areAllButtonsEnabled becomes true make all
                // the action name texts and FABs VISIBLE
                home.show()
                profile.show()
                homeTextview.visibility = View.VISIBLE
                profileTextview.visibility = View.VISIBLE

                // make the boolean variable true as we
                // have set the sub FABs visibility to GONE
                true
            } else {
                // when areAllButtonsEnabled becomes true make
                // all the action name texts and FABs GONE.
                home.hide()
                profile.hide()
                homeTextview.visibility = View.GONE
                profileTextview.visibility = View.GONE

                // make the boolean variable false as we
                // have set the sub FABs visibility to GONE
                false
            }).also { areAllButtonsEnabled = it }
        })
        // below is the sample action to handle profile FAB. Here it shows simple Toast msg.
        // The Toast will be shown only when they are visible and only when user clicks on them
        profile.setOnClickListener {
            Toast.makeText(this, "Switched to profile", Toast.LENGTH_SHORT).show()
        }

        // below is the sample action to handle home FAB. Here it shows simple Toast msg
        // The Toast will be shown only when they are visible and only when user clicks on them
        home.setOnClickListener {
            Toast.makeText(this, "Switched to Home", Toast.LENGTH_SHORT).show()
        }
    }
}

Output:




Next Article
Autosizing TextView in Android
author
adityamshidlyali
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox