Rapid Subscribe Android App

Rapid Subscribe Android App
Rapid Subscriber

Recent Posts

Home / Android Programming / Material Design / Material Design Floating Action Button in Android

Material Design Floating Action Button in Android

February 18, 2022 ,

Material Design Floating Action Button with Animation in Android




In this tutorial, we will learn about how to create a Material Design Extended Floating Action Button with Animation.


Some Steps to implement FAB button with Animation
  • Material design library in app-level build.gradle 
  • Add Material theme in style.
  • Add some animation files to animate FAB.
  • Add some icons for fab buttons.
  • Create a material design FAB Button in Android project.


Material Extended Fab with animation
Extended Fab with animation
Material Fab with animation
Material Fab with animation


Use Material design library in app-level build.gradle
  implementation 'com.google.android.material:material:1.5.0'

style.xml (App theme)
 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">  
     <!-- Customize your theme here. -->  
     <item name="colorPrimary">@color/colorPrimary</item>  
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
     <item name="colorAccent">@color/colorAccent</item>  
   </style>


Create Animation XML files in anim folder.
(Right click on res folder -> New -> Android resource file name under anim directory)

Fade_in animation file used while sub FAB buttons shown
 <?xml version="1.0" encoding="utf-8"?>  
 <set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:fillAfter="true">  
   <scale  
     android:fromXScale="0.0"  
     android:fromYScale="0.0"  
     android:toXScale="0.8"  
     android:toYScale="0.8"  
     android:pivotX="50%"  
     android:pivotY="50%"  
     android:duration="300"  
     android:interpolator="@android:anim/linear_interpolator"/>  
   <alpha  
     android:fromAlpha="0.0"  
     android:toAlpha="1.0"  
     android:duration="300"  
     android:interpolator="@android:anim/accelerate_interpolator"/>  
 </set>

Fade_out animation used while sub FAB buttons hide.
 <?xml version="1.0" encoding="utf-8"?>  
 <set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:fillAfter="true">  
   <scale  
     android:fromXScale="0.8"  
     android:fromYScale="0.8"  
     android:toXScale="0.0"  
     android:toYScale="0.0"  
     android:pivotX="50%"  
     android:pivotY="50%"  
     android:duration="300"  
     android:interpolator="@android:anim/linear_interpolator"/>  
   <alpha  
     android:fromAlpha="1.0"  
     android:toAlpha="0.0"  
     android:duration="300"  
     android:interpolator="@android:anim/accelerate_interpolator"/>  
 </set>

Rotate_forward animation used while changes the plus to cross icon

 <?xml version="1.0" encoding="utf-8"?>  
 <set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:fillAfter="true">  
   <rotate android:fromDegrees="0"  
     android:toDegrees="45"  
     android:pivotX="50%"  
     android:pivotY="50%"  
     android:duration="300"  
     android:interpolator="@android:anim/linear_interpolator"/>  
 </set>

Rotate_backward animation used while changes the cross icon to plus icon
 <?xml version="1.0" encoding="utf-8"?>  
 <set xmlns:android="http://schemas.android.com/apk/res/android"  
   android:fillAfter="true">  
   <rotate android:fromDegrees="45"  
     android:toDegrees="0"  
     android:pivotX="50%"  
     android:pivotY="50%"  
     android:duration="300"  
     android:interpolator="@android:anim/linear_interpolator"/>  
 </set>


XML file for FAB Button
 <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto">  
   <LinearLayout  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:orientation="vertical"  
     android:layout_gravity="bottom|right">  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button1"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:visibility="gone"  
         android:text="app_name"  
         app:srcCompat="@drawable/ic_play_arrow_black_24dp"/>  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button2"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:layout_margin="4dp"  
         android:visibility="gone"  
         android:text="app_name"  
         app:srcCompat="@drawable/ic_pause_black_24dp"/>  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button3"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:layout_margin="4dp"  
         android:text="app_name"  
         android:visibility="gone"  
         app:srcCompat="@drawable/ic_chevron_left_black_24dp"/>  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button4"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:layout_margin="4dp"  
         android:visibility="gone"  
         android:text="app_name"  
         app:srcCompat="@drawable/ic_chevron_right_black_24dp"/>  
     <com.google.android.material.floatingactionbutton.FloatingActionButton  
       android:id="@+id/floating_action_button"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_gravity="bottom|right"  
       android:layout_margin="10dp"  
       android:text="Label"  
       app:srcCompat="@drawable/ic_add_black_24dp"/>  
   </LinearLayout>  
   </androidx.coordinatorlayout.widget.CoordinatorLayout>

In XML, we have created FAB buttons in a vertical position in coordinator layout and only parent FAB is visible now, Sub Fab visibility set to gone, we will change sub FAB visibility accordingly.

Java file.
 public class NextActivity extends AppCompatActivity {  
  // TextView tv;  
  // Button btn;  
   FloatingActionButton parentFAB;  
   FloatingActionButton FAB1,FAB2,FAB3,FAB4;  
   Animation fadein,fadeout,rotateforward,rotatebackward;  
   boolean isfabopen = false;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_next);  
     parentFAB = findViewById(R.id.floating_action_button);  
     FAB1 = findViewById(R.id.floating_action_button1);  
     FAB2 = findViewById(R.id.floating_action_button2);  
     FAB3 = findViewById(R.id.floating_action_button3);  
     FAB4 = findViewById(R.id.floating_action_button4);  
     fadein = AnimationUtils.loadAnimation(this,R.anim.fade_in);  
     fadeout = AnimationUtils.loadAnimation(this,R.anim.fade_out);  
     rotateforward = AnimationUtils.loadAnimation(this,R.anim.rotate_forward);  
     rotatebackward = AnimationUtils.loadAnimation(this,R.anim.rotate_backward);  
     parentFAB.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
         if(isfabopen)  
         {  
           isfabopen = false;  
           parentFAB.startAnimation(rotatebackward);  
           FAB1.startAnimation(fadeout);  
           FAB2.startAnimation(fadeout);  
           FAB3.startAnimation(fadeout);  
           FAB4.startAnimation(fadeout);  
           FAB1.hide();  
           FAB2.hide();  
           FAB3.hide();  
           FAB4.hide();  
         }  
         else {  
           isfabopen = true;  
           parentFAB.startAnimation(rotateforward);  
           FAB1.startAnimation(fadein);  
           FAB2.startAnimation(fadein);  
           FAB3.startAnimation(fadein);  
           FAB4.startAnimation(fadein);  
           FAB1.show();  
           FAB2.show();  
           FAB3.show();  
           FAB4.show();  
         }  
       }  
     });  
    /* tv = findViewById(R.id.permission_text);  
     btn = findViewById(R.id.check_permission_btn);  
     btn.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {  
           if(Settings.canDrawOverlays(NextActivity.this))  
           {  
             tv.setText("Permission Granted");  
           }  
           else {  
             Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,  
                 Uri.parse("package:"+getPackageName()));  
             Toast.makeText(NextActivity.this, "Please Give permission to draw over other apps", Toast.LENGTH_SHORT).show();  
             startActivity(intent);  
           }  
         }  
         else  
         {  
           //this permission given by default in less than Android M(6.0)  
           //you have to request permission only >= M devices  
         }  
       }  
     });*/  
   }  
 }

There are two options for us to show/hide FAB

  • In above file, we have created a FAB button with rotate animation.
  • In Below file, we will create a Extended FAB and changes icon accordingly.
XML file for FAB Button (Parent FAB is Extended FAB with Text Label)
 <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto">  
   <LinearLayout  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:orientation="vertical"  
     android:layout_gravity="bottom|right">  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button1"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:visibility="gone"  
         android:text="app_name"  
         app:srcCompat="@drawable/ic_play_arrow_black_24dp"/>  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button2"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:layout_margin="4dp"  
         android:visibility="gone"  
         android:text="app_name"  
         app:srcCompat="@drawable/ic_pause_black_24dp"/>  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button3"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:layout_margin="4dp"  
         android:text="app_name"  
         android:visibility="gone"  
         app:srcCompat="@drawable/ic_chevron_left_black_24dp"/>  
       <com.google.android.material.floatingactionbutton.FloatingActionButton  
         android:id="@+id/floating_action_button4"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_gravity="bottom|right"  
         android:layout_margin="4dp"  
         android:visibility="gone"  
         android:text="app_name"  
         app:srcCompat="@drawable/ic_chevron_right_black_24dp"/>  
     <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton  
       android:id="@+id/floating_action_button"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_gravity="bottom|right"  
       android:layout_margin="10dp"  
       android:text="Label"  
       app:icon="@drawable/ic_add_black_24dp"/>  
   </LinearLayout>  
   </androidx.coordinatorlayout.widget.CoordinatorLayout>

Java file with FAB Extended icon changes accordingly.
 public class NextActivity extends AppCompatActivity {  
   ExtendedFloatingActionButton extendedFAB;  
   FloatingActionButton FAB1,FAB2,FAB3,FAB4;  
   Animation fadein,fadeout,rotateforward,rotatebackward;  
   boolean isfabopen = false;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_next);  
     extendedFAB = findViewById(R.id.floating_action_button);  
     FAB1 = findViewById(R.id.floating_action_button1);  
     FAB2 = findViewById(R.id.floating_action_button2);  
     FAB3 = findViewById(R.id.floating_action_button3);  
     FAB4 = findViewById(R.id.floating_action_button4);  
     fadein = AnimationUtils.loadAnimation(this,R.anim.fade_in);  
     fadeout = AnimationUtils.loadAnimation(this,R.anim.fade_out);  
     rotateforward = AnimationUtils.loadAnimation(this,R.anim.rotate_forward);  
     rotatebackward = AnimationUtils.loadAnimation(this,R.anim.rotate_backward);  
     extendedFAB.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
         if(isfabopen)  
         {  
           isfabopen = false;  
           extendedFAB.extend(); //fab expanded hide sub Fab buttons  
           extendedFAB.setIconResource(R.drawable.ic_add_black_24dp);  
           FAB1.startAnimation(fadeout);  
           FAB2.startAnimation(fadeout);  
           FAB3.startAnimation(fadeout);  
           FAB4.startAnimation(fadeout);  
           FAB1.hide();  
           FAB2.hide();  
           FAB3.hide();  
           FAB4.hide();  
         }  
         else {  
           isfabopen = true;  
           extendedFAB.shrink(); //fab shrinked show sub Fab buttons  
           extendedFAB.setIconResource(R.drawable.ic_close_black_24dp);  
           FAB1.startAnimation(fadein);  
           FAB2.startAnimation(fadein);  
           FAB3.startAnimation(fadein);  
           FAB4.startAnimation(fadein);  
           FAB1.show();  
           FAB2.show();  
           FAB3.show();  
           FAB4.show();  
         }  
       }  
     });  
   }  
 }


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

No comments

Subscribe to: Post Comments ( Atom )