Open Close effect Android floating action button animation

In first lesson i will teach you that how you can rotate floating action button, to make effect like open and close floating action button with google material design. As shown in below screenshot.

google material design

Now you are thinking about that you can use 2 icons 1 for + icon and other for x icon. And then rotate + icon and hide it to show x icon.

But not, actually its too easy.

I will just rotate floating action button instead of + icon. And it will become open floating action button as google material design.

create new file in res/anim/ folder rotate_forward.xml and write below code :

rotate_forward.xml
<?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:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:anim/linear_interpolator"
        android:toDegrees="45" />
</set>

create new file in res/anim/ folder rotate_backward.xml and write below code :

rotate_backward.xml
<?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:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:anim/linear_interpolator"
        android:toDegrees="0" />
</set>

explanation:

code of rotate_forward.xml file rotate object from 0 degree to 45 degree, which will make + icon as x icon. “pivotX” and “pivotY” are center of object from where we want to rotate, duration is time period for animation, and fillAfter is to save state of animation.

to use these files lets code in java file.

MainActivity.java
package com.edablogs.materialdesign;

import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private boolean rotate; //save current state of FloatingActionButton (open or close).

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final Animation forward = AnimationUtils.loadAnimation(this, R.anim.rotate_forward); //load animation from xml to java.
        final Animation backward = AnimationUtils.loadAnimation(this, R.anim.rotate_backward);
        final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (rotate) {
                    fab.startAnimation(backward); //if FloatingActionButton is open then close.
                } else {
                    fab.startAnimation(forward); // else open FloatingActionButton.
                }
                rotate = !rotate; // reverse value of this boolean.

            }
        });

    }
}

and in layout file

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="com.edablogs.materialdesign.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@drawable/ic_add" />

</android.support.design.widget.CoordinatorLayout>

In further posts i will post more related to android floating action button animation