Android Material design Android FAB (Floating Action Button) Animations

Creating Project

Here i have created a Android Studio project with package shahedkhondaker.fabanimation also Activity as MainActivity and layout as activity_main.

We have a larger FAB and two smaller FAB. When the larger FAB is pressed the two smaller FAB pop up. Initially the two smaller Fab are invisible.The layout activity_main is given as,

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:context=".MainActivity">       <android.support.design.widget.AppBarLayout         android:layout_height="wrap_content"         android:layout_width="match_parent"         android:theme="@style/AppTheme.AppBarOverlay">           <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             android:background="?attr/colorPrimary"             app:popupTheme="@style/AppTheme.PopupOverlay" />       </android.support.design.widget.AppBarLayout>       <include layout="@layout/content_main" />       <android.support.design.widget.FloatingActionButton         android:id="@+id/fab2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginBottom="160dp"         android:layout_gravity="bottom|end"         android:layout_marginRight="@dimen/fab_margin"         android:visibility="invisible"         app:backgroundTint="@color/colorFAB2"         app:elevation="6dp"         app:pressedTranslationZ="12dp"         android:src="@drawable/ic_done" />     <android.support.design.widget.FloatingActionButton         android:id="@+id/fab1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginBottom="90dp"         android:layout_gravity="bottom|end"         android:layout_marginRight="@dimen/fab_margin"         android:visibility="invisible"         app:elevation="6dp"         app:backgroundTint="@color/colorFAB1"         app:pressedTranslationZ="12dp"         android:src="@drawable/ic_message" />     <android.support.design.widget.FloatingActionButton         android:id="@+id/fab"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="bottom|end"         app:elevation="6dp"         app:backgroundTint="@color/colorAccent"         app:pressedTranslationZ="12dp"         android:layout_margin="@dimen/fab_margin"         android:src="@drawable/ic_add" />   </android.support.design.widget.CoordinatorLayout>

The colors I used are,

colors.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <color name="colorPrimary">#4CAF50</color>     <color name="colorPrimaryDark">#388E3C</color>     <color name="colorAccent">#F44336</color>     <color name="colorFAB1">#2196F3</color>     <color name="colorFAB2">#E040FB</color> </resources>

Defining Animation

Our project has four animations. They are,

1. fab_open
2. fab_close
3. rotate_forward
4. rotate_backward

The defined animations are placed in res/anim folder as xml. Let us now discuss what these four animations does

fab_open

Initially the two smaller FAB are invisible and not clickable. When the larger FAB with Add icon is pressed the two smaller FAB scale from their invisible initial position and at the same time opacity increases. These two are achieved by using the<scale> and <alpha> animation elements.

fab_open.xml

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

fab_close

This the exact opposite of the fab_open animation. The two smaller FAB dissappers to its original state.

fab_close.xml

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