Animate between activity using simple animation in android

Simple animation demo in android

Hi...!!!

Friends hope you doing great,In android Operationg system there are having a vast variety of animations and styling elements,for example transition between two screend from left to right slide animation and same as "fade" effect.

So,Animations in any android application gives a different and elegant view and making its view richer though having simple native design,So Lets learn simple animation in android.

Friends,In this tutorial post we will learn how to put animation when going from one activity to another.Please follow the mentioned simple steps,

STEP:1

In the very first step,Go to your eclipse IDE,Create a new android project and name it as you like.

STEP:2

Now,Go to layout folder of your project explorer and create a new folder named "anim" inside it as a child folder,This folder will be container of all animation files.Anroid system will automatically detect this folder and can use animation files inside this folder.

After making the anim folder,we will going to make animation files which will play most important role in this project.

Animations in android are basically xml elements,it contains xml tags for setting animations like fade in,sliding,rotation etc...So let us make simple animation files then after we'll use it for transition between screens.

Go to anim folder right click on it and create a new android xml file,name it as 

1)animated_activity_slide_left_in.xml

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

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

android:duration="500"

android:fromXDelta="-100%p"

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

android:toXDelta="0%p" />

same way we will make some more animation files which we'll use after.

2)animated_activity_slide_left_out.xml

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

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

android:duration="500"

android:fromXDelta="0%p"

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

android:toXDelta="-100%p" />

3)animated_activity_slide_right_in.xml

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

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

android:duration="500"

android:fromXDelta="100%p"

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

android:toXDelta="0%p" />

4)animated_activity_slide_right_out.xml

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

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

android:duration="500"

android:fromXDelta="0%p"

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

android:toXDelta="100%p" />

5)animated_activity_slide_top_in.xml

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

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

android:duration="500"

android:fromYDelta="-100%p"

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

android:toYDelta="0%p" />

6)animated_activity_slide_top_out.xml

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

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

android:duration="500"

android:fromYDelta="0%p"

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

android:toYDelta="-100%p" />

7)animated_activity_slide_bottom_in.xml

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

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

android:duration="500"

android:fromYDelta="100%p"

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

android:toYDelta="0%p" />

8)animated_activity_slide_bottom_out.xml

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

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

android:duration="500"

android:fromYDelta="0%p"

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

android:toYDelta="100%p" />

9)fadein.xml

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

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

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

<alpha

android:duration="1000"

android:fromAlpha="0.1"

10)fadeout.xml

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

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

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

<alpha

android:duration="1000"

android:fromAlpha="1.0"

android:toAlpha="0.1" />

</set>

Till this we have seen number of animation in xml format,However we can animate views by java coding,But this is the robust and easy way to animate views.This animation will be used to tansit the screen.Let us go to our next step.

STEP:3

Now,In this step we'll make four activities layout file,so that we can make transition between them to see the animation effect,So go to your Layout folder of project explorere and make 4 activities,I have made this way you can change your activities as below,

a)activity_activity_one.xml

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#FF567C"

android:padding="30dp" >

<TextView

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="First Activity"

android:textColor="#ffffff"

android:textSize="24dp"

android:textStyle="bold" />

<Button

android:id="@+id/btn_next"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/selector_button1"

android:gravity="center"

android:paddingLeft="10dp"

android:textStyle="bold"

android:paddingRight="10dp"

android:text="Go to second Activity"

android:textSize="16dp" />

</RelativeLayout>

b)activity_activity_two.xml

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#00FFAA"

android:padding="30dp" >

<TextView

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="SECOND ACTIVITY"

android:textColor="#ffffff"

android:textSize="24dp"

android:textStyle="bold" />

<Button

android:id="@+id/btn_next"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/selector_button2"

android:gravity="center"

android:paddingLeft="10dp"

android:paddingRight="10dp"

android:text="Go to Third Activity"

android:textSize="16dp"

android:textStyle="bold" />

</RelativeLayout>

C)activity_activity_three.xml

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#444444"

android:padding="30dp" >

<TextView

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="THIRD ACTIVITY"

android:textColor="#ffffff"

android:textSize="24dp"

android:textStyle="bold" />

<Button

android:id="@+id/btn_next"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/selector_button3"

android:gravity="center"

android:paddingLeft="10dp"

android:textStyle="bold"

android:paddingRight="10dp"

android:text="Go to Four Activity"

android:textSize="16dp" />

</RelativeLayout>
D)activity_activity_four.xml

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#09835E"

android:padding="5dp" >

<TextView

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="FOURTH ACTIVITY"

android:textColor="#ffffff"

android:textSize="24dp"

android:textStyle="bold" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/ivback"

android:layout_alignParentRight="true"

android:layout_marginBottom="5dp"

android:text="Press back button to\ngo to privious activity"

android:textColor="#ffffff"

android:textStyle="bold" />

<ImageView

android:id="@+id/ivback"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:background="#d41111"

android:padding="5dp"

android:src="@drawable/btn_bk" />

</RelativeLayout>

So,Here we have created four screen to display animation when they will transit from one to another on button's click or on back button press event,Upto here we have completed design portion,Now let we move on to our java coding part,where we will see actuall coding of animation,

STEP:4

Now,Go to "src" folder of your project explorer,at there you will  have to make four activity classes acordingly four screens,So make it as below mentioned.

1)ActivityOne

package com.jims.simpleanimationdemo;

import android.content.Intent;

import android.os.Bundle;

import android.support.v7.app.ActionBarActivity;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

public class ActivityOne extends ActionBarActivity {

Button btn1;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_activity_one);

btn1 = (Button) findViewById(R.id.btn_next);

btn1.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

Intent i = new Intent(ActivityOne.this, ActivityTwo.class);

startActivity(i);

overridePendingTransition(

R.anim.animated_activity_slide_left_in,

R.anim.animated_activity_slide_right_out);

}

});

}

@Override

public void onBackPressed() {

// TODO Auto-generated method stub

super.onBackPressed();

overridePendingTransition(R.anim.animated_activity_slide_right_out,

R.anim.animated_activity_slide_left_in);

}

}

here,You can see 

overridePendingTransition(R.anim.animated_activity_slide_right_in,
R.anim.animated_activity_slide_left_out)

This code is used for display animation on transition between activities,In this method there are two parameters,In the first parameter start animation we have to give and in second parameter end animation it will take.

So,here our second Activity will be start from lef side and animating to right side end.

same way we will provide other animation to our activities.

So,Same way above make changes to all other three activites,And give different animations as you like.Register all of your activities in the manifest.xml file,Build the project and run,On button click you will get animation effect

                              ANIMATION 

                                              ===============>

You can download the source code from here

Hope this is useful for you friends,Thank you......Happy coding.....!!!