Floating Action Button in Android with Example

Step 1: Create a New Project

Step 2: Add dependency on the app level Gradle file.

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

Step 3: Add the FAB icons to the Drawble file

Right-clicking drawable folder -> New -> Vector Asset.

Step 4: Working with activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>

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

Ouput:

Step 5: Working with the MainActivity.java file

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();

}

});

}

}