Easy steps to make Animation in Android using Android Studio

Animations In Android

 There are four types of animations in android:

1. Translate Animation - to move the object from one place to another place.
2. Scale Animation - to resize the object or zoom the object.
3. Rotate Animation- to rotate the object clockwise or anti-clockwise.

4. Fade Animation - to make visible and invisible the object.

And for each animation we can add the effects, in android framework we call it as Interpolators, those are:

AccelerateDecelerateInterpolator	An interpolator whose rate of change starts andends slowly  but accelerates through the middle.
AccelerateInterpolator	An interpolator whose rate of change starts out slowly  and then accelerates.
AnticipateInterpolator	An interpolator whose change  starts backward then flings forward.
AnticipateOvershootInterpolator	An interpolator whose change starts backward, flings forward and  overshoots the target value, then finally  goes back to the final value.
BounceInterpolator	An interpolator whose change bounces at the end.
CycleInterpolator	An interpolator whose animation repeats  for a specified number of cycles.
DecelerateInterpolator	An interpolator whose rate of change starts out quickly and and then  decelerates.
LinearInterpolator	An interpolator whose rate of change  is constant.
OvershootInterpolator	An interpolator whose change flings forward and overshoots the last value  then comes back.
TimeInterpolator	An interface that allows you to implement your own interpolator.

Here we are going to see simple experiment  with all four animations and few interpolators. Follow the below steps:

 1. Create a new android studio project. And go to web browser download a ball image.
 2. Copy that ball image and paste it inside the drawable folder in the project.

 3. Go to activity_main.xml and add an ImageView and set this ball image to the ImageView.
4. Also add seven buttons in the layout.

5. first four buttons are to make animation and last three buttons are to add effects.
6. Add onClick for each and every button and create the equivalent method in MainActivity.

activity_main.xml:


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"   
 xmlns:app="http://schemas.android.com/apk/res-auto"   
 xmlns:tools="http://schemas.android.com/tools"   
 android:layout_width="match_parent"     
 android:layout_height="match_parent"   
 tools:context="com.example.animation.MainActivity">

    <ImageView       
     android:id="@+id/ball_img"       
     android:layout_width="68dp"       
     android:layout_height="69dp"        
     android:layout_marginStart="16dp"       
     android:layout_marginTop="16dp"       
     android:src="@drawable/ball"       
     app:layout_constraintStart_toStartOf="parent"       
     app:layout_constraintTop_toTopOf="parent" />

    <Button       
     android:id="@+id/button"       
     android:layout_width="wrap_content"       
     android:layout_height="wrap_content"       
     android:layout_marginEnd="7dp"       
     android:layout_marginStart="16dp"       
     android:text="Translate"       
     android:onClick="translate"       
     app:layout_constraintBaseline_toBaselineOf="@+id/button2"       
     app:layout_constraintEnd_toStartOf="@+id/button2"       
     app:layout_constraintHorizontal_chainStyle="spread_inside"       
     app:layout_constraintStart_toStartOf="parent" />

    <Button       
     android:id="@+id/button2"       
     android:layout_width="wrap_content"       
     android:layout_height="wrap_content"       
     android:text="Scale"       
     android:onClick="scale"       
     app:layout_constraintBaseline_toBaselineOf="@+id/button3"       
     app:layout_constraintEnd_toStartOf="@+id/button3"       
     app:layout_constraintStart_toEndOf="@+id/button" />
    <Button       
     android:id="@+id/button3"       
     android:layout_width="wrap_content"       
     android:layout_height="wrap_content"       
     android:layout_marginBottom="25dp"       
     android:layout_marginEnd="1dp"       
     android:text="Rotate"       
     android:onClick="rotate"       
     app:layout_constraintBottom_toTopOf="@+id/button7"       
     app:layout_constraintEnd_toStartOf="@+id/button4"       
     app:layout_constraintStart_toEndOf="@+id/button2" />

    <Button       
     android:id="@+id/button4"       
     android:layout_width="wrap_content"       
     android:layout_height="wrap_content"       
     android:layout_marginEnd="1dp"       
     android:text="Fade"       
     android:onClick="fade"       
     app:layout_constraintBaseline_toBaselineOf="@+id/button3"       
     app:layout_constraintEnd_toEndOf="parent"       
     app:layout_constraintStart_toEndOf="@+id/button3" />

    <Button       
     android:id="@+id/button5"       
     android:layout_width="wrap_content"       
     android:layout_height="wrap_content"       
     android:layout_marginBottom="16dp"       
     android:layout_marginStart="32dp"       
     android:text="Bounce"       
     android:onClick="bounce"       
     app:layout_constraintBottom_toBottomOf="parent"       
     app:layout_constraintStart_toStartOf="parent" />

    <Button       
     android:id="@+id/button6"       
     android:layout_width="wrap_content"       
     android:layout_height="wrap_content"       
     android:layout_marginBottom="16dp"       
     android:layout_marginStart="21dp"       
     android:text="OverShoot"       
     android:onClick="overShoot"       
     app:layout_constraintBottom_toBottomOf="parent"       
     app:layout_constraintStart_toEndOf="@+id/button5" />

    <Button       
     android:id="@+id/button7"       
     android:layout_width="wrap_content"       
     android:layout_height="wrap_content"       
     android:layout_marginStart="12dp"       
     android:text="Accelarate"       
     android:onClick="accelarate"       
     app:layout_constraintBaseline_toBaselineOf="@+id/button6"       
     app:layout_constraintStart_toEndOf="@+id/button6" />
</android.support.constraint.ConstraintLayout>



7. Create new folder for animation. Right click on res folder -> go to New -> Android resource directory.

8. A new window will be open in that choose Resource type as anim and Directory name as anim.

9. A new anim folder will be created under res folder.

 

10. And right click on anim folder and create 4 Animation resource file.

11. Give the name as translate and click OK.

12. Same way create other 3 files, and name those as scale, rotate and fade.

13. Copy the below text paste inside each and every xml file.

   translate.xml

  <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate      
     android:fromXDelta="0%p"      
     android:toXDelta="75%p"      
     android:duration="1000" />
    <translate      
     android:startOffset="1000"      
     android:fromXDelta="0%p"      
     android:toXDelta="-75%p"      
     android:duration="1000"/>
 </set>

   scale.xml

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

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

<scale        
    

android:fromXScale="0.5"        
   

 android:toXScale="3.0"        
    

android:pivotX="0%"        
   

 android:pivotY="0%"        
   

 android:fromYScale="0.5"        
    

android:toYScale="3.0"        
    

android:duration="1000" />
   

<scale        
    

android:startOffset="1000"        
    

android:fromXScale="3.0"        
    

android:toXScale="0.5"        
    

android:pivotX="0%"        
   

 android:pivotY="0%"        
    

android:fromYScale="3.0"        
   

 android:toYScale="0.5"        
    

android:duration="1000"/>
</set>



   rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate        
     android:fromDegrees="0"        
     android:toDegrees="360"        
     android:pivotX="50%"        
     android:pivotY="50%"        
     android:duration="1000"/>
    <rotate        
     android:fromDegrees="360"        
     android:toDegrees="0"        
     android:pivotX="50%"        
     android:pivotY="50%"        
     android:duration="1000"        
     android:startOffset="1000"/>
</set>


   fade.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha        
     android:fromAlpha="0.0"        
     android:toAlpha="1.0"        
     android:duration="1000" />
    <alpha        
     android:fromAlpha="1.0"        
     android:toAlpha="0.0"        
     android:startOffset="1000"        
     android:duration="1000" />
</set>






14. Go to MainActivity.java and load the animation for the image.

MainActivity.java





package com.example.animation;

import android.app.Activity;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.BounceInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.ImageView;

public class MainActivity extends Activity {

    private Animation anim;
    private ImageView mBallImage;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
        mBallImage = (ImageView) findViewById(R.id.ball_img);
    }

    public void translate(View view) {
        anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
        mBallImage.startAnimation(anim);
    }

    public void scale(View view) {
        anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
        mBallImage.startAnimation(anim);
    }

    public void rotate(View view) {
        anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
        mBallImage.startAnimation(anim);
    }

    public void fade(View view) {
        anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade);
        mBallImage.startAnimation(anim);
    }

    public void bounce(View view) {
       anim.setInterpolator(new BounceInterpolator());
       mBallImage.startAnimation(anim);
    }

    public void overShoot(View view) {
        anim.setInterpolator(new OvershootInterpolator());
        mBallImage.startAnimation(anim);
    }

    public void accelarate(View view) {
        anim.setInterpolator(new AccelerateInterpolator());
        mBallImage.startAnimation(anim);
    }
}






15. Done. Run the code and check all these animations.