Floating Action Button (FAB) in Android with Example

20 Oct, 2021
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.
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.
Regular FABs are FABs that are not expanded and are regular size. The following example shows a regular FAB with a plus icon.
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:
Step 3: Add the FAB icons to the Drawable 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.
Now 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
<?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>
Output UI is produced as:
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
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();                    }                });    }}
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.
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”
anikaseth98
Android-Button
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android SDK and it's Components
Navigation Drawer in Android
Arrays in Java
Split() String method in Java with examples
Arrays.sort() in Java with examples
Reverse a string in Java
Object Oriented Programming (OOPs) Concept in Java