Android Floating Action Button Example Tutorial

In the world of Android app development, user interface design plays a vital role in creating an engaging and intuitive user experience. One of the key components of modern Android design is the Floating Action Button (FAB). The Floating Action Button is a circular button that floats above the content of an activity, usually in the bottom-right corner of the screen. It is used to represent the primary action of a screen, such as creating a new item, sharing content, or starting a task.

In this tutorial, we will explore how to implement a Floating Action Button in an Android application. We'll cover the basic setup, styling, and adding functionality to the FAB. By the end of this tutorial, you'll have a solid understanding of how to use Floating Action Buttons effectively in your Android apps.

Table of Contents#

  1. Setting up the Android Project
  2. Adding the Floating Action Button to the Layout
  3. Styling the Floating Action Button
  4. Adding Functionality to the Floating Action Button
  5. Common Practices and Best Practices
  6. Example Usage
  7. Conclusion
  8. References

Setting up the Android Project#

First, let's create a new Android project in Android Studio. Follow these steps:

  1. Open Android Studio.
  2. Click on Start a new Android Studio project.
  3. Select Empty Activity and click Next.
  4. Configure your project details such as the app name, package name, and save location. Then click Finish.

Once the project is created, make sure you have the necessary dependencies in your build.gradle (Module: app) file. The Floating Action Button is part of the Material Design library, so you need to include it in your project.

implementation 'com.google.android.material:material:1.4.0'

Sync your project with Gradle to download the necessary dependencies.

Adding the Floating Action Button to the Layout#

Open the activity_main.xml file in the res/layout directory. We'll use a CoordinatorLayout as the root layout, which is recommended for using the Floating Action Button as it provides proper interaction with other views, such as Snackbars.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!-- Add your other views here -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@android:drawable/ic_input_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

In the above code:

  • We use a CoordinatorLayout as the root layout.
  • The FloatingActionButton is added with an id of fab.
  • The layout_gravity is set to bottom|end, which positions the FAB in the bottom-right corner of the screen.
  • The layout_margin is set to 16dp to give some space around the FAB.
  • The app:srcCompat attribute is used to set the icon of the FAB. In this case, we use the default ic_input_add icon.

Styling the Floating Action Button#

You can customize the appearance of the Floating Action Button in several ways. Here are some common customization options:

Changing the Background Color#

To change the background color of the FAB, you can use the app:backgroundTint attribute in the XML layout or programmatically in Java or Kotlin.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    app:srcCompat="@android:drawable/ic_input_add"
    app:backgroundTint="@color/colorAccent" />

In the above code, we set the background color of the FAB to the colorAccent defined in the colors.xml file.

Changing the Icon Color#

To change the color of the icon, you can use the app:tint attribute.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    app:srcCompat="@android:drawable/ic_input_add"
    app:backgroundTint="@color/colorAccent"
    app:tint="@android:color/white" />

Here, we set the icon color to white.

Changing the Size#

You can change the size of the FAB using the app:fabSize attribute. The available values are normal and mini.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    app:srcCompat="@android:drawable/ic_input_add"
    app:backgroundTint="@color/colorAccent"
    app:tint="@android:color/white"
    app:fabSize="mini" />

Adding Functionality to the Floating Action Button#

To add functionality to the Floating Action Button, we need to set a click listener on it. Open the MainActivity.java (or MainActivity.kt if you are using Kotlin) file.

Java Example#

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "FAB clicked!", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Kotlin Example#

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.floatingactionbutton.FloatingActionButton
import android.widget.Toast
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val fab = findViewById<FloatingActionButton>(R.id.fab)
        fab.setOnClickListener {
            Toast.makeText(this, "FAB clicked!", Toast.LENGTH_SHORT).show()
        }
    }
}

In both examples, we find the FAB by its id and set a click listener on it. When the FAB is clicked, a Toast message is displayed.

Common Practices and Best Practices#

  • Use a Single Primary Action: The Floating Action Button should represent the primary action of the screen. Avoid having multiple FABs on the same screen to prevent confusion.
  • Provide Visual Feedback: When the FAB is pressed, it should provide visual feedback, such as a ripple effect. The Material Design library handles this automatically.
  • Positioning: Place the FAB in a consistent location, usually in the bottom-right corner of the screen, to make it easy for users to find.
  • Accessibility: Ensure that the FAB is accessible to all users. Use proper icons and provide text descriptions for screen readers.

Example Usage#

Let's consider an example where we have a note-taking app. The primary action on the main screen could be to create a new note. We can use the Floating Action Button to represent this action.

Layout#

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <ListView
        android:id="@+id/note_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@android:drawable/ic_input_add"
        app:backgroundTint="@color/colorAccent"
        app:tint="@android:color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Java Code for Functionality#

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
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.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, NewNoteActivity.class);
                startActivity(intent);
            }
        });
    }
}

In this example, when the FAB is clicked, an Intent is created to start a new activity where the user can create a new note.

Conclusion#

In this tutorial, we have learned how to implement a Floating Action Button in an Android application. We covered the basic setup, styling, and adding functionality to the FAB. By following the common and best practices, you can create a user-friendly and visually appealing interface. Floating Action Buttons are a powerful tool in Android design, and they can greatly enhance the usability of your app.

References#

2026-06