Android Animation Example Tutorial

Animation is the process of creating visual effects which causes motion. It is a simulation of movement. Animation is very practical tool with useful applications in variety of ways.

Android Animation

Animation is the best way to show the working model of your app or game. You can show complete flow of your application by using animation. It is used as medium of expression and communication. Adding animation to your Android app is very common nowadays. Animations in Android apps are useful to show state changes. It adds a polished look to your app which increases quality of your app. This tutorial explains how we can add animation in our Android application.

Requirements

⦁ Android Studio
⦁ Android device
⦁ USB cable

What we will create in this Android Animation Example Tutorial

Below is a screen-shot of the android animation example tutorial we will create in this tutorial

android animation

You can also create animation or used android inbuilt animation in android application like Image Slider. To understand how to create it, I will suggest you have a look at my android tutorial on Android Image Slideshow using VeiwFlipper.

Getting Started

⦁ Go to the Android Studio and open it.

⦁ Go to File -> New Project

⦁ Name it as “Animation”, select project location and click Next.

⦁ Leave the default settings as it is and click Next.

⦁ Select Blank Activity and Click Next.

⦁ Name your activity as MainActivity and click Finish

Strings.xml

Open strings.xml file located inside the values folder and add the code below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Animation Example</string>
    <string name="android_animation">Android Animation</string>
    <string name="zoom">Zoom</string>
    <string name="move">Move</string>
</resources>

Colors.xml

Open the colors.xml file and add the code below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorBackground">#FFD264</color>
    <color name="colorButton">#C08A05</color>
</resources>

⦁ Go to app -> res -> layout -> activity_main.xml

⦁ Write this code in content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:gravity="center_vertical"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:background="@color/colorBackground"
 tools:context="com.inducesmile.animationexample.MainActivity">

 <Button
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="24dp"
 android:text="@string/android_animation"
 android:id="@+id/button"
 android:background="@color/colorButton"
 android:textColor="#ffffff"
 android:layout_gravity="center_vertical"
 android:onClick="animation"
 android:textSize="16sp" />

</LinearLayout>

⦁ Now go to app -> Java -> com.example.admin.animation -> mainActivity

⦁ Open mainActivity.java and write this code

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

 public void animation(View view) {
 Intent intent = new Intent(this, AnimationActivity.class);
 startActivity(intent);
 }
}

⦁ Now go to app, right click and search New -> Activity and select Blank Activity.

⦁ Enter Activity Name as AnimationActivity and Layout Name as activity_animation and click Finish.

⦁ Open activity_animation.xml and add this code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_animation"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:background="@color/colorBackground"
 tools:context="com.inducesmile.animationexample.AnimationActivity">

 <ImageView
 android:id="@+id/imageView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:contentDescription="@string/app_name"
 android:layout_gravity="center_horizontal"
 android:src="@drawable/image" >
 </ImageView>

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="24dp"
 android:orientation="horizontal">

 <Button
 android:id="@+id/buttonZoom"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="@string/zoom"
 android:background="@color/colorButton"
 android:textColor="#ffffff"
 android:layout_marginRight="4dp"
 android:padding="16dp"
 android:onClick="zoom"
 />

 <Button
 android:id="@+id/buttonMove"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="@string/move"
 android:background="@color/colorButton"
 android:textColor="#ffffff"
 android:onClick="move"/>

 </LinearLayout>

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="24dp"
 android:orientation="horizontal">

 <Button
 android:id="@+id/buttonBlink"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="Blink"
 android:background="@color/colorButton"
 android:textColor="#ffffff"
 android:layout_marginRight="4dp"
 android:padding="16dp"
 android:onClick="blink"
 />

 <Button
 android:id="@+id/buttonSlideUP"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="SLIDE UP"
 android:background="@color/colorButton"
 android:textColor="#ffffff"
 android:onClick="slideUp"
 />

 </LinearLayout>

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="24dp"
 android:orientation="horizontal">

 <Button
 android:id="@+id/buttonFade"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="FADE"
 android:background="@color/colorButton"
 android:textColor="#ffffff"
 android:layout_marginRight="4dp"
 android:padding="16dp"
 android:onClick="fade"/>

 <Button
 android:id="@+id/buttonSlideDown"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="SLIDE DOWN"
 android:background="@color/colorButton"
 android:textColor="#ffffff"
 android:onClick="slideDown" />

 </LinearLayout>

</LinearLayout>

⦁ For the implementation of button listener

⦁ Now go to app -> Java -> com.example.admin.animation -> animationActivity

⦁ Open animationActivity.java and write this code

package com.inducesmile.animationexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class AnimationActivity extends AppCompatActivity {

 private static final String TAG = AnimationActivity.class.getSimpleName();

 private ImageView mImageView;

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

 mImageView = (ImageView)findViewById(R.id.imageView);
 mImageView.setImageResource(R.drawable.image);
 }

 public void zoom(View view) {
 Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.zoom_in);
 mImageView.startAnimation(animation1);
 }

 public void move(View view) {
 Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
 mImageView.startAnimation(animation1);
 }

 public void blink(View view) {
 Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink);
 mImageView.startAnimation(animation1);
 }

 public void slideUp(View view) {
 Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
 mImageView.startAnimation(animation1);
 }

 public void fade(View view) {
 Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade);
 mImageView.startAnimation(animation1);
 }

 public void slideDown(View view) {
 Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down);
 mImageView.startAnimation(animation1);
 }
}

⦁ Now all you need is to write code for animation

⦁ Go to app -> res

⦁ Right click and create a new folder name anim

⦁ Here create files for all animations

⦁ Before going to code these animations let have a look how it works

⦁ Here are some important attributes

⦁ Android: duration, duration of animation in which the animation should complete

⦁ Android: repeateMode this is useful when you want to repeat your animation

⦁ Android: startOffset It is the waiting time before an animation starts. This property is mainly used to perform multiple animations in a sequential manner

⦁ Android: fillAfter This defines whether to apply the animation transformation after the animation completes or not. If it sets to false the element changes to its previous state after the animation.

⦁ Android: repeatCount  This defines number of repetitions on animation. If you set this value to infinite then animation will repeat infinite times

For Zoom In

⦁ Right click on anim folder, go to new and select animation resource file

⦁ Name it as zoom_in

⦁ Write following code in zoom_in.xml

<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
    android:fillAfter = "true" >

    < scale
        xmlns:android = "http://schemas.android.com/apk/res/android"
        android:duration = "1000"
        android:fromXScale = "1"
        android:fromYScale = "1"
        android:pivotX = "50%"
        android:pivotY = "50%"
        android:toXScale = "3"
        android:toYScale = "3" >
    </ scale >
</ set >

For Move

⦁ Right click on anim folder, go to new and select animation resource file

⦁ Name it as move

⦁ Write following code in move.xml

<? xml version = "1.0" encoding = "utf-8" ?>
< set
    xmlns:android = "http://schemas.android.com/apk/res/android"
    android:interpolator = "@android:anim/linear_interpolator"
    android:fillAfter = "true" >

    < translate
        android:fromXDelta = "0%p"
        android:toXDelta = "75%p"
        android:duration = "800" />
</ set >

For Blink

⦁ Right click on anim folder, go to new and select animation resource file

⦁ Name it as blink

⦁ Write following code in blink.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:interpolator = "@android:anim/accelerate_interpolator"
        android:duration = "600"
        android:repeatMode = "reverse"
        android:repeatCount = "infinite"/>
</ set >

For Fade

⦁ Right click on anim folder, go to new and select animation resource file

⦁ Name it as fade

⦁ Write following code in fade.xml

<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
    android:interpolator = "@android:anim/accelerate_interpolator" >

    < alpha
        android:fromAlpha = "0"
        android:toAlpha = "1"
        android:duration = "2000" >
    </ alpha >

    < alpha
        android:startOffset = "2000"
        android:fromAlpha = "1"
        android:toAlpha = "0"
        android:duration = "2000" >
    </ alpha >

</ set >

For Slide Up

⦁ Right click on anim folder, go to new and select animation resource file

⦁ Name it as slide up

⦁ Write following code in slide_up.xml

<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
    android:fillAfter = "true" >

    < scale
        android:duration = "500"
        android:fromXScale = "1.0"
        android:fromYScale = "1.0"
        android:interpolator = "@android:anim/linear_interpolator"
        android:toXScale = "1.0"
        android:toYScale = "0.0" />

</ set >

 For Slide Down

⦁ Right click on anim folder, go to new and select animation resource file

⦁ Name it as slide down

⦁ Write following code in slide_down.xml

<? xml version = "1.0" encoding = "utf-8" ?>
< set xmlns:android = "http://schemas.android.com/apk/res/android"
    android:fillAfter = "true"  >

    < scale
        android:duration = "500"
        android:fromXScale = "1.0"
        android:fromYScale = "0.0"
        android:interpolator = "@android:anim/linear_interpolator"
        android:toXScale = "1.0"
        android:toYScale = "1.0" />

</ set >

That’s all we have written all code needed for these animations.

Now compile and run your code

Compile and Run

You can run your code on emulator by choosing android virtual device on android studio. Or you can attach your own android device by using a USB cable.

Click on Android Animation button, the next screen will display,

Click on buttons zoom, move, blink, fade, slide up and slide down, you will see animation effect on image.

Finally

This is the simplest way of android animation. There are many other methods also. In this way you can add more animation effects to your android app for example bounce, sequential animation, rotate and cross fading.

This brings us to the end of this tutorial. I hope that you have learn something. Run your app and see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorial, kindly contact me.

Remember to subscribe with your email address to be among the first to receive my new android blog post once it is published.

OTHER INTERESTING POSTS:

Add a Comment