Floating Action Button using Fab Option Library in Android

Floating Action Button using Fab Options is another unique way of displaying various options. With the help of this, we can Navigate to different screens easily. This Floating Action button display various menu with Animation. So it increases user experience. In this article, we are going to learn how to implement Floating Action Button using Fab Option Library in Android. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Applications of Floating Action Button using Fab Option

• Floating Action Button using Fab Option provide a good User Experience.
• Floating Action Button using Fab Option helps to give various menus in Animated form.
• Floating Action Button using Fab Option makes it easy to navigate to different screens.

Attributes of Floating Action Button using Fab Option

Attributes	Description
layout_width	Use to give width to the Floating Action.
layout_height	Use to give width to the Floating Action.
layout_bottom	Use to align Floating Action button to bottom.

Step by Step Implementation

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 of Floating Action Button using Fab Option library in build.gradle file

Then Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation ‘com.github.joaquimley:faboptions:1.2.0’

Now click on Sync now it will sync your all files in build.gradle().

Step 3: Create a new Floating Action Button using Fab Option in your activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--Text View heading-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Geeks for Geeks"
        android:textColor="@color/purple_200"
        android:textSize="20dp"
        android:textStyle="bold" />

    <!--Fab Options-->
    <com.joaquimley.faboptions.FabOptions
        android:id="@+id/fab_options"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom" />

</RelativeLayout>

Step 4: Create a new menu file in your resource folder

Go to the app > res > right-click > New > Android Resource File and choose Resource type as “Menu” and enter the file name as “menu” and click on the OK button. Enter the below code into the menu.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!--Menu items-->
    <item
        android:id="@+id/balance"
        android:icon="@drawable/ic_baseline_account_balance_24"
        android:title="Bank" />

    <item
        android:id="@+id/download"
        android:icon="@drawable/ic_baseline_cloud_download_24"
        android:title="Download" />

    <item
        android:id="@+id/photo"
        android:icon="@drawable/ic_baseline_add_a_photo_24"
        android:title="Add Photo" />

    <item
        android:id="@+id/account"
        android:icon="@drawable/ic_baseline_account_circle_24"
        android:title="Account" />

</menu>

Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. 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.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.joaquimley.faboptions.FabOptions;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

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

        // Fab Options Code
        FabOptions fabOptions = (FabOptions) findViewById(R.id.fab_options);
        fabOptions.setButtonsMenu(this, R.menu.menu);
        fabOptions.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // Menu given along with toast
        switch (v.getId()) {
            case R.id.balance:
                Toast.makeText(this, "Bank", Toast.LENGTH_SHORT).show();
                break;
            case R.id.download:
                Toast.makeText(this, "Download", Toast.LENGTH_SHORT).show();
                break;
            case R.id.photo:
                Toast.makeText(this, "Add Photo", Toast.LENGTH_SHORT).show();
                break;
            case R.id.account:
                Toast.makeText(this, "Account", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

Now click on the run option it will take some time to build Gradle. After that, you will get output on your device as given below.

Output: