Open top menu

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.


0 comments