This Tutorial Android Frame Animation with Buttons
Prev Tutorial Simple Frame Animation
Next App Tutorial Android View Animation
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 Animation With Buttons
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 Buttons
Where - How - Why To Use Frame Animation
In our previous tutorial you learned how to code an app for a Simple Frame Animation. In this tutorial, we will code a frame animation with a Stop and Start button
to control the animation. This is easy to do. We just have to add code to our java class file to implement the onClickListener method for our buttons, and add our two button elements to our
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 Images
For our app, we are adding five png images, sized at 421 x 316 pixels. We added a border to each image using GIMP. Then we added text to the border on each
image. We saved them as png format because that is the recommended file format to use for android images.
GIMP For Image Creation and Editing
GIMP is a free open source creating and editing editor for graphics. With GIMP you can make images, add borders, text, and many special effect filters can
be added as well.
Adding Our Images To Drawable Folder
We added them to our res/drawable folder. We named them in sequence of
how we want to frames to animate; asiandish1.png...asiandish2.png... and so forth. We also added to our res/drawable the frame_animation_list.xml file.
This file has the required code for the animation images which are used for the frame animations.
If you want, you can use the android class Shape Drawables, to create drawable shapes to use in your frame animation.
You can create shapes like rectangles, rings, circles; make them whatever color you like, then add them to the drawable
folder of your app project
in the same way you add your images.
In our previous tutorials you learned how to create shape drawables.
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 Light Dark Action Bar
This theme has a light colored view with a dark colored action bar. The action bar is at the top of the app view, where you can see the app name.
The code for this is shown in this image.
We need to change the code to read Theme.Material.Light.DarkActionBar, 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.Light.DarkActionBar.
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 Light theme view and a dark color action bar. To do so, simply change the code at the
file styles.xml located at res/values in your app project to read: Theme.Holo.Light.DarkActionBar
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;
Frame Animation Buttons
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. You can name the page as you like.
In this xml file you just code the images or drawables required for the animation, and in the order you
want them displayed. Then add the android:duration
attribute with a integer value. This determines the speed of each frame drawable. The larger the number the
slower the frame animates.
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 and the onclick method
for the buttons.
Looking at this image of the code, you can see the findViewByID
code for the Buttons that we coded with the id of start
, and stop
Layout elements. In this code we attach those ID names from our layout file to the onClickListener code to implement the Button Click method.
You also see the code for oneShot, with 'true' or 'false' boolean values. If you choose false the animation continues to cycle after
its first cycle; however if you choose true, then it stops after its first cycle.
Each code class you code has a corresponding import
, that has to be coded in your apps java file such as MainActivity.java.
You can name your java files whatever you want to just as you can name your xml files.
Each android template app we create codes the common required 'import' for us, like:
also common is
These are coded at the top of the java class page.
When we add elements
to our app layout code as we have done for this app; like our ImageView, then we need to add the import for that in our
java code page as it is shown in this image.
This code contains the code for the imports for the MainActivity.java file
The import code for an ImageView is :
and if we add a onClickListener method to our apps code which we did for this app, then we add the 'import' code for the onClickListener as this:
We also added a 'import' for our AnimationDrawable code class, which you can see in the image as well.
When you code with AIDE you will no doubt from time to time get error messages. The import code is a good place to look for errors, because you may have
not coded a certain required import for the code classes or widgets your implementing.
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 contains the app_name text.
, 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/FrameAnimationButtons/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 8.
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(or the SDK version recommended for the added libraries if needed), and for target version Sdk version at least 21
and 22, 23, 24 25 and 26 are also recommended.
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.