Android View Animator Tutorial
This Tutorial View Animator with Array

Prev Tutorial Android Card View

Next App Tutorial View Animator with Views

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.


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

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

View Animator


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 - View Animator
Android Tutorial View Animator with Example Code

Where - How - Why To Use View Animator

View Animator is a coding class introduced in android version 1.0, api 1. It is a code class for animating views. You can use the view animator to animate individual photos using just one view; or you can animate a selection of views. Each view can have text, photos, buttons, whatever you want to add to it.

To animate using two or more views, you can add each view to your layout file and then animate the different views. To animate a selection of photos by using just one view in your layout, you need to add an array containing your photos to the java class file,

For this app tutorial, we are coding a view animator using the array method. You can add as many photos as you want to the array. We also added a Next button that when clicked will browse the photos using the View Animator's animation out/in method; much like a slideshow.

The images we are using are about 300x200px size. We added six images and one of the images is added using a layerlist . This allowed us to add a border background to the image. The layerlist xml file(acatlayer.xml) and layerlist image (afiestycat.png) are added to the drawable folder of your app project as are the other five png images.

We implemented the Material Design dark theme for our app theme. Because we are using a android/java/xml template app to create our app tutorials, the Material Theme Light app theme is added for us automatically in the styles.xml at res/value-v21 folder of our app project.

Android Tutorial Styles21 Material Design Theme
Because we want to change the theme color to the darker theme, we simply need to change the theme name in the styles.xml file from Theme.Material.Light to Theme.Material. You can copy paste the code for this from the Example Code section on this page.

Additional Reading at Android Developer Website:
View Animator

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)
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;

VIew Animator for the App Name and,
for the package name(next line) use:

The Coded Pages

For this app you will use these coded pages:

LAYOUT File 1 layout file, main.xml; this page has the code for our View Animator 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.

For this layout we added our LinearLayout container, then added the required ViewAnimator element, and included a Button so we can click to browse the photos. Android Tutorial View Animator Layout Code

res/drawable folder; at the drawable folder we add all the images we are using for this app, and also our shape drawable xml file, and the layerlist xml file.

These are coded as a xml file because they are drawables; any shape drawables or layerlist you create have to be added to the drawable folder in our app project along with any images you have coded(added) to the layerlist. For this app, our layerlist, acatlayer.xml, has one png included 'afiestycat.png, which we added to our drawable folder.

To create our layerlist, first we make a shape drawable xml file; named aphotosquare1.xml, which is the square shape background for our image with the color white. Next we create our layerlist xml file named 'acatlayer.xml', and to that page we add our aphotosquare.xml shape code; and the fiestycat image code.

Now we have our layerlist coded named 'acatlayer.xml' In your page, at the image array code, where you add the photo names, you add the layerlist file name, just like adding a photo. So code it as 'acatlayer' Looking at these images you can see how the xml files are coded.

Because we want to add a border around the fiestycat image we code our shape drawable width and height so it is larger than the fiestycat image width and height.

This is the code for the Shape drawable - aphotosquare1.xml
Android Tutorial Shape Drawable code
This is the code for the layerList - acatlayer.xml
Android Tutorial layerlist code

JAVA File 1 java class page;; located at app/src/java/, already created; we need to edit the code in this page for our View animator. Just copy and paste the code from our Example Code section to replace code on page now, and save the page.

STRINGS.XML File 1 strings.xml file, This file has the text for our app_name string. No need to edit this page as app name already added when you created the app; and we are not adding any additional text to our app.

BUILD.GRADLE file, this page has the code for the Sdk versions and our support libraries code which is added at the 'dependencies' section.

This file is created for us when we created our android gradle/java/xml template app.

We do need to add the Sdk target version 21 code and the min Sdk version 14, because we are using Material Design app theme for our theme. The Sdk version 21 has already been added to the build.gradle file when we created our template app, and we don't need to add any support libraries for this app so we don't need to edit this page.
For this app, the build.gradle file is located at; AppProjects/ViewAnimator/app/src.

ANDROIDMANIFEST.XML File 1 manifest file; this page has many things necessary for our app like the 'intent filter', 'app theme name', and is where you can code things you may require like 'internet permissions', 'individual page names'.

This page is where you also code the name you gave your app theme. In this case, looking at the styles.xml file at res/values-v21, we see that the name we gave it is AppTheme. This name needs to be coded in the androidmanifest.xml file in order for the app theme to be applied to our app.

This has already been coded for us, so we don't need to edit this page. Also, users on devices less than version 5.01 api21; will be shown holo.theme.light; already coded for us at styles.xml at the res/values folder of your app project. You can also change the holo theme to the darker holo theme if you want to; coded as theme.holo

Material Design

This section is for additional reading only, and not required for this app tutorials coding.

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 here. 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 also known 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;
compile ''

Android Developer website has the latest versions of these support libraries.

Features Material Design Support Library
Using the Design Support Library

Quoted From Android Developer Website
"Note that as the Design library depends on the Support v4 and AppCompat Support Libraries, those will be included automatically when you add the Design library dependency.

We also took care that these new widgets are usable in the Android Studio Layout Editor’s Design view (find them under CustomView), giving you an easier way to preview some of these new components"(1)


EXAMPLE CODE - Code For This Tutorial

JUST USE YOUR MOUSE to copy the code for this tutorial App Name is 'VIew Animator' - located at AppProjects/ViewAnimator in AIDE, open the AIDE app, then open App Projects, THEN select the 'Vie Animator ', 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 ViewAnimator is there next to AppProjects like so: AppProjects/ViewAnimator , 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 'ViewAnimator ' 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, OPEN the app.

Example Code App -View Animator :
Use Mouse To Copy Paste the Code

SAVE IMAGES: Right Click and Save As

a cat lion
a catty lion
lion sleeping
a tiger

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

This free script provided by
JavaScript Kit

Share This Page

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid - with Free, create java/xml android template apps, and there is a couple free android coding lessons.
With paid, create java/xml android template apps, and you can create a 'keystore' for your app, so you can publish your apps to the marketplaces like Google Playstore and Amazon.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
GoTo Android Studio Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

Java XML
The Coded Pages

Beginners Article

About Our Tutorials

Coding androidmanifest.xml




Coding main.xml

Coding strings.xml

Coding drawables

Java XML
Learning To Code

Create A Simple
Android App

Change App Icon

Add Text and Style

Add Buttons To App

Placing Text in

Change View
Background Color

Change Screen

Add Image to
Activity View

Add Horizontal
Scroll View

Add a Frame Layout

How to Add Themes
To Your App

How To Code
Customized Styles

Code a Toast Message

Coding Resource


Java XML
Adding Features,

Coding Shape
Drawable - Lines

Coding A WebView

Coding A Timed
Screen Splash

Coding A Gradient

Coding Fragments

Coding A
ListView Fragment

Coding a
Tabbed Fragment

Share Intent
for Text

Share Intent
for Images

Media Player
with Audio

Coding A
Video Player

Localize Your App
World Languages

Coding a Simple ListView

ListView with Toast Message

Android Sliding Drawer

Sliding Drawer
with ListView

Java XML

What is Material

Coding a Material
Design Theme

Coding a Layer List
With Elevation

Shape Drawables
Elevate - Rotate

Scrollable Elevated
Topic Cards

Photo Containers
With Shadowed Container

Simple CardView

View Animator
with Photo Array

View Animator
With Views

Simple Frame Animation

Frame Animation
With Buttons

View Animation
Rotate, Scale, Translate

Android AppBar
ToolBar Design

from the Web

Add Clickable Button
To textView

Image Button with

Linear Layout with
weight attribute

OnClick Displays

Screen Density
Coding Practices


for android tablets

Android Studio
For desktop computers


Code Canyon Paid From $1 Free and Paid From $1


App Distribution
Launching Your Android App
How To Be Successful

Android App Libraries
What are they and how
to implement them

How To Implement

View All Articles

Coding Tools

Android Studio
Course - Paid

Java Programming
Course - Free

Git Hub Course

About Our Images

All images on this page are copyrighted material.
You can use the images included with each tutorial for the purpose of creating your android app. These images are not to be distributed or sold.


How To Add Your Google Key
To Manifest.xml
Web Article

How To Sign Your APK Web Article

Google Developer Console
Create Account Submit Your App
Web Article

Amazon App DRM - APK KEY
Amazon Developer Portal
Create Account - Submit Your App



Google's In-App Billing for App monetization.

Monetizing Your App
How Tos

Follow Us On Twitter