Android Animations

In android app development the Animations can be used to change the appearance and the behavior of the objects over a particular interval of time and the animations can provide a better look and feel high-quality user interface for our applications.

Usually, the animations can be useful when you want to notify users about the changes happening in our app and such as new content loaded and new actions available, etc.

Create XML File to Define Animation

You need to create an XML file in layout that defines the type of animation to perform in a new folder anim under res directory with the required properties and in anim folder does not exists in res directory then create a new one.

The XML files can be contain the code like as shown below based on the type of animation.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
   <scale
       android:duration="500"
       android:fromXScale="1.0"
       android:fromYScale="0.0"
       android:toXScale="1.0"
       android:toYScale="1.0" />
</set>

The following are some of the important animation attributes that can help us to change the behavior of animation in our application.

Attributes	Description
android:duration	This is used to define the duration of the animation to complete.
android:startOffset	This is used to define the waiting time before the animation starts.
android:interpolator	This is used to define the rate of change in animation.
android:repeatMode	This is useful when you want to repeat our animation.
android:repeatCount	This is used to define the number of times the animation repeats and if you set infinite, the animation will repeat infinite times.
android:fillAfter	This is used to define whether to apply animation transformation after the animation completes or not complete.

Android Load and Start the Animation

In android development as we can perform animations by using AnimationUtils component function such as loadAnimation() and here it is the code snippet of loading and starting an animation using loadAnimation() and startAnimation() function.


ImageView img = (ImageView)findViewById(R.id.image);
Animation aniSlide = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
img.startAnimation(aniSlide);

For Slide Up animation, you need to set android:fromYScale=”1.0″ and android:toYScale=”0.0″ like as shown below.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
   <scale
       android:duration="500"
       android:fromXScale="1.0"
       android:fromYScale="1.0"
       android:toXScale="1.0"
       android:toYScale="0.0" />
</set>

For Slide Down animation, you need to set android:fromYScale=”0.0″ and android:toYScale=”1.0″ as shown below.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
   <scale
       android:duration="500"
       android:fromXScale="1.0"
       android:fromYScale="0.0"
       android:toXScale="1.0"
       android:toYScale="1.0" />
</set>

Now the open layout file and write down the following code:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingLeft="10dp"
   android:paddingRight="10dp">
   <ImageView android:id="@+id/imgvw"
       android:layout_width="wrap_content"
       android:layout_height="250dp"
       android:src="@drawable/img"/>
   <Button
       android:id="@+id/btnSlideDown"
       android:layout_below="@+id/imgvw"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Slide Down" android:layout_marginLeft="100dp" />
   <Button
       android:id="@+id/btnSlideUp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignBottom="@+id/btnSlideDown"
       android:layout_toRightOf="@+id/btnSlideDown"
       android:text="Slide Up" />
</RelativeLayout>

Now we will open your main activity file MainActivity.java from path and write the code like as shown below.


package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity{
   private Button btnSDown;
   private Button btnSUp;
   private ImageView img;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       btnSDown = (Button)findViewById(R.id.btnSlideDown);
       btnSUp = (Button)findViewById(R.id.btnSlideUp);
       img = (ImageView)findViewById(R.id.imgvw);
       btnSDown.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Animation animSlideDown = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_down);
               img.startAnimation(animSlideDown);
           }
       });
       btnSUp.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Animation animSlideUp = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
               img.startAnimation(animSlideUp);
           }
       });
   }



}

Learn Android

Android Animations