Floating Action Buttons (FABs) have become a popular component in modern Android app design. These circular buttons, typically located at the bottom right corner of the screen, provide a quick and convenient way to access primary or frequently used actions within an app. The smooth animation and prominent placement of FABs make them a great addition to any user interface, enhancing both the functionality and visual appeal of your app. In this tutorial, we will explore how to effectively use a Floating Action Button in Android app development. We'll cover the essential steps to integrate a FAB into your app, including layout setup and handling user interactions. Whether you're a beginner or an experienced Android developer, this tutorial will provide you with a solid foundation for working with FABs and enable you to create a more intuitive user experience.

By the end of this tutorial, you will have a clear understanding of: How to add the FloatingActionButton widget to your XML layout file. Retrieving the FAB view and setting up click listeners. Implementing actions or functionality when the FAB is clicked. Customizing the appearance of the FAB to match your app's design. Add the dependency in the build.gradle(app) file as:

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

Add the FloatingActionButton widget to your XML layout file. For example:

<?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">

  
    <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:backgroundTint="@color/teal_700"        
       app:srcCompat="@drawable/ic_add"
        app:iconTint="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Make sure to replace @drawable/ic_add with the desired icon for your FAB. In your Java or Kotlin activity file, retrieve the FloatingActionButton view and add a click listener to handle FAB interactions. For example, in Java:

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

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

        FloatingActionButton fab = findViewById(R.id.add_fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Handle FAB click here
                Toast.makeText(MainActivity.this, "FAB clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Customize the click listener's implementation to perform the desired action when the FAB is clicked. In the provided example, a Toast message is displayed to indicate that the FAB was clicked. Replace the Toast message with your desired functionality. That's it! You have now successfully added and configured a Floating Action Button in your Android application. Customize its appearance and behavior as per your requirements.