// Tutorial //

Android Floating Action Button Example Tutorial

Published on August 3, 2022
Default avatar

By Anupam Chugh

Android Floating Action Button Example Tutorial

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Today we will learn about Android Floating Action Button. We’ll discuss the FloatingActionButton, that’s a new component included in the Material Design Guidelines and SnackBar, which is a Material Design replacement of a Toast.

Android Floating Action Button

Android Floating Action Button is used to pay emphasis to the most important function on the screen. It’s a cool and stylish way to get user’s attention to it.

Android Floating Action Button Overview

To use Material Design widgets in our project we need to compile the following dependency in our build.gradle file as shown below.

compile 'com.android.support:design:23.1.1'

The FloatingActionButton widget is defined in the xml layout as follows:


Few observations made from the above xml layout defined are:

  1. FloatingActionButton extends the ImageView class. This is evident from the android:src attribute defined.
  2. In the above xml layout elevation attribute is used to cast a shadow over the button and pressedTranslationZ causes the shadow to grow when pressed.

A FloatingActionButton is placed within a CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful later to describe how to animate the button depending on scroll changes. SnackBar is a more enhanced widget when compared to a Toast. A SnackBar is invoked as follows:

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

We have discussed SnackBar at length in another tutorial. Important Note: If you’ve been following these Android Tutorials well, you must have noticed that with the new build tools update to 23.1.1 the project structure of a new empty project has changed and the above mentioned widgets are present by default in a new Android Studio Project. So instead of implementing the above mentioned widgets, let’s take a quick tour of the new project structure.

Android Floating Action Button Example Project Structure

android floating action button example project As you can see a new xml layout file named content_main.xml is added. It’s the same as the earlier activity_main.xml.

Android Floating Action Button Example

The new activity_main.xml is given below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"


            app:popupTheme="@style/AppTheme.PopupOverlay" />


    <include layout="@layout/content_main" />

        android:src="@android:drawable/ic_dialog_email" />


A toolbar is added by default as a replacement of an ActionBar. It’s added inside an AppBarLayout which is a direct child of CoordinatorLayout The AppBarLayout is used to achieve various scrolling behaviours such as collapse, flex space, and quick return. The MainActivity.java is defined as given below:

package com.journaldev.floatingactionbutton;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;

    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;

        return super.onOptionsItemSelected(item);

A new attribute is added to the application tag inside the AndroidManifest.xml named android:supportsRtl="true". This enables right to left layouts in the application. Running this default application produces an output like below: android floating action button example Android FloatingActionButton As you can see, on clicking the floating action button, a SnackBar is displayed. This brings an end to this tutorial. You can create a new project in Android Studio and run it to see these features. Note: Make sure that you’re using the latest build tools. Reference: Android Reference Doc

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up now
About the authors
Default avatar
Anupam Chugh


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?