How to create a Fab Button in Android App | Floating Action Button in Android

In this post, I will show you how to add Fab Button to your Android layout.

To add Fab Button, we use this library.

Firstly implement this library in your app-level Gradle file.

 implementation 'com.getbase:floatingactionbutton:1.10.1'  

Then in your XML file, create a floating action menu like below

 <com.getbase.floatingactionbutton.FloatingActionsMenu  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:id="@+id/fabmenu"  
     android:layout_gravity="bottom|right"  
     android:layout_margin="15dp"  
     app:fab_addButtonColorNormal="@color/pink"  
     app:fab_addButtonColorPressed="@color/pink_pressed"  
     app:fab_addButtonPlusIconColor="@color/white"  
     app:fab_labelStyle="@style/customFab"  
     app:layout_anchorGravity="bottom|right"  
     >  

Here, we add a fab menu that contains your action buttons. Also, we set up our fab menu location, where you want to show your fab button, usually a bottom right corner.

Then we add some buttons inside the fab menu like below

 <com.getbase.floatingactionbutton.FloatingActionButton  
     android:id="@+id/fab_action1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     app:fab_colorNormal="@color/white"  
     app:fab_colorPressed="@color/white_pressed"  
     app:fab_icon="@drawable/refresh_icon"  
     app:fab_size="mini"  
     app:fab_title="Button 1" />

  
   <com.getbase.floatingactionbutton.FloatingActionButton  
     android:id="@+id/fab_action2"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     app:fab_colorNormal="@color/white"  
     app:fab_colorPressed="@color/white_pressed"  
     app:fab_icon="@drawable/refresh_icon"  
     app:fab_size="mini"  
     app:fab_title="Button 2" />  

</com.getbase.floatingactionbutton.FloatingActionsMenu>

Here, we add 2 buttons in our fab menu to perform some clicking action on it.
When we press the fab button then these two buttons appear. Then we close our fab menu.

Then we have to perform clicking action in our java file.

Mainactivity.java

 FloatingActionsMenu fab;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_refresh);  
     fab = findViewById(R.id.fabmenu);  
     com.getbase.floatingactionbutton.FloatingActionButton fab1 = findViewById(R.id.fab_action1);  
     com.getbase.floatingactionbutton.FloatingActionButton fab2 = findViewById(R.id.fab_action2);  

In this, we create a Floating action menu variable then find its id.
Remember to call the whole library to make sure we use the fab button from the library but not from the built-in fab button.

Then for clicking use click listener in your same java file.

 fab1.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
         fab.collapse();  // Close the fab menu  
         Toast.makeText(Refresh.this, "Button 1", Toast.LENGTH_SHORT).show();  
       }  
     });  
     fab2.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
         fab.collapse(); //close the fab menu 
         Toast.makeText(Refresh.this, "Button 2", Toast.LENGTH_SHORT).show();  
       }  
     });  

In this, we perform a click action on our fab menu.
 when button clicks then close the fab menu and then show a toast message.

colors.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <resources>  
   <color name="colorPrimary">#a7bffa</color>  
   <color name="colorPrimaryDark">#303f9f</color>  
   <color name="colorAccent">#FF4081</color>  
   <color name="black_overlay">#66000000</color>  
   <color name="black_semi_transparent">#B2000000</color>  
   <color name="background">#e5e5e5</color>  
   <color name="half_black">#000000</color>  
   <color name="white">#fafafa</color>  
   <color name="white_pressed">#f1f1f1</color>  
   <color name="pink">#e91e63</color>  
   <color name="pink_pressed">#ec407a</color>  
   <color name="blue_semi_transparent">#B805677F</color>  
   <color name="black_semi_transparent_pressed">#80738f</color>  
 </resources>  

Styles.xml

 <style name="customFab">  
     <item name='android:background'>@drawable/fab_label_background</item>  
     <item name='android:textColor'>@color/white</item>  
   </style>  

FabLabelBackground.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <shape xmlns:android="http://schemas.android.com/apk/res/android">  
   <solid android:color="@color/black_semi_transparent"/>  
   <padding  
     android:left="16dp"  
     android:top="6dp"  
     android:right="16dp"  
     android:bottom="6dp"/>  
   <corners  
     android:radius="5dp"/>  
 </shape>  

Follow us for more posts like this,
Subscribe Harpreet studio on Youtube
Like Harpreet Studio on Facebook