Ripple Android L preview touch

Question

Im trying to create the android L preview "ripple" effect on touch event in a view. If i use this code for a button works:

public class MyButton extends Button {

    private float mDownX;
    private float mDownY;

    private float mRadius;

    private Paint mPaint;

    public MyButton(final Context context) {
        super(context);
        init();
    }

    public MyButton(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyButton(final Context context, final AttributeSet attrs, final int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAlpha(100);
    }

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

Even if not exactly as in Android L preview but it works.. However..if i change Button and i try with a View class not works..is that some what to create that effect in an entire view instead only in a button?

Answer 1

My answer is kind of late and I also shared this solution on this original question too but I also want to share it here. 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.