Open top menu

 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…

0 comments