This Tutorial Android Frame Animation
Prev Tutorial Android View Animator, Views
Next Tutorial Android Frame Animation with Buttons
If you are just arriving at this page; and you are not familiar with with creating Android Apps, we suggest you begin with our tutorials:
Coding Android App Pages
and How To Create a Simple App in Android
From there follow along with each tutorial lesson.
AIDE and ANDROID STUDIO
We are using AIDE(a mobile coding environment using language java/xml), to create these tutorial apps on our
tablet(7" screen) that has android version 5.0.
Once we build and RUN our app; we then install the app on this same tablet; and the app is also installed on a smart phone that has android version 6.
AIDE can be installed on any android version from 4 - 8.
We are using the AIDE coding editor to code our pages; and then to Create - RUN our apps. AIDE is a SDK coding environment for android devices like a tablet or smartphone.
AIDE has a free and paid version.
Once you create your apps code pages, you need to RUN the app to build your apk package; then you INSTALL it on your tablet or smartphone.
For info on using AIDE, gohere
can also create; RUN your apps using the code in these tutorials, with Android Studio. Android Studio is for desktop computers. Choose Java XML as the programming language.
Android Studio is free to install and use for your android app development. Although not as convenient as testing your app on an actual android device; you can test
your newly created app in Android Studio using its' android emulator.
Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in
either AIDE or Android Studio.
Android Frame Animations
First, create a java/xml android template app using AIDE, (or Android Studio). Then you can get the code for this app from the EXAMPLE CODE section on this page.
Replace the code on the pages you need to(with our tutorial code); in order to create this app.
Sometimes, new pages have to be created.
All the other coded pages in your app
can remain as they are; they don't need to be changed.
This is the App Photo - Frame Animation
Where - How - Why To Use Frame Animation
The android platform has three unique APIs for animation. The Tween or View Animation is common, and basically it allows you to
animate views by using available attributes like: scale, rotate, pivot, transform.
Another type of animation and most recommended animation to use is the Property Animation, which
allows you to be more creative with your animations and your not restricted to just animating views or frames.
The simplest type of Animation in android is the Frame Animation,
also known as Drawable Animation
Drawable animations were added to the android platform in android version 1.0, Api 1.
For our app tutorial, we will be coding a simple Frame Animation.
Frame Animations use a frame by frame sequence to display the drawable images from the res/drawable folder of your app project. You can add a duration
frame; this lets you control the speed of the animation. The greater the number the slower the speed.
To code the animation,
, element is used; where each frame(the drawable name) is coded in a item
attribute. The file is named as you like with the xml extension, and
also put into the res/drawable folder of your app project along with your own images or drawables you created. Android prefers that you use png or jpg if using images for your app project.
Coding Our App
For our app, we are adding four png images, sized at 400 x 240 pixels, including the border. We added them to our res/drawable folder. We named them in sequence of
how we want to frames to animate; framesush1withborder.png...framesushi2withborder.png... and so forth. We also added to our res/drawable the sushi_animation.xml file.
This file has the required code for the animation images which are used for the frame animations.
The images we used were edited in GIMP, a free editor for creating and editing
images. We added the border and text to the images using GIMP.
In android, you can also add a border to your image by using a LayerList.
You can color the border as you like. To add a
border, you need to add two layers: the first layer is your border; sized greater than your second layer which is the image being used. The layerlist is
named with a xml extension, being created in your drawable folder. Then in your animation-list file; simply code the name of the layerlist xml file just as
you do for images.
You can add your own images for a frame animation; and you can also create Shape Drawables in android and use those for your
The android Drawables
class is used for creating shape drawables like rectangles, circles, ovals. In our previous tutorials you learned how to create shape drawables.
So, if you wanted to make Shape Drawables, for all your animated frames you can. They are added in the same manner
as images; add them to the res/drawable folder in your app project, and code the shape drawable file name to the animation_list xml file you create.
Within the Item
attribute you code the image or drawable file name, but do not add the file extension.
A shape drawable has the xml file extension and an image has the png or jpeg file
extension. You do not add the extension when coding file names just the name.
Material Design Theme
For each template android/gradle/java/xml app you create:
The res/values-v21 styles.xml file has the code for the material design theme name: Theme Material Light; for devices using android version 5.0, Api 21 or latest.
The res/values styles.xml file has the code for the theme name: Theme Holo Light, which is for devices that are pre material design platforms; ie less than android version 5.0 Api 21.
For this app tutorial, we want to use the
Theme Material No Action Bar
This theme is the same color as our previous tutorial theme, Theme.Material.
except that it has no action bar. The action bar is at the top of the app view, where you can see the app name. For some apps you create you may not want to have
the action bar displayed. By using this theme, Theme.Material.NoActionBar,
you can remove the action bar.
To code this is easy to do.
We need to change the code to read Theme.Material.NoActionBar, in our styles.xml file located at res/values-v21 of the app project.
For devices using android 5.0 Api 21, or later versions, they will now see the Theme.Material.NoActionBar, theme.
For users of devices that are pre or before android 5.0 Api 21, they
will have the Theme.Holo.Light as their theme.
You can also change the theme holo light, to a no action bar theme. To do so, simply change the code at the
file styles.xml located at res/values in your app project to read: Theme.Holo.NoActionBar
You can copy paste the code for these themes at the Example Code section on this page.
Additional Reading at Android Developer Website:
Android Frame Animations
Creating - Naming Your App Using AIDE
When creating your app,(from left menu) choose:
Create New Project;
New Android App(gradle, android Java/xml)
Hello World App Java/xml
if your using the original version of AIDE
You can name your app whatever you like; if your using the name as shown in our example code use;
for the App Name and,
for the package name(next line) use:
The Coded Pages
For this app you will use these coded pages:
1 layout file, main.xml; this page has the code for our FrameAnimation layout; located at res/layout/main.xml, already created, just replace the code on
this page with the code from our Example Code section and save the page.
this file has the code for the animation_list required for the animation. This page needs to be created at at res/drawable folder of your
app project. Copy and paste the code from our Example Code section, save the file.
res/drawable folder; at the drawable folder we add all the images we are using for this app:
You can download these at the
Example Code section, then copy/paste them into the drawable folder of the app project.
1 java class page; MainActivity.java; located at app/src/java/MainActivity.java. This page has the code that will initiate the animation.
You can copy paste the code from the Example Code section to replace the code on page now and save the page.
1 strings.xml file; This file has the strings that contain the text for app.
, this page has the code for the Sdk min and target versions and our support libraries code if we need to add any to our app.
The support libraries code is added at the 'dependencies' section in the build.gradle file, and the Sdk versions are added at the 'defaultConfig' section in the
This file has been created for us and coded with the proper Sdk min 14, and target version 21; so we don't have to code those.
And, for this app we don't need to add any support libraries, so we do not need to edit this page.
For this app, the build.gradle file is located at; AppProjects/FrameAnimation/app/src.
The androidmanifest.xml file is where you can code your 'app theme' name, code your 'intent filters', and add other necessary codes if your app requires them.
You can also code your Sdk min and target versions here that your app needs; but since they are already coded in the build.gradle file they do not need to be coded here.
Coding For Compatibility
The Material Design platform was introduced in android 5.01 which is api 21, for coding purposes Sdk version 21. Each android platform build version has a API assigned to it.
View the Android Platform Versions and API Levels
You can find the android platform version of your android device at: Settings, AboutPhone.
For most apps you build you will need to have the proper Sdk version coded in either the build.gradle file or the AndroidManifest.xml file.
Android devices at this time support several different platforms. And there are many device users of all recent platforms; those being android version 4,5 6 7.
And since there are users using the various platforms, apps that are made need to have proper coding in order to perform as intended across all these platforms.
In order to provide support to make the apps you create compatible for all the different android platforms; android uses support libraries
as dependencies, and coded as such in your build.gradle file.
To make the apps you build compatible, you should at this time, use at least min Sdk version 14(for any added support libraries), and for target version Sdk version 21.
Doing so will make your app compatible with more android device platforms.
In addition to adding the Sdk min and target versions, you also need to add the 'support libraries' code for any
code class you add to your app that requires them like the CardView code class from Material Design.
And, Material Design is a good example because many code classes from material design require 'support libraries'. CardView, RecyclerView, SnackBar, Fab buttons,
are some of Material Design's UI widgets that require a support library.
How To add a 'support library' to your code:
Basically, you add a line or few lines of code to your build.gradle file at the 'dependencies' section. For example, any UI design features you want to add from
the Material Design coding classes requires the 'design' library to be added.
This is the code;
Android Developer website has the latest versions of these support libraries.