Xml code
<?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">
<!--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_baseline_add_24"
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_baseline_add_24" />
<!--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_baseline_add_24" />
<!--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>
Java Code
package com.app.androidpro.my;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
public class MainActivity extends AppCompatActivity {
FloatingActionButton mAddAlarmFab, mAddPersonFab;
ExtendedFloatingActionButton mAddFab;
TextView addAlarmActionText, addPersonActionText;
Boolean isAllFabsVisible;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAddFab = findViewById(R.id.add_fab);
mAddAlarmFab = findViewById(R.id.add_alarm_fab);
mAddPersonFab = findViewById(R.id.add_person_fab);
addAlarmActionText = findViewById(R.id.add_alarm_action_text);
addPersonActionText = findViewById(R.id.add_person_action_text);
mAddAlarmFab.setVisibility(View.GONE);
mAddPersonFab.setVisibility(View.GONE);
addAlarmActionText.setVisibility(View.GONE);
addPersonActionText.setVisibility(View.GONE);
isAllFabsVisible = false;
mAddFab.shrink();
mAddFab.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
if (!isAllFabsVisible) {
mAddAlarmFab.show();
mAddPersonFab.show();
addAlarmActionText.setVisibility(View.VISIBLE);
addPersonActionText.setVisibility(View.VISIBLE);
mAddFab.extend();
isAllFabsVisible = true;
} else {
mAddAlarmFab.hide();
mAddPersonFab.hide();
addAlarmActionText.setVisibility(View.GONE);
addPersonActionText.setVisibility(View.GONE);
mAddFab.shrink();
isAllFabsVisible = false;
}
}
});
mAddPersonFab.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "Person Added", Toast.LENGTH_SHORT).show();
}
});
mAddAlarmFab.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "Alarm Added", Toast.LENGTH_SHORT).show();
}
});
}
}