Hello guys,

In this tutorial I have defined about reveal effect animation and this tutorial will also help you to set custom circular reveal effect animation in  your app like whatsapp. First, Lets look what is reveal effect animation and for which android version does this work.

Reveal Effect :

Reveal effect is just an animation which animates view's layout with some icons and text. In Android its very convenient to create this animation with the help of method. The reveal animation is developed for Lollipop and above version , the reveal effect animation does not work on below Android 5.0. However, you can use this effect in you app below Lollipop version using support library which I have used in this tutorial. This support library is very convenient to use.

Build Gradle :

First add the repository , and then the dependency in build.gradle(app:module) file.

file- build.gradle

repositories {
    maven {
        url "https://jitpack.io"
    }
}
dependencies {
    compile ('com.github.ozodrukh:CircularReveal:1.1.1@aar') {
        transitive = true;
    }
}

Create a XML layout inside res/layout to design reveal attachment layout. This layout is by name reveal_effect_attachment.xml file and includes three icons gallery,camera and video icons. You can also increase number of icons as per your need like whatsapp.
 

file- reveal_effect_attachment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/reveal_items"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!--row 1 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/attachment_strip"
        android:orientation="horizontal"
        android:padding="16dp">

        <!--Gallery Icon -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/gallery_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/gallery" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="gallery" />
        </LinearLayout>

        <!--Photo Icon -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/camera_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/photo" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="camera" />
        </LinearLayout>

        <!--Video Icon -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/video_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/video" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="video" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

Create another XML layout file inside res/layout which is using to design MainActivity file. This XML layout file include XML tag RevealFrameLayout. RevealFrameLaout tag using from reveal library direct here. This xml file also include reveal_effect_attachment inside RevealFrameLayout tag.

file- activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/mainLayout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:isScrollContainer="false"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize" />

        <io.codetail.widget.RevealFrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

           <!--Define here activity's main view layout within this relative layout  -->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                            <android.support.v7.widget.RecyclerView
                                android:id="@+id/recyclerView"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:scrollbars="none" />

                        </RelativeLayout>
            <!--Closed main layout -->

            <!--Included here reveal effect layout -->
            <include layout="@layout/reveal_effect_attachment" />
        </io.codetail.widget.RevealFrameLayout>
    </LinearLayout>
</FrameLayout>

Toolbar layout file:

Create a toolbar XML layout file by name toolbar_layout.xml. This xml include a tag <ImageView> which is attachment icon. After click on this icon show reveal effect animation layout.
 

file- toolbar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="center_vertical"
    android:id="@+id/mainRelativeLayout"
    android:background="@color/colorPrimary">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="56dp"
        android:text="Reveal Effect Animation"
        android:id="@+id/title"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="@android:color/white"/>


<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerInParent="true"
    android:padding="10sp"
    android:id="@+id/attachment"
    android:src="@drawable/ic_attach_file_white_24dp"/>
</RelativeLayout>

MainActivity:-

Create a class MainActivity which extends AppCompatActivity and set content of activity to defined above xml layout. In this activity class defined initializeUI() method to initialize all the required views.

As we know circular reveal effect animation suited for Lollipop and above version. To run in below version we are using support library. First we check android version of running device at run time by following method

// This function call when click on attachment button of actionbar and display reveal animation layout


    private void showRevealEffectAnimation() {
        int cx = (mRevealView.getLeft() + mRevealView.getRight());
        int cy = mRevealView.getTop();
        int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight());

        //Below Android LOLIPOP Version
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            SupportAnimator animator =
                    ViewAnimationUtils.createCircularReveal(mRevealView, cx, cy, 0, radius);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.setDuration(700);
            SupportAnimator animator_reverse = animator.reverse();

            if (hidden) {
                mRevealView.setVisibility(View.VISIBLE);
                animator.start();
                hidden = false;
            } else {
                animator_reverse.addListener(new SupportAnimator.AnimatorListener() {
                    @Override
                    public void onAnimationStart() {

                    }

                    @Override
                    public void onAnimationEnd() {
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;

                    }

                    @Override
                    public void onAnimationCancel() {

                    }

                    @Override
                    public void onAnimationRepeat() {

                    }
                });
                animator_reverse.start();
            }
        }
        // Android LOLIPOP And ABOVE Version
        else {
            if (hidden) {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, 0, radius);
                mRevealView.setVisibility(View.VISIBLE);
                anim.start();
                hidden = false;
            } else {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, radius, 0);
                anim.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;
                    }
                });
                anim.start();
            }
        }

    }

Complete code for MainActivity is defined below:-

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;

import io.codetail.animation.SupportAnimator;
import io.codetail.animation.ViewAnimationUtils;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private Toolbar mToolbar;
    private RelativeLayout mActionBarCustom;
    private ImageView mAttachmentImageView;
    private LinearLayout mRevealView;
    private boolean hidden = true;
    private ImageView mGalleryIconImagView,mCameraIconImageView,mVideoIconImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize all view's id
        initialzeUI();

        

    }
    private void initialzeUI(){

        mRevealView = (LinearLayout) findViewById(R.id.reveal_items);
        mRevealView.setVisibility(View.GONE);
        mGalleryIconImagView = (ImageView) mRevealView.findViewById(R.id.gallery_icon);
        mGalleryIconImagView.setOnClickListener(this);
        mCameraIconImageView = (ImageView) mRevealView.findViewById(R.id.camera_icon);
        mCameraIconImageView.setOnClickListener(this);
        mVideoIconImageView = (ImageView) mRevealView.findViewById(R.id.video_icon);
        mVideoIconImageView.setOnClickListener(this);


        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(false);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mActionBarCustom = (RelativeLayout) inflater.inflate(R.layout.toolbar_layout, null);
        getSupportActionBar().setDisplayShowCustomEnabled(true);

         mAttachmentImageView= (ImageView) mActionBarCustom.findViewById(R.id.attachment);
         mAttachmentImageView.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 // call revel effect animation and show option to choose mulitmedi
                 showRevealEffectAnimation();
             }
         });

        getSupportActionBar().setCustomView(mActionBarCustom);
    }


    // This function call when click on attachment button of actionbar and display reveal animation layout
    private void showRevealEffectAnimation() {
        int cx = (mRevealView.getLeft() + mRevealView.getRight());
        int cy = mRevealView.getTop();
        int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight());

        //Below Android LOLIPOP Version
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            SupportAnimator animator =
                    ViewAnimationUtils.createCircularReveal(mRevealView, cx, cy, 0, radius);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.setDuration(700);
            SupportAnimator animator_reverse = animator.reverse();

            if (hidden) {
                mRevealView.setVisibility(View.VISIBLE);
                animator.start();
                hidden = false;
            } else {
                animator_reverse.addListener(new SupportAnimator.AnimatorListener() {
                    @Override
                    public void onAnimationStart() {

                    }

                    @Override
                    public void onAnimationEnd() {
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;

                    }

                    @Override
                    public void onAnimationCancel() {

                    }

                    @Override
                    public void onAnimationRepeat() {

                    }
                });
                animator_reverse.start();
            }
        }
        // Android LOLIPOP And ABOVE Version
        else {
            if (hidden) {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, 0, radius);
                mRevealView.setVisibility(View.VISIBLE);
                anim.start();
                hidden = false;
            } else {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, radius, 0);
                anim.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;
                    }
                });
                anim.start();
            }
        }

    }


    @Override
    public void onClick(View v) {
        if (v.getId() == mGalleryIconImagView.getId()) {
            // Invisible reveal animation layout
            mRevealView.setVisibility(View.INVISIBLE);
            hidden = true;

            Toast.makeText(this,"Clicked Gallery",Toast.LENGTH_SHORT).show();

        } else if (v.getId() == mCameraIconImageView.getId()) {
            // Invisible reveal animation layout
            mRevealView.setVisibility(View.INVISIBLE);
            hidden = true;

            Toast.makeText(this,"Clicked Camera",Toast.LENGTH_SHORT).show();

        } else if (v.getId() == mVideoIconImageView.getId()) {
            mRevealView.setVisibility(View.INVISIBLE);
            hidden = true;

            Toast.makeText(this,"Clicked Video",Toast.LENGTH_SHORT).show();
        }
    }
}

We have used some more resources directory like images,drawable xml file ,colors,style and string which is not defined with this blog. You can download complete source code from following link.

https://www.dropbox.com/s/gsn8supxmwpwagh/RevealEffectAnimation.zip?dl=0