Floating Action Button (FAB)

Floating Action Buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.

Floating action buttons come in two sizes: the default and mini. The size can be controlled with the FABSize attribute. As this class descends from ImageView, you can control the icon that is displayed via setImageDrawable(Drawable).

The background color of this view defaults to your theme's colorAccent. If you wish to change this at runtime, you can do so via setBackgroundTintList(ColorStateList).

The FAB could be used to carry out different kinds of transitions on click. The following are a few images that show the different places where the FAB could be used:

It could show options in animating on top on click:

Let's take a look at how to use the FAB in our Zomato code. Consider the restaurant details screen where we have a FAB button present, as follows; the button can be used at various different places:

The FAB animation has a button. Clicking on the button opens up the bottom menu and shows us the various options. Here, the transition from the FAB button to the bottom menu forms the major chunk of its material aspect. The following is the complete transition showing how the FAB gets converted to the bottom menu:

Let's now look at how to implement FAB in our code. Firstly, make sure that you have added the gradle dependency in your app's build.gradle file:

compile 'com.android.support:design:25.3.1' 

Then, in your layout where you need to place the FAB, place the following code:

<android.support.design.widget.FloatingActionButton 
   android:id="@+id/FAB" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:layout_marginBottom="?actionBarSize" 
   android:layout_marginRight="20dp" 
   android:src="@drawable/ic_add_white_24dp" 
   app:backgroundTint="@color/colorPrimary" 
   app:layout_anchor="@id/scrollView" 
   app:layout_anchorGravity="bottom|end" /> 

Your FAB has been placed in your XML code, and your layout with the FAB is now ready. The next step is to import and initialize it in your Java class:

import android.support.design.widget.FloatingActionButton; 

If you are using Android Studio, the import will be handled automatically, and you don't have to worry about it. Then, initialize the FAB as follows:

FloatingActionButton mFab; 
mFab = (FloatingActionButton) findViewById(R.id.fab); 

Once it is initialized, you need to handle what will happen when you click on the FAB button:

mFab.setOnClickListener(new View.OnClickListener() { 
   @Override 
   public void onClick(View v) { 
         // Your code 
   } 
}); 

Now, the menu will appear when you click on the FAB button. The code for the on click of the FAB is mentioned below. Refer to PlaceDetailActivity.java for better understanding of this part of the flow:

mFab.setOnClickListener(new View.OnClickListener() { 
   @Override 
   public void onClick(View v) { 
         mFabToolbar.expandFab(); 
 
         Animator bottomExpansion = 
                     ObjectAnimator.ofPropertyValuesHolder(bottomLay, 
                                 PropertyValuesHolder.ofFloat(View.SCALE_X, 0f, 1f)); 
         bottomExpansion.setStartDelay(300); 
         bottomExpansion.setDuration(300); 
 
         Animator bottomExpansionFade = 
                     ObjectAnimator.ofPropertyValuesHolder(bottomLay, 
                                 PropertyValuesHolder.ofFloat(View.ALPHA, 0f, 1f)); 
         bottomExpansion.setStartDelay(300); 
         bottomExpansion.setDuration(300); 
 
         Animator overlayFade = 
                     ObjectAnimator.ofPropertyValuesHolder(tra_overlay, 
                                 PropertyValuesHolder.ofFloat(View.ALPHA, 0f, 1f)); 
         overlayFade.setStartDelay(0); 
         overlayFade.setDuration(600); 
 
         bottomExpansion.addListener(new Animator.AnimatorListener() { 
               @Override 
               public void onAnimationStart(Animator animation) { 
                     bottomLay.setVisibility(View.VISIBLE); 
               } 
 
               @Override 
               public void onAnimationEnd(Animator animation) { 
               } 
 
               @Override 
               public void onAnimationCancel(Animator animation) { 
               } 
 
               @Override 
               public void onAnimationRepeat(Animator animation) { 
               } 
         }); 
 
         overlayFade.addListener(new Animator.AnimatorListener() { 
               @Override 
               public void onAnimationStart(Animator animation) { 
                     tra_overlay.setVisibility(View.VISIBLE); 
               } 
 
               @Override 
               public void onAnimationEnd(Animator animation) { 
 
               } 
 
               @Override 
               public void onAnimationCancel(Animator animation) { 
 
               } 
 
               @Override 
               public void onAnimationRepeat(Animator animation) { 
 
               } 
         }); 
 
 
         AnimatorSet animSet = new AnimatorSet(); 
         animSet.playTogether(bottomExpansion, bottomExpansionFade, overlayFade); 
         animSet.start(); 
 
   } 
}); 

Before the preceding activity, you need to initialize the FAB toolbar menu and set the FAB to the toolbar, as follows:

mFabToolbar = (FooterLayout) findViewById(R.id.fabtoolbar); 
mFabToolbar.setFab(mFab); 

Once this is done, the animation of opening the menu will be executed smoothly. Also, we need to close the bottom menu when clicking anywhere outside. For that, we need to define an overlay layout, which when clicked on will contract the bottom menu to the FAB:

tra_overlay.setOnClickListener(new View.OnClickListener() { 
   @Override 
   public void onClick(View v) { 
         tra_overlay.setVisibility(View.INVISIBLE); 
         bottomLay.setVisibility(View.INVISIBLE); 
 
         mFabToolbar.contractFab(); 
   } 
});