Android Animation Tutorial with Kotlin
In this Android animation tutorial, you will learn how to use property animations to make a fun, beautiful user interface. By Kevin D Moore.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Android Animation Tutorial with Kotlin
35 mins
- Getting Started
- How do Property Animations Work?
- Time Interpolators
- Your First Animation
- Launch the Rocket
- Put a Spin on It
- Accelerate the Launch
- Which Properties Can You Animate?
- ObjectAnimator
- Animating Color
- Combining Animations
- ViewPropertyAnimator
- Animating the Same Property of Two Objects
- Animation Listeners
- Animation Options
- Declaring Animations in XML
- Where To Go From Here?
Declaring Animations in XML
You’ve made it to the best part of this tutorial. In this final section, you’ll learn how to declare once and use everywhere — yes, that’s right, you’ll be able to reuse your animations with impunity.
By defining animations in XML, you allow reuse of animations throughout your code base.
Defining animations in XML bears some resemblance to composing view layouts.
The starter project has an animation XML in res/animator named jump_and_blink.xml. Open the file in the editor, you should see this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together">
</set>
The following XML tags are available to you:
-
set
— the same asAnimatorSet
. -
animator
— the same asValueAnimator
. -
objectAnimator
— you guessed correctly; it stands forObjectAnimator
.
When using an AnimatorSet
in XML, you nest the ValueAnimator
and ObjectAnimator
objects inside it, similar to how you nest View
objects inside ViewGroup
objects (RelativeLayout
, LinearLayout
, etc.) in layout XML files.
Replace the contents of jump_and_blink.xml with the following code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together">
<objectAnimator
android:propertyName="alpha"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="@android:interpolator/linear"
android:valueFrom="1.0"
android:valueTo="0.0"
android:valueType="floatType"/>
<objectAnimator
android:propertyName="translationY"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="@android:interpolator/bounce"
android:valueFrom="0"
android:valueTo="-500"
android:valueType="floatType"/>
</set>
Here you declare a root element, set
tag. Its ordering
attribute can be either together
or sequential
. It’s together
by default, but you may prefer to specify it for clarity. The set
tag has two child XML tags, each of which is an objectAnimator
.
Take a look at the following attributes of objectAnimator
:
-
android:valueFrom
andandroid:valueTo
— specify start and end values like you did when you created an instance ofObjectAnimator
. -
android:valueType
— value type; eitherfloatType
orintType
. -
android:propertyName
— the property you want to animate without theset
part. -
android:duration
— duration of the animation. -
android:repeatCount
— the same as withsetRepeatCount
. -
android:repeatMode
— the same as withsetRepeatMode
. -
android:interpolator
— specify interpolator; it usually starts with@android:interpolator/
. Start typing this and Android Studio will show all available interpolators under autocomplete options. - You can’t specify your target object here, but you can do it later in Kotlin.
In the last block, you added two instances of objectAnimator
to the AnimatorSet
, and they will play together. Now, it’s time to use them.
Go to XmlAnimationActivity.kt and add the following code to onStartAnimation()
:
// 1
val rocketAnimatorSet = AnimatorInflater.loadAnimator(this, R.animator.jump_and_blink) as AnimatorSet
// 2
rocketAnimatorSet.setTarget(rocket)
// 3
val dogeAnimatorSet = AnimatorInflater.loadAnimator(this, R.animator.jump_and_blink) as AnimatorSet
// 4
dogeAnimatorSet.setTarget(doge)
// 5
val bothAnimatorSet = AnimatorSet()
bothAnimatorSet.playTogether(rocketAnimatorSet, dogeAnimatorSet)
// 6
bothAnimatorSet.duration = DEFAULT_ANIMATION_DURATION
bothAnimatorSet.start()
In the above code, you’re doing a few things:
- First, you load
AnimatorSet
fromR.animator.jump_and_blink
file, just like you normally would to inflate a view layout. - Then you set
rocket
as the target for just-loaded animator. - Load the animator from the same file once again.
- Rinse and repeat for
doge
object. - Now you create a third
AnimatorSet
and set it up to play the first two simultaneously. - Set the duration for the root animator and start.
- Whew! Rest just a little bit :]
Build and run. Select Jump and blink (Animations in XML) in the list. Tap to see your handiwork.
You should see Doge jumping, disappearing and then returning back to the ground safely :]
Where To Go From Here?
You can download the completed project by clicking on the Download Materials button at the top or bottom of the tutorial.
During this tutorial you:
- Created and used property animations with
ValueAnimator
andObjectAnimator
. - Set up the time interpolator of your choice for your animation.
- Animate position, rotation and color for
View
. - Combined animations together.
- Used the spectacular
ViewPropertyAnimator
with the help ofanimate()
. - Repeated your animation.
- Defined the animation in XML for reuse across the project.
Basically, you just gained Android animation super-powers.
If you’re hungry for more, check out the available time interpolators in Android’s documentation (see Known Indirect Subclasses). If you’re not happy with either of them, you can create your own. You can also set Keyframe
s for your animation to make them very sophisticated.
Android has other animation systems like View animations and Drawable Animations. You can also make use of Canvas and OpenGL ES APIs to create animations. Stay tuned :]
I hope you enjoyed the Introduction to Android Animations tutorial. Chime in with your questions, ideas and feedback in the forums below!