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
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
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
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
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
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
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
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
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.
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
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
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
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,
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.....!!!