Android Android Library

FABOption – Android Expanding FAB Library Tutorial

Written by Sabith Pkc Mnr

The FABOption Android Library is one of the best custom libraries for Floating Action Button which is also known for its native design as circle button in android. Floating Action Button got a great positive impact on Android Developers due to its material design button capability in Android. This library is pretty much straight forward and easy. In Android App, it will be showing a circular button and when it clicked, it will be expanding to both the sides. So let’s gets started!

As always, I have made a video for you to watch and learn the steps than by reading it. This way you can see the exact steps that you required to do. You can also download the source code in case if you’re a symbol of lazy hard worker šŸ™‚

Source code given at the bottom

Let’s get started

I have added this tutorial on two variants, one you can watch the video tutorial and understand it or you can completely read this post. I suggest reading if you want to know each and every point repeatedly, this may take time, you know!

Video TutorialĀ 

If you want a well-explained video tutorial, then you can watch the below video from my official YouTube channel.

 

Learn through readingĀ 

Reading is a good practice and always appreciated here šŸ˜€

 

Step 1: Add FABOption Dependency in Gradle file

Add the dependency inside the app-level gradle file: build.gradle (module: app)

Step 2: Add FABOption component to the layout

Here’s the final layout file once you add the component inside it.

activity_main.xml

Step 3: Create Menu for Expanded options

This library uses the Menu XML file for adding a new element (option) into it. So we have to create new menu file inside the menu folder. If you don’t have menu folder then right-click on res folder New Directory and give directory name as ‘menu‘. Once it is created, right-click on the newly created menu folder andĀ New android menu resource and give it name as fab_menu.

NOTE: I have added four vector drawable items inside my Drawable folder. You can download them hereĀ 

Step 4: Create new Menu Item inside Menu XML file

Now we have the Menu XML file created, this is the time to add new items into it. The new item can be added like this,

Below is the complete Menu XML file after adding four menu items inside it.

fab_menu.xml

Step 5: Add Reference & Point FAB Menu in MainActivity

First, we will be adding the reference for the FABOption and then in the second line, we point out the menu items for the FAB.

Step 6: Set ClickListener for FAB Option Click Events

We need to do different things when each item from the menu is clicked, right? At this case, we have to simply add a OnClickListener for the FABOption and using a switch, we’ll be separately adding ClickListenerĀ for of the item.

Here is the MainActivity.java file once we added all the lines in it.

There you go! If you went up with any trouble while adding this codes to your project, then you can ask your question on below comment section. So, we are about to wrap up this tutorial and hope you guys got the idea from this tutorial. You can direct download the complete source code using the below button.

Source Code

Do you find this tutorial helpful? Do you think respecting the time I took to write this post? If so, please hit the below share buttons to share with your Android loving friends and family members and raise your support. Thank you!

About the author

Sabith Pkc Mnr

Internet Personality, YouTuber, Programmer & Web Entrepreneur! Working on the complete Android platform for more than 5 years!

2 Comments

  • Hi, first of all, nice job on what you are doing. I have started watching some of your tutorials, and so far I like it. I was curious on this page how to expand the fab thing, and the video is from if-else topic. Hope you will consider to make shorter video name from to or something like that because the Youtube show incomplete name (Ex: “Android Application Development Tutorial for “) in the right side of suggestions, and is pretty hard to search something that might be interesting for the viewer’s project. Thanks again for what your are doing, and best regards.

Leave a Comment