This Tutorial View Animator with Views
Prev Tutorial View Animator with Array
Next App Tutorial Coding a Frame 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.
View Animator with Views
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 with Views
Where - How - Why To Use View Animator with Views
is a coding class introduced in android version 1.0, api 1. It is a code class for animating views.
In our previous tutorial we coded a View Animator with an array for images. In this tutorial we are going to code a View Animator with Views. A view can be a TextView,
an ImageView, a Button, or any combination of these elements.
For our View Animator, we coded a TextView, a TextView with an ImageView, a Button with text, a Button
with an Image and text, and an ImageView.
To code these we added our required View Animator element, then we added our Views. For views that we wanted together like the
TextView and Imageview, we put those within a LinearLayout container; that way, they will display as one view, with both elements, a TextView and the ImageView. This is
To code our Button element with the Image and text, we simply coded a Button element, then added the Image and Text to it. The text is coded in our string
named 'buttonwithimagetext', in our strings.xml file.
To put the image to the left of your text you can use the android:drawableLeft attribute as we have done. If you wanted the image to the right of the text then you would
use android:drawableRight attribute in the button code. This is the code for the Button with an Image and Text.
Material Design Theme
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.
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
Additional Reading at Android Developer Website:
Material Design Color Swatches
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;
View Animator Views
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 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.
We added the required ViewAnimator element, and then coded our views. We also coded a Linear Layout that includes our NEXT and PREV buttons.
at the drawable folder we add all the images we are using for this app: afiestycat.png, cheetah.png, tiger.png. You can download these at the
Example Code section, then copy/paste them into the drawable-hdpi folder of the app project.
1 java class page; MainActivity.java; located at app/src/java/MainActivity.java. This page has the code that animates our views.
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 our app name and the text we added for some of the views.
Text can also be added within the View itself; and usually is coded there when there is a single line or few words of 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 and target versions, 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/ViewAnimatorViews/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.
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
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.
EXAMPLE CODE - Code For This Tutorial
JUST USE YOUR MOUSE to copy the code for this tutorial
App Name is 'View Animator Views'
- located at AppProjects/ViewAnimatorViews
in AIDE, open the AIDE app, then open App Projects, THEN select the 'Vie Animator Views
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 ViewAnimatorViews
is there next to
AppProjects like so: AppProjects/ViewAnimatorViews
, 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 'ViewAnimatorViews
' 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.
This free script provided by