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 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.
