Prerequisite: Floating Action Button (FAB) in Android with Example
In the Floating Action Button (FAB) article, we have discussed on Normal/Regular Floating Action Button and Mini Floating Action Button. In this article, let’s discuss and implement an Extended Floating Action Button in android which extends when clicked and shrinks when closed and also shows the information about the sub floating action button for what the context the sub floating action buttons have popped up. 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.
Steps for Creating Extended Floating Action Button
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 a dependency to 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 you click on the Sync Now button make sure that you are connected to the network so that it can download the required files.
- Refer the below image if you can’t get the steps mentioned above or if you can’t locate the app level Gradle file:
Step 3: Change the base application theme in styles.xml file
- The theme needs to be changed as the ExtendedFloating action button is the child class of the Google Material Design Buttons. So it needs the MaterialComponent theme to be applied to the Base theme of the application. Otherwise, the app will crash immediately as soon as we launch the application.
- You may refer to this article: Material Design Buttons in Android with Example, as the ExtendedMaterial design button is child class of the Material design buttons. The article says, the advantages of having Material design buttons, and why the theme needs to be changed.
- Go to app -> src -> main -> res -> values -> styles.xml and change the base application theme. The MaterialComponents contains various action bar theme styles, one may invoke any of the MaterialComponents action bar theme styles, except AppCompat styles. Below is the code for the styles.xml file.
If you are unable to get the things in the step mentioned above you may refer to this image.
Step 4: Import some of the vector icons in the drawable folder
- In this case, simple add vector, add alarm, vector, add person vector icons are imported for demonstration purpose.
- To import any vector in the project one needs to right-click on the drawable folder -> New -> Vector Asset.
- A new pop window will be opened and choose any vector you want by clicking on the Clip Art button.
- You can refer the following image to how to open the vector asset selector.
- You may refer the following image to how to locate the Clip Art button and choose the vectors.
Step 5: Working with the activity_main.xml file
- In the activity_main.xml file which add the Extended Floating Action Button (FAB).
- Invoke the following code inside the activity_main.xml file. For clear understanding refer the comments inside the code given below:
Step 6: Working with the MainActivity.java file
- Before proceeding to see the output its better to handle the Parent Floating Action Button and its sub Floating Action Buttons, as if it is not done you may end up getting some unusual output.
- To handle them invoke the following code in MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Output: Run on Emulator
Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.
- Floating Action Button (FAB) in Android with Example
- How To Avoid Snackbar Overlap Floating Action Button in Android?
- How to Add a Floating Action Button to Bottom Navigation Bar in Android?
- Theming Floating Action Buttons in Android with Example
- How to change Input Method Action Button in Android?
- How to change the color of Action Bar in an Android App?
- Different ways to hide Action bar in Android with Examples
- How to add Toggle Button in an Android Application
- How to Change the Screen Orientation Programmatically using a Button in Android?
- How to Listen for Volume Button and Back Key Events Programmatically in Android?
- Double-Tap on a Button in Android
- How to Change the Background Color of Button in Android using ColorStateList?
- Floating Point Operations & Associativity in C, C++ and Java
- Check if a given string is a valid number (Integer or Floating Point) in Java
- Problem in comparing Floating point numbers and how to compare them correctly?
- Java Program to Illustrate the Usage of Floating
- Android | Android Application File Structure
- Android | AdMob Interstitial Ads for Android Studio
- Android | How to Create/Start a New Project in Android Studio?
- Android | Running your first Android app
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.