How to add Extended Floating Action Button in Android | Android Studio | Java
Published in
4 min readMar 14, 2021
How to add Extended Floating Action Button in Android | Android Studio | Java.
In this tutorial, we are going to create an extended floating action button in android. A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.
Extended Floating Action Button is the newly introduced class with Material Components library in Android.
Material Components is introduced with SDK 28 or Android P. It’s a superset of Support Design Library with lots of new additions and improvements. And, in this tutorial, we are going to create an extended floating action button.
So, let’s start creating the extended FAB.
Before going to create let’s see what you’re going to see.
Step 1: add the dependency
make sure to add the material design dependency in your build.gradle app file.
implementation 'com.google.android.material:material:1.3.0'Step 2: add the drawable files
before going to design the main XML file, first, import the drawable files. Below drawable files that I used in my project.
Step 3: design the XML file
now, design the main XML file, add the Extended Floating Action Button that is set as the parent FAB and also add the child FAB. Here as a child FAB, I used two FABs.
parent FAB: Action
child FAB 1: Alarm
child FAB 2: Person
<?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"
android:background="@color/white"
tools:ignore="HardcodedText"> <!--This will be the parent Floating Action Button-->
<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/black"
android:text="Actions"
android:textColor="@color/white"
app:icon="@drawable/add"
app:iconTint="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" /> <!--Floating action button for add alarm-->
<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/black"
app:fabSize="normal"
app:tint="@color/white"
app:layout_constraintBottom_toTopOf="@+id/add_fab"
app:layout_constraintEnd_toEndOf="@+id/add_fab"
app:srcCompat="@drawable/alarm"
android:contentDescription="@string/app_name" /> <!--Action name text for the add alarm 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-->
<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/black"
app:fabSize="normal"
app:tint="@color/white"
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/person"
android:contentDescription="@string/app_name" /> <!--Action name text for the add person 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 4: add the functionality
now in the main JAVA file add the functionality for the extended FAB and add the click listener in the child FAB.
public class MainActivity extends AppCompatActivity {
FloatingActionButton mAddAlarmFab, mAddPersonFab;
ExtendedFloatingActionButton mAddFab;
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); 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); // 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();
}
});
}
}
