Next Tutorial
View Animator with Views

Prev Page
View All Tutorials

---

View Animator with Array

---

This is the App Photo - View Animator with Array

How To Code A View Animator

View Animator with Array 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, MainActivity.java.

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.


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)
or
Hello World App Java/xml
if your using the original version of AIDE

You can name your app; use;

View Animator for the App Name and,
for the package name(next line) use:
com.aac.animatorexample

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


drawable folder, at the res/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 MainActivity.java 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

This is the code for the layerList - acatlayer.xml


Java 1 java class page; MainActivity.java; located at app/src/java/MainActivity.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 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, this page has the code for the SDK versions and our support libraries code(dependencies) 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 of at least version 21, and the min SDK version at least 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.

However; as version 21 is now a few years older than the most up to date platform version of Android;(today being March 2021), it is best practice to set your SDK min and Target to newer Versions so as to keep your app compatible with the largest market share of users.

To do this; use 16 as your min SDK; and 28, 29, or 30 as your Target SDK. To learn more about setting your SDk version numbers goto Tutorial 1 - Build Gradle Config Settings.


For this app, the build.gradle file is located at; AppProjects/ViewAnimator/app/src.


Manifest 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 name titles'; and declare any additional activities you add to your app.

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.

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

EXAMPLE CODE - Code For This Tutorial

JUST 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 'View 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 again.

Example Code App -View Animator :
Use Mouse To Copy Paste the Code
_________________________________ main.xml at res/layout/main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ViewAnimator android:id="@+id/simpleViewAnimator" android:layout_width="match_parent" android:layout_marginTop="65dp" android:layout_height="wrap_content"> </ViewAnimator> <Button android:id="@+id/buttonNext" android:layout_width="195dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="95dp" android:background="#055" android:text="NEXT" android:textColor="#fff" android:textStyle="bold" /> </LinearLayout> ______________________________________ MainActivity.java at app/src/java/MainActivity.java package com.aac.animatorexample; import android.os.Bundle; import android.app.Activity; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; import android.widget.ViewAnimator; public class MainActivity extends Activity { private ViewAnimator simpleViewAnimator; Button btnNext; // array of images int[] images = {R.drawable.catlions,R.drawable.acatlayer,R.drawable.cattylions, R.drawable.cheetah, R.drawable.lionsleepings, R.drawable.tiger}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // get The references of Button and ViewAnimator btnNext = (Button) findViewById(R.id.buttonNext); simpleViewAnimator = (ViewAnimator) findViewById(R.id.simpleViewAnimator); // get the reference of ViewAnimator for (int i = 0; i < images.length; i++) { ImageView imageView = new ImageView(getApplicationContext()); // create a new object for ImageView imageView.setImageResource(images[i]); // set image resource for ImageView simpleViewAnimator.addView(imageView); // add child view in ViewAnimator } // Declare in and out animations and load them using AnimationUtils class Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left); Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right); // set the animation type to ViewAnimator simpleViewAnimator.setInAnimation(in); simpleViewAnimator.setOutAnimation(out); simpleViewAnimator.setAnimateFirstView(false); // set false value for setAnimateFirstView // ClickListener for NEXT button // When clicked on Button ViewAnimator will switch between views // The current view will go out and next view will come in with specified animation btnNext.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub // show the next view of ViewAnimator ` ` simpleViewAnimator.showNext(); } }); } } ______________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ViewAnimator</string> </resources> ______________________________________ styles.xml at res/values-v21 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="@android:style/Theme.Material"> </style> </resources> ______________________________________ acatlayer.xml at res/drawable <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/aphotosquare1" android:top="15dp" android:left="15dp"/> <item android:drawable="@drawable/afiestycat" android:width="215dp" android:height="195dp" android:top="15dp" android:left="15dp" android:gravity="center"/> </layer-list> ______________________________________ aphotosquare1.xml at res/drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <size android:width="315dp" android:height="245dp"/> <solid android:color="#ffffff" /> <corners android:radius="1dp" /> </shape>
SAVE IMAGES: Right Click and Save As

afiestycat.png

catlions.png

cattylions.png

cheetah.png

lionsleepings.png

tiger.png


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

This free script provided by
JavaScript Kit