How to Create Floating Action Button in Android Studio using Java – Easy 4 Steps Only.

Table of Contents

• Floating Action Button
• Gradle Dependency
• Step by Step Implementation
• Output
• AK Bonus Points

Floating Action Button

A floating action button is a type of button that can be placed anywhere on the screen. It’s usually round in shape and can be expandable as well.

In this project, we have used a regular floating action button so that when we click, it shows a toast on the screen. We can add any task on the button such as opening a new activity or expanding the menu.

Gradle Dependency

To add a floating action button, we require dependency in the Gradle file.

For older versions, the below dependency was used:

dependencies {
    implementation 'com.androidx.support:design:23.0.0'
}

For the latest versions, the below dependency is used:

dependencies {
implementation com.google.androidx.material:material:1.0.0
}

Add the latest version dependency in the build:gradle(app), As I have seen in the latest Android Studio the above dependency is already present in the gradle file.

Step by Step Implementation

Step 1: Open Android Studio, Create a New Project and Choose Empty Activity.

Enter the name of the project as “FloatingActionButton Demo” then select language as Java and Click Finish.

Step 2: Add the below dependency in the gradle(app) file:

dependencies {
implementation com.google.androidx.material:material:1.0.0
}

Step 3: Go to activity_main.xml and type the below code:

Under the res folder, right-click on the drawable folder and Click New then click on Vector Asset.

From clipart, select ic_baseline_add_24 (Add Icon) then click Next and Finish.

You can use any kind of icon as per your requirement like if you are using the floating button as a menu then add a menu icon or if you are using it for adding something then you can use add icon.

In the src attribute, you will insert the icon by accessing the drawable folder and then the required icon.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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/fab"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_alignParentBottom = "true"
    android:layout_alignParentRight = "true"
    android:layout_margin = "16dp"
    android:src = "@drawable/ic_baseline_add_24" />

</RelativeLayout>

Step 4: Go to MainActivity.java and type the below code:

Just like other buttons we have to set OnClickListener to fab as well. fab is the given id for the floating action button in the XML file.

I have used Toast so when we click on the button it will show a toast stating “You have clicked on the floating button”. Instead of toast, we can open a new activity or we can add a menu in the button or any kind of operation whenever clicked on the button.

package com.example.fab;

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

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;

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

        fab = findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "You have clicked on the floating button", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

Output

AK Bonus Points

• FAB is like a normal button only but it enhances the UI in a materialistic form.
• I have added toast on the button, you can assign the button any kind of task.
• In the coming articles, I will also write about Expandable FAB so please check that as well.
• setOnClickListener on the button and perform any kind of operation.
• I have used androidx dependency as per my version of Android Studio, please ensure to use dependency according to your Android Studio if androidx didn’t work for you then try going for only android like this way:

dependencies {
implementation com.google.android.material:material:1.0.0
}

If you have any queries or errors, please feel free to reach out in the comment section 🙂

For a detailed version, please check my youtube video: Click Here

Check my youtube channel: Android Knowledge

Previous Post: How to Create DatePicker in Android Studio using Kotlin

Thank you! 😊