Androidbeginnerpoint

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"?>

<declare-styleable name="RippleBackground">

</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>

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

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.

Water Ripple effect onClick Layout in Android ?

Water Ripple effect onClick Layout in Android

1 comment:

Blog Archive

Labels

Popular Posts

About Me