Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Floating Action Button using Fab Option Library in Android

  • Last Updated : 19 Feb, 2021

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. 

Floating Action Button using Fab Option Library in Android Sample GIF

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.

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_widthUse to give width to the Floating Action.
layout_heightUse to give width to the Floating Action.
layout_bottomUse 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: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 
  
    <!--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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!