Post Reply

[Guide] Adding Animations To Your Application [Part 1]

OP a-ssassi-n

30th October 2013, 06:39 AM   |  #1  
a-ssassi-n's Avatar
OP Senior Member
Flag Bangalore
Thanks Meter: 168
 
112 posts
Join Date:Joined: Jun 2013
More
Adding Aminations To Give Your Application A Cool Strike

Here I have mentioned some Cool Animations Effects.


[Note: Assuming the package name to be package.name.here and created a folder named anim in /res/.

Blink Effect
Code:
Quote:

Java Code [BlinkActivity.java] package package.name.here; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.TextView; public class BlinkActivity extends Activity implements AnimationListener { TextView txtMessage; Button btnStart; // Animation Animation animBlink; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.activity_blink); txtMessage = (TextView) findViewById(R.id.txtMessage); btnStart = (Button) findViewById(R.id.btnStart); // load the animation animBlink = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink); // set animation listener animBlink.setAnimationListener(this); // button click event btnStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { txtMessage.setVisibility(View.VISIBLE); // start the animation txtMessage.startAnimation(animBlink); } }); } @Override public void onAnimationEnd(Animation animation) { // Take any action after completing the animation // check for blink animation if (animation == animBlink) { } } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationStart(Animation animation) { } } XML Code [activity_blink.xml in res/layout/ folder] <?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:orientation="vertical"> <TextView android:id="@+id/txtMessage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is fadein animation" android:layout_centerInParent="true" android:textSize="25dp" android:padding="20dp" android:background="#000000" android:visibility="gone"/> <Button android:id="@+id/btnStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Start" android:layout_marginTop="30dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp"/> </RelativeLayout> XML Code [Blink.xml in res/anim/ folder] <?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>

FadeOut Effect

Code:
Quote:

Java Code [FadeOutActivity.java] package info.androidhive.androidanimations; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.Animation.AnimationListener; import android.widget.Button; import android.widget.TextView; import android.widget.Toast; public class FadeOutActivity extends Activity implements AnimationListener { TextView txtMessage; Button btnStart; // Animation Animation animFadeOut; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.activity_fadeout); txtMessage = (TextView) findViewById(R.id.txtMessage); btnStart = (Button) findViewById(R.id.btnStart); // load the animation animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_out); // set animation listener animFadeOut.setAnimationListener(this); // button click event btnStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // start the animation txtMessage.startAnimation(animFadeOut); } }); } @Override public void onAnimationEnd(Animation animation) { // Take any action after completing the animation // check for fade out animation if (animation == animFadeOut) { Toast.makeText(getApplicationContext(), "Animation Stopped", Toast.LENGTH_SHORT).show(); } } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } } XML Code [activity_fadeout.xml in res/layout/ folder] <?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:orientation="vertical"> <TextView android:id="@+id/txtMessage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is fadeout animation" android:layout_centerInParent="true" android:textSize="25dp"/> <Button android:id="@+id/btnStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Start Animation" android:layout_marginTop="30dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp"/> </RelativeLayout> XML Code [fade_out.xml in res/anim folder] <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <alpha android:duration="1000" android:fromAlpha="1.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="0.0" /> </set>

CrossFade Effect

Code:
Quote:

Java Code [CrossFadeActivity.java] package package.name.here; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.TextView; public class CrossfadeActivity extends Activity implements AnimationListener { TextView txtMessage1, txtMessage2; Button btnStart; // Animation Animation animFadeIn, animFadeOut; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.activity_crossfade); txtMessage1 = (TextView) findViewById(R.id.txtMessage1); txtMessage2 = (TextView) findViewById(R.id.txtMessage2); btnStart = (Button) findViewById(R.id.btnStart); // load animations animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in); animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_out); // set animation listeners animFadeIn.setAnimationListener(this); animFadeOut.setAnimationListener(this); // button click event btnStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // make fade in element visible txtMessage2.setVisibility(View.VISIBLE); // start fade in animation txtMessage2.startAnimation(animFadeIn); // start fade out animation txtMessage1.startAnimation(animFadeOut); } }); } @Override public void onAnimationEnd(Animation animation) { // Take any action after completing the animation // if animation is fade out hide them after completing animation if (animation == animFadeOut) { // hide faded out element txtMessage1.setVisibility(View.GONE); } if(animation == animFadeIn){ // do something after fade in completed // set visibility of fade in element txtMessage2.setVisibility(View.VISIBLE); } } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } } XML Code [activity_crossfade.xml in res/layout/ folder] <?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:orientation="vertical"> <TextView android:id="@+id/txtMessage1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This text will fade out" android:layout_centerInParent="true" android:textSize="25dp"/> <TextView android:id="@+id/txtMessage2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This text will fade in" android:layout_centerInParent="true" android:textSize="25dp" android:visibility="gone"/> <Button android:id="@+id/btnStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Start Animation" android:layout_marginTop="30dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp"/> </RelativeLayout> NOTE:No need to create any xml in anim folder for crossfade because it uses fadein and fadeout xml files from anim folder]

FadeIn Effect

Code:
Quote:

Java Code [FadeInActivity.java] package package.name.here; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.Animation.AnimationListener; import android.widget.Button; import android.widget.TextView; import android.widget.Toast; public class FadeInActivity extends Activity implements AnimationListener { TextView txtMessage; Button btnStart; // Animation Animation animFadein; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.activity_fadein); txtMessage = (TextView) findViewById(R.id.txtMessage); btnStart = (Button) findViewById(R.id.btnStart); // load the animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in); // set animation listener animFadein.setAnimationListener(this); // button click event btnStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { txtMessage.setVisibility(View.VISIBLE); // start the animation txtMessage.startAnimation(animFadein); } }); } @Override public void onAnimationEnd(Animation animation) { // Take any action after completing the animation // check for fade in animation if (animation == animFadein) { Toast.makeText(getApplicationContext(), "Animation Stopped", Toast.LENGTH_SHORT).show(); } } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } } XML Code [activity_fadein.xml in res/layout/ folder] <?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:orientation="vertical"> <TextView android:id="@+id/txtMessage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is fadein animation" android:layout_centerInParent="true" android:textSize="25dp" android:visibility="gone"/> <Button android:id="@+id/btnStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Start Animation" android:layout_marginTop="30dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp"/> </RelativeLayout> XML Code [fade_in.xml in res/anim/ folder] <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <alpha android:duration="1000" android:fromAlpha="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="1.0" /> </set>


Also Check Out Adding Animations To Your Application [Part 2]

Please correct me if the code goes wrong somewhere.


A-ssassi-N


----------------------------------------------------------------

Hit Thanks
Last edited by a-ssassi-n; 1st November 2013 at 06:22 AM.
The Following 26 Users Say Thank You to a-ssassi-n For This Useful Post: [ View ]
30th October 2013, 03:58 PM   |  #2  
yvesadriel's Avatar
Junior Member
Flag Philippines
Thanks Meter: 0
 
10 posts
Join Date:Joined: Dec 2012
More
Battery Low
Quote:
Originally Posted by a-ssassi-n

Adding Aminations To Give Your Application A Cool Strike

Here I have mentioned some Cool Animations Effects.


Blink Effect

Code:

FadeOut Effect

Code:

CrossFade Effect

Code:

FadeIn Effect


More Effects coming soon on my next Post .

Please correct me if the code goes wrong somewhere.


A-ssassi-N


----------------------------------------------------------------

Hit Thanks

nice
30th October 2013, 05:30 PM   |  #3  
blinoff82's Avatar
Senior Member
Flag Russia
Thanks Meter: 147
 
377 posts
Join Date:Joined: Nov 2012
Donate to Me
More
Question
Sorry, do not understand how to use your codes?
30th October 2013, 05:33 PM   |  #4  
Marília de Oliveira's Avatar
Senior Member
Flag City of God / City of Sun *-*
Thanks Meter: 448
 
637 posts
Join Date:Joined: Nov 2012
More
I'm confused
Quote:
Originally Posted by yvesadriel

nice

English> Wanted a tutorial teaching best to apply the animations do not quite understand! sorry my bad english. Thanks
Portugues Brazil> Queria um tutorial ensinando melhor a aplicar as animações, não entendi muito bem ! desculpe meu mau ingles. Obrigada
30th October 2013, 06:06 PM   |  #5  
agentdr8's Avatar
Senior Member
Flag Cowtown, CA
Thanks Meter: 1,114
 
2,175 posts
Join Date:Joined: Mar 2007
Donate to Me
More
Very nice OP!
30th October 2013, 07:48 PM   |  #6  
Wetzel402's Avatar
Senior Member
Thanks Meter: 39
 
241 posts
Join Date:Joined: Jan 2012
More
Cool
I use these animations in my app.

Slide in left:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="-100%p" android:toXDelta="0%p" android:duration="250" />
</set>
Slide in right:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="100%p" android:toXDelta="0%p" android:duration="250" />
</set>
Slide out left:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="0%p" android:toXDelta="-100%p" android:duration="250" />
</set>
Slide out right:
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="250" />
</set>
I call them like so in base activity:
Code:
void slideInLeft(final View view) {
		leftAnim = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
		leftAnim.setAnimationListener(new AnimationListener() {
			@Override
			public void onAnimationStart(final Animation animation) {

			}

			@Override
			public void onAnimationRepeat(final Animation animation) {

			}

			@Override
			public void onAnimationEnd(final Animation animation) {
			}
		});

		view.startAnimation(leftAnim);
	}
Last edited by Wetzel402; 30th October 2013 at 07:50 PM.
30th October 2013, 08:46 PM   |  #7  
SimplicityApks's Avatar
Senior Member
Flag Aachen
Thanks Meter: 335
 
339 posts
Join Date:Joined: May 2013
Nice guide!

but there are already a couple of open source animations available like PropertyAnimation or the Android3DFlipTransition for instance. Maybe you can include those, too!

And also, you might want to make a section for animations in a list view as well (like the ListViewAnimations or the SugaredListAnimations)
The Following 3 Users Say Thank You to SimplicityApks For This Useful Post: [ View ]
30th October 2013, 08:58 PM   |  #8  
a-ssassi-n's Avatar
OP Senior Member
Flag Bangalore
Thanks Meter: 168
 
112 posts
Join Date:Joined: Jun 2013
More
Quote:
Originally Posted by agentdr8

Very nice OP!

Thanks
The Following User Says Thank You to a-ssassi-n For This Useful Post: [ View ]
30th October 2013, 09:08 PM   |  #9  
a-ssassi-n's Avatar
OP Senior Member
Flag Bangalore
Thanks Meter: 168
 
112 posts
Join Date:Joined: Jun 2013
More
Cool
Quote:
Originally Posted by blinoff82

Sorry, do not understand how to use your codes?

Choose the animation you would like to use for you application.

Create a Android application project with blank activity.

[Note: Assuming that your package name is example.package]

Copy the Java Code to src/example.package/MainActivity.java

Copy the XML Code to res/layout/activity_main.xml

BUILD. DONE.


A-ssassi-N


----------------------------------------------------------------

Hit Thanks
The Following 4 Users Say Thank You to a-ssassi-n For This Useful Post: [ View ]
30th October 2013, 09:10 PM   |  #10  
a-ssassi-n's Avatar
OP Senior Member
Flag Bangalore
Thanks Meter: 168
 
112 posts
Join Date:Joined: Jun 2013
More
Thumbs up
Quote:
Originally Posted by SimplicityApks

Nice guide!

but there are already a couple of open source animations available like PropertyAnimation or the Android3DFlipTransition for instance. Maybe you can include those, too!

And also, you might want to make a section for animations in a list view as well (like the ListViewAnimations or the SugaredListAnimations)

Android3DFlipTransition is Awesome man
Thankyou for suggestion
Last edited by a-ssassi-n; 30th October 2013 at 09:13 PM.

The Following 2 Users Say Thank You to a-ssassi-n For This Useful Post: [ View ]
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Top Threads in Java for Android App Development by ThreadRank