Floating Action Button (FAB) in Android with Example
The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app’s UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like adding an item in the existing list. So in this article, it has been shown how to implement the Floating Action Button(FAB), and also the buttons under the FAB are handled with a simple Toast message. Note that we are going to implement this project using Java language.
Types of Floating Action Button
There are mainly four types of floating action buttons available on Android.
- Normal/Regular Floating Action Button
- Mini Floating Action Button
- Extended Floating Action Button
- Theming Floating Action Button
In this article let’s discuss the Normal/Regular Floating Action Button and Mini Floating Action Button with a sample example in Android.
Normal/Regular Floating Action Button
Regular FABs are FABs that are not expanded and are regular size. The following example shows a regular FAB with a plus icon.
Steps for Creating a Normal/Regular FAB
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 on the app level Gradle file.
- Here we are using the Floating action button which is designed and developed by Google Material Design Team.
- Add the dependency in the build.gradle(app) file as:
- Make sure that add the dependency to the app level Gradle file. After adding the dependency you need to click on the “Sync Now” button which appears at the top right corner of the Android Studio IDE.
- When the user click on the Sync Now button make sure that you are connected to network, so that it can download the required files.
- Refer to the below image if you can’t get the steps mentioned above:
Step 3: Add the FAB icons to the Drawable file
- For demonstration purpose will import 3 icons in the Drawable folder, one can import the icons of his/her choice. One can do that by right-clicking drawable folder -> New -> Vector Asset. Refer to the following image to import the vector Icon.
- Now select your vector icon:
- Now open activity_main.xml and add the floating action buttons.
Step 4: Working with activity_main.xml file
- In the activity_main.xml file add the floating action buttons and invoke the following code. Now invoke the normal FAB button. Which is of 56dp radius.
- We have chained the sub FAB buttons to parent FAB button so that they are in single key line. Comments are added inside the code to understand the code in more detail.
Output UI is produced as:
Step 5: Working with the MainActivity.java file
- Now handle these all FAB buttons using the setOnClickListener() method you may refer Handling Click events in Button | Android.
- Now in the MainActivity.java invoke the following code to handle them. Read the comments under the code for better understanding. In this code it’s been shown that when sub FABs are to be visible with onClickListener. Comments are added inside the code to understand the code in more detail.
Output: Run on Emulator
Mini Floating Action Button
A mini FABs are used on smaller screens. Mini FABs can also be used to create visual continuity with other screen elements. The following example shows a mini FAB with a plus icon.
Creating a Mini FAB
Now invoke the mini FAB button. Which is of 40dp radius. All the other things are rename the same. Only one attribute needs to be changed that is:
After doing the changes the output UI looks like:
Note: The FAB button can also be made auto resizable by changing the fabSize attribute to auto. This will make FAB size automatically mini and normal according to the window size.