Next Tutorial
Android Frame Animation with Buttons

Prev Page
View All Tutorials

---

Android Tutorial, Frame Animation

This is the App Photo - Frame Animation

For this Tutorial, you can download the App

Click Here to Download

---

How To Use Frame Animation

The android platform has three unique APIs for animation. The Tween(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 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 to each frame; this lets you control the speed of the animation. The greater the number the slower the speed.

To code the animation, the animation-list, 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 Animation

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 page.
This file has the required code for the animation images which are used for the frame animations. This also is put into the res/drawable folder of our app project.

The images we used were edited in GIMP, a free desktop editor for creating and editing images. For android devices, you can download 'XGimp', from Google Playstore. (not maintained by Gimp; but very similar. Performs best on 7" screen or larger).
We also 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; as you learned in a previous tutorial.
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.

Drawables

You can add your own images for a frame animation; and you can also create Shape Drawables in android and use those for your animations.

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.

About Material Design Theme

For each template android/gradle/java/xml app you create:

By default;

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.

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
In android, themes are easy to customize.

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

Animation Drawables

Creating - Naming Your App Using AIDE

When creating your app,(from left menu) choose:
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE

You can name your, use;

Frame Animation for the App Name and,
for the package name(next line) use:
com.aac.exampleframeanimation

The Coded Pages

For this app you will use these coded pages:

Layout 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.

1 sushi_animation.xml file; 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.

To Create your Drawable folder; From left side in AIDE, from Files Hierachy; goto res folder; then from right side- AIDE, select Dots, the select 'Create New Folder', type drawable, select OK. Your drawable folder is now created.

Copy and paste the code from our Example Code section, save the file.

sushi_animation.xml


IMAGES
res/drawable folder; at the drawable folder we add all the images we are using for this app:
framesushi1withborder.png
framesushi2withborder.png
framesushi3withborder.png
framesushi4withborder.png

You can download these at the Example Code section, then copy/paste them into the drawable folder of the app project, using your devices file manager.

Java 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.

Strings 1 strings.xml file; This file has the strings that contain the text for app.

Build Gradle, 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 build.gradle file.

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 edit 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/


Manifest The androidmanifest.xml file is where you can code your 'app theme' name, code your 'intent filters', and declare additional activities you add.
Several optional codes can be added to manifest, including 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 min and target version coded in either the build.gradle file or the AndroidManifest.xml page. At this time, it is added at Build gradle for the 'template' apps we create.

And, for some apps we develop, we have to add 'support libraries'. To learn about setting your SDK versions, and adding support libraries (dependencies), goto
Tutorial 1 - AndroidManifest and Build Gradle

EXAMPLE CODE - Code For This Tutorial

JUST copy the code for this tutorial App Name is 'FrameAnimation' - located at AppProjects/FrameAnimation in AIDE, open the AIDE app, then open App Projects, THEN select the 'FrameAnimation ', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name FrameAnimation is there next to AppProjects like so: AppProjects/FrameAnimation , then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.

Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'FrameAnimation ' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, then open the app.

Example Code App - Frame Animation :
Copy Paste the Code
_____________________________________ values/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="@android:style/Theme.Holo.NoActionBar"> </style> </resources> _____________________________________ values-v21/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="@android:style/Theme.Material.NoActionBar"> </style> </resources> _____________________________________ MainActivity.java package com.aac.exampleframeanimation; //add the import statements for our coding classes import android.app.*; import android.os.*; import android.graphics.drawable.AnimationDrawable; import android.widget.ImageView; import android.view.View; import android.view.View.OnClickListener; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //using our resource id sushi to create sushiView ImageView sushiView = (ImageView) findViewById(R.id.sushi); //attach sushiView to sushi_animation.xml and set it as our resource sushiView.setBackgroundResource(R.drawable.sushi_animation); //attach sushi animation to Animation Drawable AnimationDrawable sushiAnimation = (AnimationDrawable) sushiView.getBackground(); //start the animation sushiAnimation.start(); } } ________________________________ sushi_animation.xml <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > //each item is your drawable add images or create shape drawables <item android:drawable="@drawable/framesushi1withborder" android:duration="2100"/> <item android:drawable="@drawable/framesushi2withborder" android:duration="2100"/> <item android:drawable="@drawable/framesushi3withborder" android:duration="2100"/> <item android:drawable="@drawable/framesushi4withborder" android:duration="2100"/> </animation-list> __________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">FrameAnimation</string> <string name="intro">This Is A Simple Frame Animation\n\n The animation shows you how to add sushi rice to nora</string> </resources> ______________________________ main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="top"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="21dp" android:typeface="serif" android:layout_marginTop="65dp" android:text="@string/intro"/> //add a resource id for Imageview <ImageView android:id="@+id/sushi" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="25dp" /> </LinearLayout>
SAVE IMAGES: Right Click and Save As

framesushi1withborder.png

framesushi2withborder.png

framesushi3withborder.png

framesushi4withborder.png



Add the images to the drawable folder in your app project at res/drawable

This free script provided by
JavaScript Kit