L-release-like Touch Ripple animation on pre-L

Question

I love the new Touch Ripple animation that was introduced in the new Android L-release as part of the new UI philosophy Material Design.

You can find a video of it in the official design spec under surface reaction here: http://www.google.com/design/spec/animation/responsive-interaction.html

It's basically a dark-gray circle that fades in at the center of the view and grows as it fades out again, eventually filling the whole view with a light gray before disappearing again.

I'd like to add the very same animation to a view in my app that is targetting ICS.

I am a bit clueless on how to add this animation in my application. The official docs at http://developer.android.com/training/animation/index.html don't seem to cover animations that happen "inside a view". Also, I'd like not to use pre-drawn frame animations (one png resource per frame) if possible.

How would I go about implementing that? Any help is highly appreciated!

I would wait until tomorrow (when the new L-related APIs will be released) so we can see if there will be something in the support library to support this. — Bryan Herbst, Jun 25 '14 at 21:15
the best way is using a custom drawable. Please see my previous answer: http://stackoverflow.com/questions/24213356/animating-actionbars-icon/24214040#24214040 (make sure to also read the comments on the answer) — Budius, Jun 25 '14 at 21:22

score 18 · Accepted Answer · answered Jun 25 '14 at 20:46

Something I cooked up quickly, far from ideal, but hey, it's something: Gist

Basically drawing a circle based on an animated radius. To get the exact L-effect, some more tweaking should be done. The interesting code:

@Override
public boolean onTouchEvent(@NonNull final MotionEvent event) {
    if (event.getActionMasked() == MotionEvent.ACTION_UP) {
        mDownX = event.getX();
        mDownY = event.getY();

        ObjectAnimator animator = ObjectAnimator.ofFloat(this, "radius", 0, getWidth() * 3.0f);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.setDuration(400);
        animator.start();
    }
    return super.onTouchEvent(event);
}

public void setRadius(final float radius) {
    mRadius = radius;
    if (mRadius > 0) {
        RadialGradient radialGradient = new RadialGradient(
                mDownX,
                mDownY,
                mRadius * 3,
                Color.TRANSPARENT,
                Color.BLACK,
                Shader.TileMode.MIRROR
        );
        mPaint.setShader(radialGradient);
    }
    invalidate();
}

private Path mPath = new Path();
private Path mPath2 = new Path();

@Override
protected void onDraw(@NonNull final Canvas canvas) {
    super.onDraw(canvas);

    mPath2.reset();
    mPath2.addCircle(mDownX, mDownY, mRadius, Path.Direction.CW);

    canvas.clipPath(mPath2);

    mPath.reset();
    mPath.addCircle(mDownX, mDownY, mRadius / 3, Path.Direction.CW);

    canvas.clipPath(mPath, Region.Op.DIFFERENCE);

    canvas.drawCircle(mDownX, mDownY, mRadius, mPaint);
}

In their talk "What's new in Android", they talked about that this animation actually happens on a separate "Render thread", which will make its debut in the L-release. This will allow smoother animations, even when the UI thread is busy inflating, or doing anything else expensive.

Thanks! I guess I'll eventually use a combination of your answer and Budius' comment. — FD_, Jun 27 '14 at 08:44
Your idea is great ,but the gradient should remain while the user is touching the button, no? — harveyslash, Aug 01 '14 at 05:37
Is there a noticeable performance impact on pre-L devices without the Render Thread? — Xiao, Jun 02 '15 at 02:52

score 5 · Answer 2 · answered Sep 25 '14 at 16:39

My answer is kind of late but I wanted to share my solution too. I created another class called TouchEffectAnimator with the idea of Niek Haarman. Thanks to Mr. Haarman by the way.

You can see the class and an example usage of it on this gist. Also I'll explain it simply.

The class contains all the necessary methods and variables in it and creates the same animation that Android L (preview) currently has. For using this class:

Create a custom view. (in gist example I created a LinearLayout)
Initialise the TouchEffectAnimator object.
Define some attributes of it like color, effect type, duration and clip corners size.
Call the onTouchEvent method of TouchEffectAnimator inside the view's onTouchEvent.
Call the onDraw method of TouchEffectAnimator inside the view's onDraw.

and that's it. But there are two things that should be done for this class to work properly.

There should be some OnClickListener on the view to get the UP touch event.
There should be a custom or transparent background set to the view. If nothing is set as background the animation is not shown.

I hope it works for you too.

P.S. I created this class for my library project Android FlatUI Kit. You can see the usage of this class in FlatButton class as well.

Nice, thank you for sharing this, I'm going to try and tune your TouchEffectAnimator, it works perfectly ! — 2Dee, Nov 24 '14 at 22:12
This is working awesome except for a small inconsistency that I have observed. If the FIRST touch on button is a QUICK one(state_pressed will be only very little time), animation is not proper. — Sreeraj, Apr 09 '15 at 05:57

L-release-like Touch Ripple animation on pre-L

2 Answers2

Linked