Make ripple fill whole View Make ripple fill whole View android android

Make ripple fill whole View


You can achieve this effect by creating your custom RippleView. Draw circle on full view using onDraw method and set Animation to that circle.

if (animationRunning) {            canvas.save();            if (rippleDuration <= timer * frameRate) {                animationRunning = false;                timer = 0;                durationEmpty = -1;                timerEmpty = 0;                // There is problem on Android M where canvas.restore() seems to be called automatically                // For now, don't call canvas.restore() manually on Android M (API 23)                if(Build.VERSION.SDK_INT != 23) {                    canvas.restore();                }                invalidate();                if (onCompletionListener != null) onCompletionListener.onComplete(this);                return;            } else                canvasHandler.postDelayed(runnable, frameRate);            if (timer == 0)                canvas.save();            canvas.drawCircle(x, y, (radiusMax * (((float) timer * frameRate) / rippleDuration)), paint);            paint.setColor(Color.parseColor("#ffff4444"));            if (rippleType == 1 && originBitmap != null && (((float) timer * frameRate) / rippleDuration) > 0.4f) {                if (durationEmpty == -1)                    durationEmpty = rippleDuration - timer * frameRate;                timerEmpty++;                final Bitmap tmpBitmap = getCircleBitmap((int) ((radiusMax) * (((float) timerEmpty * frameRate) / (durationEmpty))));                canvas.drawBitmap(tmpBitmap, 0, 0, paint);                tmpBitmap.recycle();            }            paint.setColor(rippleColor);            if (rippleType == 1) {                if ((((float) timer * frameRate) / rippleDuration) > 0.6f)                    paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timerEmpty * frameRate) / (durationEmpty)))));                else                    paint.setAlpha(rippleAlpha);            }            else                paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timer * frameRate) / rippleDuration))));            timer++;        }

The implementation is stolen from RippleEffect Library project. Find full implementation in library project.

To create circle from only center poistion use below method

 /**     * Launch Ripple animation for the current view centered at x and y position     *     * @param x Horizontal position of the ripple center     * @param y Vertical position of the ripple center     */    public void animateRipple(final float x, final float y) {        createAnimation(x, y);    }/** * Create Ripple animation centered at x, y * * @param x Horizontal position of the ripple center * @param y Vertical position of the ripple center */private void createAnimation(final float x, final float y) {    if (this.isEnabled() && !animationRunning) {        if (hasToZoom)            this.startAnimation(scaleAnimation);        radiusMax = Math.max(WIDTH, HEIGHT);        if (rippleType != 2)            radiusMax /= 2;        radiusMax -= ripplePadding;        if (isCentered || rippleType == 1) {            this.x = getMeasuredWidth() / 2;            this.y = getMeasuredHeight() / 2;        } else {            this.x = x;            this.y = y;        }        animationRunning = true;        if (rippleType == 1 && originBitmap == null)            originBitmap = getDrawingCache(true);        invalidate();    }}

Output :

You can get circle that grows from the middle until it fills the whole Viewenter image description here


Ripple effect For Clickable Views

ripple effect for regular buttons will work by default in API 21, and for other
touchable views it can be achieved by specifying
android:background="?android:attr/selectableItemBackground">In Java CODE int[] attrs = new int[]{R.attr.selectableItemBackground}; TypedArray typedArray = getActivity().obtainStyledAttributes(attrs); int backgroundResource = typedArray.getResourceId(0, 0); myView.setBackgroundResource(backgroundResource);

Buttons
 Button Image

Most buttons are made with several drawables. Usually you’ll have a pressed and
normal version of assets like this:/drawable/button.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>    <item android:drawable="@drawable/button_normal"/></selector>
If you have a custom button with selected state, your text color changes 
depending on the state, etc. So the default button background is not going
to work for you here. You can add this feedback for your own drawables and
for custom buttons by simply wrapping them in a ripple element:/drawable-v21/button.xml:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"    android:color="?android:colorControlHighlight">    <item android:drawable="@drawable/button_normal" /></ripple>

Using ?android:colorControlHighlight will give the ripple the same color as the built-in ripples in your app.

If you don’t like the default grey, you can specify what color you want android:colorControlHighlight to be in your theme.

<?xml version="1.0" encoding="utf-8"?><resources>  <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">    <item name="android:colorControlHighlight">@color/your_custom_color</item>  </style></resources>

If you want the ripple to extend past the boundary of the view, then you can
instead use ?attr/selectableItemBackgroundBorderless. This works well with
ImageButtons and smaller Buttons that are part of a larger View:


Try this i hope its work for you

Use android:foreground="@drawable/ripple"

instead of android:background="@drawable/ripple"

and also change android:radius="0dp" to 50dp or 100dp and check