Next Tutorial
Coding a Frame Animation

Prev Page
View All Tutorials

---

View Animator with Views

---

This is the App Photo - View Animator with Views

How To Use View Animator with Views

View Animator 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 the code.


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 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 Views for the App Name and,
for the package name(next line) use:
com.aac.animatorexampleviews

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.

We added the required ViewAnimator element, and then coded our views. We also coded a Linear Layout that includes our NEXT and PREV buttons.

res/drawable-hdpi folder; 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.

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

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

Manifest The androidmanifest.xml file is where you can code your 'app theme' name, code your 'intent filters', 'app theme', 'app icon', and declare any additional 'activities' you add.
You can also code your SDK min and target versions here; but since they are already coded in the build.gradle file they do not need to be coded here. This page was created and coded for us as we used a template app. We do not have to edit this page.

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 and target versions, so we don't have to edit those.
And, for this app we don't need to add any support libraries for our code classes, so we do not need to edit this page.
For this app, the build.gradle file is located at; AppProjects/ViewAnimatorViews/app/src.

To learn more about setting your SDK version numbers; and adding support libraries(dependencies), goto Tutorial 1 - Setting Build Gradle Config & Adding Dependencies.

EXAMPLE CODE - Code For This Tutorial

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

Example Code App -View Animator Views :
Copy Paste the Code
main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:id="@+id/LinearWrapper" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" > <ViewAnimator android:id="@+id/viewAnimator1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <LinearLayout android:id="@+id/View1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:padding="5dp" android:orientation="vertical"> <ImageView android:id="@+id/view1Image" android:src="@drawable/cheetah" android:layout_gravity="center" android:layout_marginTop="95dp" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageView> <TextView android:id="@+id/view1Text" android:text="@string/view1textstring" android:textSize="22dp" android:textColor="#Ffff66" android:layout_marginTop="0dp" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content"> </TextView> </LinearLayout> <Button android:id="@+id/buttonwithimageandtext" android:text="@string/buttonwithimagetext" android:layout_width="400dp" android:layout_height="250dp" android:layout_gravity="center" android:layout_margin="10dp" android:gravity="center" android:drawableLeft="@drawable/afiestycat"> </Button> <Button android:id="@+id/button" android:text="This Is a Button Element With Some Text Added To It" android:layout_gravity="center_vertical" android:textSize="30dp" android:layout_width="fill_parent" android:layout_height="wrap_content"> </Button> <ImageView android:id="@+id/imageView2" android:src="@drawable/tiger" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageView> <TextView android:id="@+id/textView1" android:text="@string/textfortextview" android:textSize="21dp" android:textColor="#4db6ac" android:layout_marginTop="88dp" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView> </ViewAnimator> </LinearLayout> <LinearLayout android:id="@+id/LinearLayout02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="25dp" > <Button android:id="@+id/buttonNext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Previous" /> <Button android:id="@+id/buttonPrevious" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Next " /> </LinearLayout> </RelativeLayout> _____________________________________ MainActivity.java package com.aac.animatorexampleviews; import android.os.Bundle; import android.view.View; import android.app.Activity; 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 { Button btnNext,btnPrevious; ViewAnimator viewAnimator; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); viewAnimator = (ViewAnimator) findViewById(R.id.viewAnimator1); final Animation inAnim = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); final Animation outAnim = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); viewAnimator.setInAnimation(inAnim); viewAnimator.setOutAnimation(outAnim); viewAnimator.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { viewAnimator.showNext(); } }); Button btn1 = (Button) findViewById(R.id.buttonNext); btn1.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { viewAnimator.showPrevious(); } }); Button btn2 = (Button) findViewById(R.id.buttonPrevious); btn2.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { viewAnimator.showNext(); } }); } } _____________________________________ values-v21/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="@android:style/Theme.Material"> </style> </resources> _____________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ViewAnimatorViews</string> <string name="view1textstring">This view has an image and some text.\n\n To add the image we use the ImageView element, and to add the text we use the TextView element.\n\n Because we want the ImageView and TexttView together in the same view, we must add them both to a layout container like the LinearLayout.\n </string> <string name="textfortextview">This is a textview.\n You can have a TextView by itself, like this one containing just text. If you want to add images or buttons to the TextView, then you must put the TextView element and any other elements you want to add into a layout, like the LinearLayout. Then close the LinearLayout so that your coded elements have their own contained layout. Your app\'s layout wrapper can be a Linear, Relative or Frame Layout, depending on how your designing your layout elements.\n\n For this app, we used a Relative Layout as the layout wrapper, and we included our ViewAnimator required element; then added our views: ImageView element, a LinearLayout container for our ImageView, and TextView element that we wanted in the same view, a Button element with just text, a Button element with text and an image, and this TextView element with just text. </string> <string name="buttonwithimagetext">This view has a button that contains an image and text\n\n To code a button with an image and text you use the Button element\n\n To put the image to the left of the text you use, android:drawableLeft attribute. </string> </resources>
SAVE IMAGES: Right Click and Save As

afiestycat.png

cheetah.png

tiger.png


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

This free script provided by
JavaScript Kit