Water Ripple Animation in Android

 Water Ripple Animation 

In this blog post i am explain briefly about how to display the water ripple animated in Android. the ripple animation Display via LoadAnimation class. The water ripple show  when  you are touch the mobile screen. I have explained step by step…
 

Step 1:

Save your image which you want to display ripple in drawable folder.

Step 2:

Create anim folder in your res/anim folder…

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

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

    android:fillAfter="false"

    android:interpolator="@android:anim/accelerate_interpolator" >

 <scale

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

        android:duration="3000"

        android:fromXScale="0.3"

        android:fromYScale="0.3"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toXScale="10.0"

        android:toYScale="10.0">

    </scale>

     <alpha

        android:duration="2800"

        android:fromAlpha="1.0"

        android:interpolator="@android:anim/accelerate_interpolator"

        android:toAlpha="0.0" />

     </set>

Step 3:

Create a gradient xml class inside your res/drawable folder …

water_ripplecircle.xml……………………………………………………………………………..

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

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

    android:innerRadius="0dp"

    android:shape="ring"

    android:thicknessRatio="2.1"

    android:useLevel="false" >

   

    <solid android:color="@android:color/transparent" />

    <size

        android:height="100dp"

        android:width="100dp" />

    <stroke

        android:width="1dp"

        android:color="#000000" />

</shape>

ripple_splashbackground.xml……………………………………………………………………………………………………………

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

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

    android:shape="rectangle"

    >

   

    <gradient android:startColor="#2a80b5"

        android:endColor="#66adcc"

        android:angle="90" />

</shape>

ripple_strokegradient.xml…………………………………………………………………………………………………………………………………………………..

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

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

    android:shape="rectangle" >

   

       <gradient android:startColor="#000000"

           android:endColor="#EEEEEE"/>

   

</shape>

 

Step 4:

Create a file create waterripple.xml in your resource/layout folder …

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

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

    android:id="@+id/rootLayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="@drawable/backgroung_image" >

    <TextView

        android:id="@+id/tvTapMessage"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="20dp"

        android:textColor="#000000"

        android:textSize="20dip"

        android:textStyle="bold|italic"

        android:text="Android Beginner point" />

</RelativeLayout>

Step 5:

Created  WaterRipple .java inside src folder.

package com.androidbeginner.testcode;

import java.util.ArrayList;

import android.R.string;

import android.annotation.SuppressLint;

import android.app.ActionBar.LayoutParams;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.View.OnTouchListener;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.view.animation.Animation.AnimationListener;

import android.view.animation.AnimationUtils;

import android.widget.FrameLayout;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.Toast;

public class WaterRipple extends Activity {

            private ImageView ivRipple;

            private RelativeLayout relativeLayout;

            int i=0;

            private Animation anim;

            private AnimationListener animListener;

    ArrayList<string> jsonamount ;

   

            @Override

            protected void onCreate(Bundle savedInstanceState) {

                        super.onCreate(savedInstanceState);

                        setContentView(R.layout.waterripple);

                        jsonamount=new ArrayList<string>();

                         

      

                        relativeLayout = (RelativeLayout) findViewById(R.id.rootLayout);

                       

                        animListener = new AnimListener(relativeLayout);

                         

                        relativeLayout.setOnTouchListener(new OnTouchListener() {

                                    @Override

                                    public boolean onTouch(View v, MotionEvent event) {

                                               

                                                 

                                                int eventAction =event.getAction();

                                                switch(eventAction) {

                                               

                                                case MotionEvent.ACTION_DOWN: {

                                                 

                                                             

                                                           

                                                            float TouchX = event.getX();

                                                            float TouchY = event.getY();

                                                             

                                                             

                                                            ivRipple = new ImageView(WaterRipple.this);

                                                           

                                                            ivRipple.setLayoutParams(new ViewGroup.LayoutParams(

                                                                                    ViewGroup.LayoutParams.MATCH_PARENT,

                                                                                    ViewGroup.LayoutParams.MATCH_PARENT));

                                                           

                                                            ivRipple.setImageResource(R.drawable.ripple);

                                                             

                                                           

                                                            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(50,50);

                                                           

                                                            params.leftMargin = (int) TouchX;

                                                    params.topMargin = (int) TouchY;

                                                                       

                                                            relativeLayout.addView(ivRipple, params);

                                                           

                                                            anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.water_ripple);

                                                            ivRipple.setAnimation(anim);                                                     

                                                            anim.setAnimationListener(animListener);

                                                             

                                                 

                                                            break;

                                                           

                                                }

                                                }  

                                                return true;

                                    }

                        });

            }

             

class AnimListener implements AnimationListener {

            private RelativeLayout relativeLayout;

           

           

            public AnimListener(RelativeLayout relat) {

                       

                        relativeLayout=relat;

            }

            @Override

            public void onAnimationEnd(Animation animation) {

            }

            @Override

            public void onAnimationRepeat(Animation animation) {

            }

            @Override

            public void onAnimationStart(Animation animation) {

                        try{

                                   

                                    relativeLayout.removeAllViews();

                                     

                                   

                        } catch(Exception e){}

            }

}

}

Hope this blog post was helpful…