Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,810,255 Members 52,701 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
a-ssassi-n
Old
(Last edited by a-ssassi-n; 1st November 2013 at 06:22 AM.)
#1  
a-ssassi-n's Avatar
Senior Member - OP
Thanks Meter 168
Posts: 112
Join Date: Jun 2013
Location: Bangalore
Post [Guide] Adding Animations To Your Application [Part 1]

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
The Following 26 Users Say Thank You to a-ssassi-n For This Useful Post: [ Click to Expand ]
 
yvesadriel
Old
#2  
yvesadriel's Avatar
Junior Member
Thanks Meter 0
Posts: 10
Join Date: Dec 2012
Location: Philippines
Quote:
Originally Posted by a-ssassi-n View Post
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
 
blinoff82
Old
#3  
blinoff82's Avatar
Senior Member
Thanks Meter 137
Posts: 368
Join Date: Nov 2012
Location: Russia

 
DONATE TO ME
Sorry, do not understand how to use your codes?
Dualboot:
[Primary] SlimSaber 4.4.4 by fusionjack
[Secondary] SlimSaber "R" 4.3.1 by fusionjack
Desktop OS: Debian Jessie Testing
 
Marília de Oliveira
Old
#4  
Marília de Oliveira's Avatar
Senior Member
Thanks Meter 353
Posts: 501
Join Date: Nov 2012
Location: City of God / City of Sun *-*

 
DONATE TO ME
Default I'm confused

Quote:
Originally Posted by yvesadriel View Post
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
 
agentdr8
Old
#5  
agentdr8's Avatar
Senior Member
Thanks Meter 1,043
Posts: 2,053
Join Date: Mar 2007
Location: Cowtown, CA

 
DONATE TO ME
Very nice OP!
AT&T HTC One (m7)
ARHD'd

Check out my Xposed modules
Stock Sense 6 battery with percent
Xposed StatusBar Mods - Statusbar mods for HTC One-series
TD Fuzzer - Change Touchdown device provisioning data
GoogleCamX - Use Volume buttons to zoom in Google Camera
XFBSync - Restore native FB syncing in CM10+
XposedMTC - Mods for KGL/RM/KLD Android headunits
GCalMonthDetail - Enable/customize event text in GCal month view
SkypeX - Spoof Skype version sent to servers
 
Wetzel402
Old
(Last edited by Wetzel402; 30th October 2013 at 07:50 PM.)
#6  
Wetzel402's Avatar
Senior Member
Thanks Meter 39
Posts: 236
Join Date: Jan 2012
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);
	}
Want to thank me? Use this link and we both get 500 mb of Dropbox space!
or this link and we both get 5 gb of Copy space!


Droid Bionic - Stock JB - rooted(retired to a dev device & GPS)
Samsung Galaxy Note II - Paranoid Android 4+
Dell Venue 8 Pro - Windows 8.1
 
SimplicityApks
Old
#7  
SimplicityApks's Avatar
Senior Member
Thanks Meter 327
Posts: 323
Join Date: May 2013
Location: Aachen
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: [ Click to Expand ]
 
a-ssassi-n
Old
#8  
a-ssassi-n's Avatar
Senior Member - OP
Thanks Meter 168
Posts: 112
Join Date: Jun 2013
Location: Bangalore
Quote:
Originally Posted by agentdr8 View Post
Very nice OP!
Thanks
The Following User Says Thank You to a-ssassi-n For This Useful Post: [ Click to Expand ]
 
a-ssassi-n
Old
#9  
a-ssassi-n's Avatar
Senior Member - OP
Thanks Meter 168
Posts: 112
Join Date: Jun 2013
Location: Bangalore
Quote:
Originally Posted by blinoff82 View Post
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: [ Click to Expand ]
 
a-ssassi-n
Old
(Last edited by a-ssassi-n; 30th October 2013 at 09:13 PM.)
#10  
a-ssassi-n's Avatar
Senior Member - OP
Thanks Meter 168
Posts: 112
Join Date: Jun 2013
Location: Bangalore
Quote:
Originally Posted by SimplicityApks View Post
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

The Following 2 Users Say Thank You to a-ssassi-n For This Useful Post: [ Click to Expand ]
Thread Tools
Display Modes