[GUIDE][RES] Android Animation XML resources for Activity Transition

Search This thread
By:
Advanced…
niranjan94

niranjan94

Senior Member
Jun 21, 2012
208
502
Coimbatore
www.github.com

FEATURED IN XDA NEWS ! App Animation XMLs Made Easy
Click to expand...
Click to collapse


When i was making my first app, I wanted to add some Transitions for my Activities. But didn't know how to make the anim xml files. So , I searched Google Got some pretty simple animations that would be useful for any app developer.

appear.xml - make an it just *appear*
HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
		android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1"
           android:fromAlpha="1.0"
           android:toAlpha="1.0"/>
</set>
fadein.xml - make it slowly fade into view

HTML: 
<?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="300"
		android:repeatCount="0" />
</set>
fadeout.xml - make it slowly fade out of view

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<alpha
    	android:fromAlpha="1.0"
    	android:toAlpha="0.0"
    	android:interpolator="@android:anim/accelerate_interpolator" 
		android:duration="300"
		android:repeatCount="0" />
</set>
push_down_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="-100%p" android:toYDelta="0" android:duration="400"/>
</set>
push_down_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="400"/>
</set>
push_right_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_left_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_left_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
push_right_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
push_up_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_up_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
rotation.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<rotate
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="0" android:fillAfter="true">
</rotate>
scale_towards_corner.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="1.0" android:toYScale="0"
        android:fromXScale="1.0" android:toXScale="0" 
        android:duration="500"/>
</set>
scale_from_corner.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="0" android:toYScale="1.0"
        android:fromXScale="0" android:toXScale="1.0" 
        android:duration="500" android:pivotX="100%"
        android:pivotY="100%" />
</set>
shrink_and_rotate_a.xml [exit]

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="1.0" android:toXScale="0.8"
    android:fromYScale="1.0" android:toYScale="0.8"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
/>
<scale
    android:fromXScale="1.0" android:toXScale="0.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="100"
/>
shrink_and_rotate_b.xml [entrance]

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="0.0" android:toXScale="1.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="250"
/>

<scale
    android:fromXScale="0.8" android:toXScale="1.0"
    android:fromYScale="0.8" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
    android:startOffset="400"
/>

To modify the speed of the animation you can edit the android:duration parameter (in milliseconds).

USAGE:

Using an Animation file is simple :
  1. Just place the required xml files inside res/anim/ folder.
  2. And call the required animation by using R.anim.animation_name
  3. For example, to add a transition while calling an activity, You can use overridePendingTransition(R.anim.fadein,R.anim.fadeout);

DOWNLOADING THE ANIMATION RESOURCES:

You can either manually copy the required xml file's content from above (or) You can also download the entire package that i have attached along with this thread. (or) You can click this link and download it.

More animations will be added in future ! :good:

 

Attachments

  • anim.zip
    5.3 KB · Views: 5,816
Last edited:
  • Like
Reactions: shmykelsa, Raiz, baldomo and 75 others
E

erpejo96

Member
Feb 24, 2013
12
0
Beautiful guide :fingers-crossed:
I would like to make screen rotate when I rotate my device, showing the rotation animation. Should I put a file with "rotation.xml" codes into /system/framework/framework-res.apk/res/anim ?

My device is a Samsung Galaxy Ace-i (gt-s5830i) with Gingerbread 2.3.6

thanks for replies :victory:
 
Last edited:
nikwen

nikwen

Senior Member
Feb 1, 2013
3,142
1,597
Berlin, Germany
www.nikwen.de
erpejo96 said:
Beautiful guide :fingers-crossed:
I would like to make screen rotate when I rotate my device, showing the rotation animation. Should I put a file with "rotation.xml" codes into /system/framework/framework-res.apk/res/anim ?

My device is a Samsung Galaxy Ace-i (gt-s5830i) with Gingerbread 2.3.6

thanks for replies :victory:
Click to expand...
Click to collapse

App development (which this guide is for) is very different to ROM modifications. I think that it will not work. However, it would be worth a try.

Why don't you ask your favourite ROM developer to add this to his ROM?
 
@mne_gk

@mne_gk

New member
Mar 18, 2013
1
0
Thanks really helpful! :thumbup::D

Sent from my GT-I9300 using xda app-developers app
 
niranjan94

niranjan94

Senior Member
Jun 21, 2012
208
502
Coimbatore
www.github.com
mne_gk said:
Thanks really helpful! :thumbup::D

Sent from my GT-I9300 using xda app-developers app
Click to expand...
Click to collapse

@mne_gk ... READ THIS .... ↓↓

nikwen said:
Please do not get your first 10 posts for posting in the dev section just by posting messages which all are only "thanks".
Click to expand...
Click to collapse

@out of ideas ... You could have a look at the NineOldAndroids Libraries for for using the Honeycomb (Android 3.0) animation API on all versions of the platform back to 1.0....

out of ideas said:
cool thread, thanks.

do you know off-hand how many are compatible with api10?

I was trying to get Card flip working, but objectanimator is only for 11+

http://developer.android.com/training/animation/cardflip.html <--card flip
Click to expand...
Click to collapse
 
  • Like
Reactions: KBuse1984, Appy1966, Alfic1930 and 1 other person
A

antoniolg

New member
Jun 27, 2013
3
0
Thanks for the animations! I'm adding another one I wanted to implement, similar to the effect you can see on Android 4.x drawer. I couldn't find a good name for it, but it is the effect of the second activity coming from back and fading in. It uses scale and alpha transitions:

(sorry add the schemas url by yourself, I'm not allowed to publish urls)

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

<set >

    <scale
        android:fromXScale="0.7"
        android:toXScale="1.0"
        android:fromYScale="0.7"
        android:toYScale="1.0"
        android:duration="300"
        android:repeatCount="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/accelerate_interpolator"/>

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="300"/>
</set>
 
I

iCantEven

Member
Jul 26, 2013
14
1
Shrink!

Great post!
You should add a shrink/grow transition, I've seen this transition around the web.

scale_towards_corner:
Code: 
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="1.0" android:toYScale="0"
        android:fromXScale="1.0" android:toXScale="0" 
        android:duration="500"/>
</set>

scale_from_corner:
Code: 
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="0" android:toYScale="1.0"
        android:fromXScale="0" android:toXScale="1.0" 
        android:duration="500" android:pivotX="100%"
        android:pivotY="100%" />
</set>

transition:
Code: 
overridePendingTransition(R.anim.scale_from_corner, R.anim.scale_towards_corner);

shrink_and_rotate_a [exit]:
Code: 
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="1.0" android:toXScale="0.8"
    android:fromYScale="1.0" android:toYScale="0.8"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
/>
<scale
    android:fromXScale="1.0" android:toXScale="0.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="100"
/>

shrink_and_rotate_b [entrance]:
Code: 
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="0.0" android:toXScale="1.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="250"
/>

<scale
    android:fromXScale="0.8" android:toXScale="1.0"
    android:fromYScale="0.8" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
    android:startOffset="400"
/>

transition:
Code: 
overridePendingTransition(R.anim.shrink_and_rotate_b, R.anim.shrink_and_rotate_a);
 
  • Like
Reactions: Wimmmr
I

ItaS

New member
Aug 18, 2013
1
0
Additonal tools for a first time developer?

Hey,

Im developing my first android app too and I find it hard to deal with the graphics, is there any site that sells such ready to use graphics?
I saw that I can buy some at binpress.com and also at crowdi.me, does anyone know these sites and/or can recommened more tools?

Thanks,
ItaS

niranjan94 said:




When i was making my first app, I wanted to add some Transitions for my Activities. But didn't know how to make the anim xml files. So , I searched Google Got some pretty simple animations that would be useful for any app developer.

appear.xml - make an it just *appear*
HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
		android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1"
           android:fromAlpha="1.0"
           android:toAlpha="1.0"/>
</set>
fadein.xml - make it slowly fade into view

HTML: 
<?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="300"
		android:repeatCount="0" />
</set>
fadeout.xml - make it slowly fade out of view

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<alpha
    	android:fromAlpha="1.0"
    	android:toAlpha="0.0"
    	android:interpolator="@android:anim/accelerate_interpolator" 
		android:duration="300"
		android:repeatCount="0" />
</set>
push_down_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="-100%p" android:toYDelta="0" android:duration="400"/>
</set>
push_down_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="400"/>
</set>
push_right_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_left_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_left_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
push_right_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
push_up_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_up_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
rotation.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<rotate
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="0" android:fillAfter="true">
</rotate>

To modify the speed of the animation you can edit the android:duration parameter (in milliseconds).

USAGE:

Using an Animation file is simple :
  1. Just place the required xml files inside res/anim/ folder.
  2. And call the required animation by using R.anim.animation_name
  3. For example, to add a transition while calling an activity, You can use overridePendingTransition(R.anim.fadein,R.anim.fadeout);

DOWNLOADING THE ANIMATION RESOURCES:

You can either manually copy the required xml file's content from above (or) You can also download the entire package that i have attached along with this thread. (or) You can click this link and download it.

More animations will be added in future ! :good:
Click to expand...
Click to collapse
 
M

morxs

Member
Mar 12, 2012
7
1
ItaS said:
Hey,

Im developing my first android app too and I find it hard to deal with the graphics, is there any site that sells such ready to use graphics?
I saw that I can buy some at binpress.com and also at crowdi.me, does anyone know these sites and/or can recommened more tools?

Thanks,
ItaS
Click to expand...
Click to collapse

I think if is off topic from OP. Should create a new thread instead, IMO.
 
anandisrocking007

anandisrocking007

Senior Member
Mar 4, 2013
297
128
30
Kolkata
niranjan94 said:




When i was making my first app, I wanted to add some Transitions for my Activities. But didn't know how to make the anim xml files. So , I searched Google Got some pretty simple animations that would be useful for any app developer.

appear.xml - make an it just *appear*
HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
		android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1"
           android:fromAlpha="1.0"
           android:toAlpha="1.0"/>
</set>
fadein.xml - make it slowly fade into view

HTML: 
<?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="300"
		android:repeatCount="0" />
</set>
fadeout.xml - make it slowly fade out of view

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<alpha
    	android:fromAlpha="1.0"
    	android:toAlpha="0.0"
    	android:interpolator="@android:anim/accelerate_interpolator" 
		android:duration="300"
		android:repeatCount="0" />
</set>
push_down_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="-100%p" android:toYDelta="0" android:duration="400"/>
</set>
push_down_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="400"/>
</set>
push_right_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_left_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_left_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
push_right_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
push_up_in.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
push_up_out.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
rotation.xml

HTML: 
<?xml version="1.0" encoding="utf-8"?>
<rotate
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="0" android:fillAfter="true">
</rotate>

To modify the speed of the animation you can edit the android:duration parameter (in milliseconds).

USAGE:

Using an Animation file is simple :
  1. Just place the required xml files inside res/anim/ folder.
  2. And call the required animation by using R.anim.animation_name
  3. For example, to add a transition while calling an activity, You can use overridePendingTransition(R.anim.fadein,R.anim.fadeout);

DOWNLOADING THE ANIMATION RESOURCES:

You can either manually copy the required xml file's content from above (or) You can also download the entire package that i have attached along with this thread. (or) You can click this link and download it.

More animations will be added in future ! :good:
Click to expand...
Click to collapse

@ niranjan94 hi i did not know where to ask this as i have searched a lot but could not find anything i am making a custom ROM and all is well except for one single problem i am trying to put a series of custom animation in my framework-res anim folder i know there are a lot of animation .xml files out there but i want to make my custom animation for example i like to put the bounce animation for dialog but flip animation for the activity changer the only way i know how to do this is to decompile,edit,recompile and flash the framework-res files for the hundreth time is there any way to test the xml file animation on computer?? please help i am going mad testing and flashing each animation framework :(
 
You must log in or register to reply here.

Similar threads

S
[Launcher] Win 8.1 Launcher for Android
Replies
8
Views
73K
Shubhamfame
Shubhamfame
Androguide.fr
[RESOURCES] Useful Android Design Resources thread
Replies
21
Views
24K
Z
zyngawow
bydox
[RESOURCES] Smartphones mockups for your app showcases
Replies
21
Views
15K
C
capsule46
TechMasta
[GUIDE] App/Graphics Design Tips,Tricks & Warnings
Replies
23
Views
13K
arpan.asr
arpan.asr
nikwen
[INDEX] List of themers and designers
Replies
198
Views
36K
nikwen
nikwen

Top Liked Posts

24 Hours All time
  • There are no posts matching your filters.
  • 78
    niranjan94
    niranjan94

    FEATURED IN XDA NEWS ! App Animation XMLs Made Easy
    Click to expand...
    Click to collapse


    When i was making my first app, I wanted to add some Transitions for my Activities. But didn't know how to make the anim xml files. So , I searched Google Got some pretty simple animations that would be useful for any app developer.

    appear.xml - make an it just *appear*
    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
		android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1"
           android:fromAlpha="1.0"
           android:toAlpha="1.0"/>
</set>
    fadein.xml - make it slowly fade into view

    HTML: 
    <?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="300"
		android:repeatCount="0" />
</set>
    fadeout.xml - make it slowly fade out of view

    HTML: 
    <?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<alpha
    	android:fromAlpha="1.0"
    	android:toAlpha="0.0"
    	android:interpolator="@android:anim/accelerate_interpolator" 
		android:duration="300"
		android:repeatCount="0" />
</set>
    push_down_in.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="-100%p" android:toYDelta="0" android:duration="400"/>
</set>
    push_down_out.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="400"/>
</set>
    push_right_in.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
    push_left_in.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
    push_left_out.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
    push_right_out.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="300"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
    push_up_in.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
    push_up_out.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="300"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
    rotation.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<rotate
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="0" android:fillAfter="true">
</rotate>
    scale_towards_corner.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="1.0" android:toYScale="0"
        android:fromXScale="1.0" android:toXScale="0" 
        android:duration="500"/>
</set>
    scale_from_corner.xml

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="0" android:toYScale="1.0"
        android:fromXScale="0" android:toXScale="1.0" 
        android:duration="500" android:pivotX="100%"
        android:pivotY="100%" />
</set>
    shrink_and_rotate_a.xml [exit]

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="1.0" android:toXScale="0.8"
    android:fromYScale="1.0" android:toYScale="0.8"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
/>
<scale
    android:fromXScale="1.0" android:toXScale="0.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="100"
/>
    shrink_and_rotate_b.xml [entrance]

    HTML: 
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="0.0" android:toXScale="1.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="250"
/>

<scale
    android:fromXScale="0.8" android:toXScale="1.0"
    android:fromYScale="0.8" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
    android:startOffset="400"
/>

    To modify the speed of the animation you can edit the android:duration parameter (in milliseconds).

    USAGE:

    Using an Animation file is simple :
    1. Just place the required xml files inside res/anim/ folder.
    2. And call the required animation by using R.anim.animation_name
    3. For example, to add a transition while calling an activity, You can use overridePendingTransition(R.anim.fadein,R.anim.fadeout);

    DOWNLOADING THE ANIMATION RESOURCES:

    You can either manually copy the required xml file's content from above (or) You can also download the entire package that i have attached along with this thread. (or) You can click this link and download it.

    More animations will be added in future ! :good:

    View
    6
    niranjan94
    niranjan94
    nikwen said:
    And that is everything?! Cool. :)

    Thanks. :good:
    Click to expand...
    Click to collapse

    I'll be adding more such animations in future ... along with a small guide for ACtivity Transitions, Dialog animations , and small UI animations etc .. :good:
    View
    4
    niranjan94
    niranjan94
    Reserved for updates

    Sorry... Reserved for updates
    View
    4
    niranjan94
    niranjan94
    mne_gk said:
    Thanks really helpful! :thumbup::D

    Sent from my GT-I9300 using xda app-developers app
    Click to expand...
    Click to collapse

    @mne_gk ... READ THIS .... ↓↓

    nikwen said:
    Please do not get your first 10 posts for posting in the dev section just by posting messages which all are only "thanks".
    Click to expand...
    Click to collapse

    @out of ideas ... You could have a look at the NineOldAndroids Libraries for for using the Honeycomb (Android 3.0) animation API on all versions of the platform back to 1.0....

    out of ideas said:
    cool thread, thanks.

    do you know off-hand how many are compatible with api10?

    I was trying to get Card flip working, but objectanimator is only for 11+

    http://developer.android.com/training/animation/cardflip.html <--card flip
    Click to expand...
    Click to collapse
    View
    1
    I
    iCantEven
    Shrink!

    Great post!
    You should add a shrink/grow transition, I've seen this transition around the web.

    scale_towards_corner:
    Code: 
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="1.0" android:toYScale="0"
        android:fromXScale="1.0" android:toXScale="0" 
        android:duration="500"/>
</set>

    scale_from_corner:
    Code: 
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromYScale="0" android:toYScale="1.0"
        android:fromXScale="0" android:toXScale="1.0" 
        android:duration="500" android:pivotX="100%"
        android:pivotY="100%" />
</set>

    transition:
    Code: 
    overridePendingTransition(R.anim.scale_from_corner, R.anim.scale_towards_corner);

    shrink_and_rotate_a [exit]:
    Code: 
    <set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="1.0" android:toXScale="0.8"
    android:fromYScale="1.0" android:toYScale="0.8"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
/>
<scale
    android:fromXScale="1.0" android:toXScale="0.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="100"
/>

    shrink_and_rotate_b [entrance]:
    Code: 
    <set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="0.0" android:toXScale="1.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="150"
    android:startOffset="250"
/>

<scale
    android:fromXScale="0.8" android:toXScale="1.0"
    android:fromYScale="0.8" android:toYScale="1.0"
    android:pivotX="50%p" android:pivotY="50%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="100"
    android:startOffset="400"
/>

    transition:
    Code: 
    overridePendingTransition(R.anim.shrink_and_rotate_b, R.anim.shrink_and_rotate_a);
    View

New posts