Water Ripple effect onClick Layout in Android ?

Water Ripple effect onClick Layout in Android

In this blog explain how to show water effcte onclick layout in android. explain how

Step 1.Create attrs xml class in res/value/attrs.xml. In this class write a attr name as per rquire...

attrs.xml.

..................................................................................................................................................................

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="RippleBackground">

        

        <attr name="rb_color" format="color" />

        <attr name="rb_strokeWidth" format="dimension"/>

        <attr name="rb_radius" format="dimension"/>

        <attr name="rb_duration" format="integer"/>

        <attr name="rb_rippleAmount" format="integer"/>

        <attr name="rb_scale" format="float"/>

        

        <attr name="rb_type" format="enum">

            <enum name="fillRipple" value="0"/>

            <enum name="strokeRipple" value="0"/>

        </attr>

        

    </declare-styleable>

   

    

</resources>

..................................................................................................................................................................

Step 2 Create dimentions xml class inside res/value/dimentions.xml. In this class add dimen ripple width or ripple radius accordingly. 

dimentions.xml

..................................................................................................................................................................

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <dimen name="rippleStrokeWidth">2dp</dimen>

    <dimen name="rippleRadius">64dp</dimen>

</resources>

..................................................................................................................................................................

Step 3.Create RippleBackground  xml  layout via programmatically.

 RippleBackground .java
.................................................................................................................................................................

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.RelativeLayout;

import java.util.ArrayList;

import com.webnetware.singingbowl.R;



public class RippleBackground extends RelativeLayout{

    private static final int DEFAULT_RIPPLE_COUNT=12;
    private static final int DEFAULT_DURATION_TIME=3000;
    private static final float DEFAULT_SCALE=12.0f;
    private static final int DEFAULT_FILL_TYPE=0;

    private int rippleColor;
    private float rippleStrokeWidth;
    private float rippleRadius;
    private int rippleDurationTime;
    private int rippleAmount;
    private int rippleDelay;
    private float rippleScale;
    private int rippleType;
    private Paint paint;
    private boolean animationRunning=false;
    private AnimatorSet animatorSet;
    private ArrayList<Animator> animatorList;
    private LayoutParams rippleParams;
 
    private ArrayList<RippleView> rippleViewList=new ArrayList<RippleView>();

    public RippleBackground(Context context) {
        super(context);
    }

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

    public RippleBackground(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(final Context context, final AttributeSet attrs) {
        if (isInEditMode())
            return;

        if (null == attrs) {
            throw new IllegalArgumentException("Attributes should be provided to this view,");
        }

        final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleBackground);
        rippleColor=typedArray.getColor(R.styleable.RippleBackground_rb_color, getResources().getColor(R.color.rippelColor));
        rippleStrokeWidth=typedArray.getDimension(R.styleable.RippleBackground_rb_strokeWidth, getResources().getDimension(R.dimen.rippleStrokeWidth));
        rippleRadius=typedArray.getDimension(R.styleable.RippleBackground_rb_radius,getResources().getDimension(R.dimen.rippleRadius));
        rippleDurationTime=typedArray.getInt(R.styleable.RippleBackground_rb_duration,DEFAULT_DURATION_TIME);
        rippleAmount=typedArray.getInt(R.styleable.RippleBackground_rb_rippleAmount,DEFAULT_RIPPLE_COUNT);
        rippleScale=typedArray.getFloat(R.styleable.RippleBackground_rb_scale,DEFAULT_SCALE);
        rippleType=typedArray.getInt(R.styleable.RippleBackground_rb_type,DEFAULT_FILL_TYPE);
     
        typedArray.recycle();

        rippleDelay=rippleDurationTime/rippleAmount;

        paint = new Paint();
        paint.setAntiAlias(true);
        if(rippleType==DEFAULT_FILL_TYPE){
            rippleStrokeWidth=0;
            paint.setStyle(Paint.Style.FILL);
        }else
            paint.setStyle(Paint.Style.STROKE);
        paint.setColor(rippleColor);

        rippleParams=new LayoutParams((int)(2*(rippleRadius+rippleStrokeWidth)),(int)(2*(rippleRadius+rippleStrokeWidth)));
        rippleParams.addRule(CENTER_IN_PARENT, TRUE);

        animatorSet = new AnimatorSet();
        animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
        animatorList=new ArrayList<Animator>();

            for(int i=0;i<rippleAmount;i++){
           
            RippleView rippleView=new RippleView(getContext());
            addView(rippleView,rippleParams);
            rippleViewList.add(rippleView);
         
            final ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(rippleView, "ScaleX", 1.0f, rippleScale);
            scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);
            scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART);
            scaleXAnimator.setStartDelay(i * rippleDelay);
            scaleXAnimator.setDuration(rippleDurationTime);
            animatorList.add(scaleXAnimator);
         
            final ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(rippleView, "ScaleY", 1.0f, rippleScale);
            scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);
            scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART);
            scaleYAnimator.setStartDelay(i * rippleDelay);
            scaleYAnimator.setDuration(rippleDurationTime);
            animatorList.add(scaleYAnimator);
         
            final ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(rippleView, "Alpha", 1.0f, 0f);
            alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE);
            alphaAnimator.setRepeatMode(ObjectAnimator.RESTART);
            alphaAnimator.setStartDelay(i * rippleDelay);
            alphaAnimator.setDuration(rippleDurationTime);
            animatorList.add(alphaAnimator);
        }

        animatorSet.playTogether(animatorList);
    }

    private class RippleView extends View{

        public RippleView(Context context) {
            super(context);
            this.setVisibility(View.INVISIBLE);
        }

        @Override
        protected void onDraw(Canvas canvas) {
       
            int radius=(Math.min(getWidth(),getHeight()))/2;
            canvas.drawCircle(radius,radius,radius-rippleStrokeWidth,paint);
        }
    }

    public void startRippleAnimation(){
   
        if(!isRippleAnimationRunning()){
       
            for(RippleView rippleView:rippleViewList){
                rippleView.setVisibility(VISIBLE);
            }
         
            animatorSet.start();
            animationRunning=true;
        }
    }

    public void stopRippleAnimation(){
   
        if(isRippleAnimationRunning()){
            animatorSet.end();
            animationRunning=false;
        }
    }

    public boolean isRippleAnimationRunning(){
   
        return animationRunning;
    }
}

...................................................................................................................................................................

Step 4. Create activity_main inside res/layout folder.....

activity_main.xml

.................................................................................................................................................................

        <RelativeLayout

            xmlns:android="http://schemas.android.com/apk/res/android"

            xmlns:tools="http://schemas.android.com/tools"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:id="@+id/ScrollView1"

            android:background="@drawable/background"

             >

            <com.webnetware.view.RippleBackground

                xmlns:android="http://schemas.android.com/apk/res/android"

                xmlns:app="http://schemas.android.com/apk/res-auto"

                android:id="@+id/content"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_marginBottom="-4dip"

                app:rb_color="@color/one_backcolor"

                app:rb_duration="3000"

                app:rb_radius="32dp"

                app:rb_rippleAmount="1"

                app:rb_scale="14" >

                 

                <ImageView

                    android:id="@+id/imageView"

                    android:layout_width="50dp"

                    android:layout_height="50dp"

                    android:layout_alignParentEnd="true"

                    android:layout_alignParentRight="true"

                    android:layout_centerVertical="true"

                    android:contentDescription="@null"

                    android:src="@drawable/forword_arrow" />

            </com.webnetware.view.RippleBackground>

        </RelativeLayout>

...................................................................................................................................................................

        

    

Step 5. create MainActivity java class inside src/ folder

        

    MainActivity.xml

..................................................................................................................................................................

import java.util.ArrayList;

import android.animation.Animator;

import android.animation.AnimatorSet;

import android.animation.ObjectAnimator;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.AccelerateDecelerateInterpolator;

import android.widget.ImageView;

import com.webnetware.singingbowl.R;

import com.webnetware.view.RippleBackground;

public class Splash_ScreenActivity extends Activity{

RippleBackground rippleBackground;

ImageView image;

private static int SPLASH_TIME_OUT = 3000;

@Override

protected void onCreate(Bundle savedInstanceState) {

 

super.onCreate(savedInstanceState);

setContentView(R.layout.term_and_activity);

rippleBackground=(RippleBackground)findViewById(R.id.content);

image = (ImageView) findViewById(R.id.imageView);

rippleBackground.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

rippleBackground.startRippleAnimation();

foundDevice(image);

  new Handler().postDelayed(new Runnable() {

   

    @Override

    public void run() {  

    rippleBackground.stopRippleAnimation();;  

     

        }  

         }, 3000);  

}

});

..................................................................................................................................................................

first screen without onClick.

second,when we are click on layout.