CODEWITHSUNDEEP
javaandroidxmluser-interface
SysVoid
SysVoid

Reputation: 584

Android: Ripple Background Programmatically

I am currently creating an Android app where someone can input their name, press a button, and then it just outputs their name back to them.

One effect that I would like to achieve with this is an effect where, after they push the button, the input and button will vanish (complete this bit so far), and then the background colour of the MainActivity's view will do a ripple (from the centre) with a new colour, eventually changing the full background colour.

How would I go about doing this programatically, since I am only able to find tutorials on adding ripples to buttons when pushed?

Upvotes: 15

Views: 6207

Answers (3)

bonnyz
bonnyz

Reputation: 13558

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.

Upvotes: 7

Vishavjeet Singh
Vishavjeet Singh

Reputation: 1385

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();
            }
        });
    }

Attached GIF for your reference

You can take detailed look at official documentation here: http://developer.android.com/training/material/animations.html

Upvotes: 9

Osvaldo Bringaz
Osvaldo Bringaz

Reputation: 127

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

Upvotes: -1

Related Questions