Reveal Effect in material design

• Animations in material design give users feedback on their actions and provide visual continuity as users interact with your app.
• Android 5.0 (API level 21) and above lets you customize these animations and create new ones
• Touch feedback
• Circular Reveal
• Activity transitions
• Curved motion
• View state changes

In this post i am going to discuss about Circular Reveal animation and how to customize touch feedback animation .The common touch feedback animation in material design is ripple effect

Use the Reveal Effect

• Reveal animations provide users visual continuity when you show or hide a group of UI elements.
• The ViewAnimationUtils.createCircularReveal()method enables you to animate view

To reveal a previously invisible view using this effect:

layout.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.compindia.circlerevealapp.CircleRevealActivity">
    <Button
        android:id="@+id/bt_circularreveal_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Circular Reveal"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_circlereveal_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        app:useCompatPadding="true"
        android:src="@drawable/ic_vibration_black_24dp"
        />
    
</LinearLayout>

activity.xml

public class CircleRevealActivity extends AppCompatActivity implements View.OnClickListener {
    private Button btCircularRevealShow;

    private FloatingActionButton fabCircularReavalShow;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circle_reveal);
        setUpViews();
    }
    private void setUpViews() {
        btCircularRevealShow = (Button) findViewById(R.id.bt_circularreveal_show);
        
        fabCircularReavalShow = (FloatingActionButton) findViewById(R.id.fab_circlereveal_start);
        btCircularRevealShow.setOnClickListener(this);

    }
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.bt_circularreveal_show:
                showCircularReveal();
                break;
        }
    }
    private void showCircularReveal() {
        int cx = fabCircularReavalShow.getWidth() / 2;
        int cy = fabCircularReavalShow.getHeight() / 2;
        float finalRadius = Math.max(cx, cy);
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            Animator animator = ViewAnimationUtils.createCircularReveal(fabCircularReavalShow, cx, cy, 0, finalRadius);
            animator.start();
            fabCircularReavalShow.setVisibility(View.VISIBLE);
        }
    }
}

To hide a previously visible view using this effect

layout.xml

<LinearLayout
    >
    
    <Button
        android:id="@+id/bt_circularreveal_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_circlereveal_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        app:useCompatPadding="true"
        android:src="@drawable/ic_vibration_black_24dp"
        />
</LinearLayout>

Activity.java

public class CircleRevealActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btCircularRevealEnd;
    private FloatingActionButton fabCircularReavalEnd;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circle_reveal);
        setUpViews();
    }
    private void setUpViews() {
        btCircularRevealEnd = (Button) findViewById(R.id.bt_circularreveal_end);
        fabCircularReavalEnd = (FloatingActionButton) findViewById(R.id.fab_circlereveal_end);
        btCircularRevealEnd.setOnClickListener(this);
    }
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.bt_circularreveal_end:
                endCircularReaveal();
                break;
        }
    }
    private void endCircularReaveal() {
        fabCircularReavalEnd.setVisibility(View.VISIBLE);
        int cx = fabCircularReavalEnd.getWidth() / 2;
        int cy = fabCircularReavalEnd.getHeight() / 2;
        float initialRadious = Math.max(cx, cy);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Animator animator = ViewAnimationUtils.createCircularReveal(fabCircularReavalEnd, cx, cy, initialRadious, 0);
            animator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animator) {
                }
                @Override
                public void onAnimationEnd(Animator animator) {
                    fabCircularReavalEnd.setVisibility(View.INVISIBLE);
                }
                @Override
                public void onAnimationCancel(Animator animator) {
                }
                @Override
                public void onAnimationRepeat(Animator animator) {
                }
            });
            animator.start();
        }
    }
 
}

This is small program to understand the concept of the circular revel effect in material design.Do more complicated one then we will understand the more about this animations