Android: Ripple Background Programmatically
EDIT:
I tested this by making a small app
First of all hide the view you want to reveal in this animation.
The view can be from the same layout and in xml its visibility should be invisible so that the animation will reveal it.
You can set the view height and width to match parent if you want to create a full screen animation...
Take your original and reveal view both in frame layout
In my case,I have used this:
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Hello World!" android:layout_width="wrap_content" android:textSize="20sp" android:layout_height="wrap_content" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimaryDark" android:id="@+id/revealiew" android:visibility="invisible" ></FrameLayout>
then in your activity on button click
or some event do this:
fab.setOnClickListener(new View.OnClickListener() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onClick(View view) { // previously invisible view View myView = findViewById(R.id.revealview);// get the center for the clipping circle int cx = myView.getWidth() / 2; int cy = myView.getHeight() / 2;// get the final radius for the clipping circle int finalRadius = Math.max(myView.getWidth(), myView.getHeight());// create the animator for this view (the start radius is zero) Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); //Interpolator for giving effect to animation anim.setInterpolator(new AccelerateDecelerateInterpolator()); // Duration of the animation anim.setDuration(1000);// make the view visible and start the animation myView.setVisibility(View.VISIBLE); anim.start(); } }); }
You can take detailed look at official documentation here:http://developer.android.com/training/material/animations.html
What you are describing is a reveal effect on the background.
From the official doc you can find ready to use examples:
1) Here is how to reveal a previously invisible view using reveal effect:
// previously invisible view View myView = findViewById(R.id.my_view); // get the center for the clipping circle int cx = myView.getWidth() / 2; int cy = myView.getHeight() / 2; // get the final radius for the clipping circle int finalRadius = Math.max(myView.getWidth(), myView.getHeight()); // create the animator for this view (the start radius is zero) Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); // make the view visible and start the animation myView.setVisibility(View.VISIBLE); anim.start();
2) Here is how to hide a previously visible view using the reveal effect:
// previously visible view final View myView = findViewById(R.id.my_view); // get the center for the clipping circle int cx = myView.getWidth() / 2; int cy = myView.getHeight() / 2; // get the initial radius for the clipping circle int initialRadius = myView.getWidth(); // create the animation (the final radius is zero) Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0); // make the view invisible when the animation is done anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); myView.setVisibility(View.INVISIBLE); } }); // start the animation anim.start();
In you app, you can use a colored background layer (invisible at the beginning) and then use the reveal effect on it.
check this site, "Android Ripple Background" is a library to do it and the min sdk is 11 (Android 3.0 Honeycomb)
https://android-arsenal.com/details/1/1107