Android View Animation with Button, Java Xml Language
This Tutorial Android View Animation

Prev Tutorial Android Frame Animation with Buttons

Next Tutorial Android Animation Interpolators, with Spinner




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

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 Animation With Button

COPY/PASTE CODE

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 Animation
App Photo View  Animation with Button,Android Tutorial
This 'Translate' animation example moves the image to the left
Animation Example Translate Left
Once it gets to -350, it then moves to the position it started at, center
If you want the image to move to the right, you would code 350, instead of -350.
Animation of Translate Left Android

Where - How - Why To Use View Animation


View Animation is one of the three animation APIs used in android; also known as Tween Animations. In the previous tutorials you learned how to code a frame animation, the simplest and least customizable of the three animation code classes.

The View Animation lets you animate anything that is a view object. You can animate an image you added, a shape drawable you created, or just a TextView with some text. There are a number of methods you can use to animate such as Rotate, Scale, Alpha, and Translate.

You can also control the duration (speed) of your animation. You can use just one of the methods or you can group them together and use several of them. As well, you can have all your methods animate at the same time, or have them animate sequentially.

Each method creates a different animate effect. The Rotate method, rotates your view object using degrees, x and y pivots, and duration. The Scale method adds size dimension to your object. You can scale it to resize itself, also using x and y pivots and duration. The translate method moves your view object vertically or horizontally, and you can also add a duration. The alpha methods changes the opacity of your image.

Another feature you can add to your animation is an 'interpolator'. This controls the rate of change in an animation. For example; for this app tutorial, we have an image moving across the view, then returning to its original position. It moves steadily and evenly across the view.

By applying a interpolator to our animated image, we can have it move differently. Some interpolator methods you can use are: accelerate, decelerate, repeat, bounce, anticipate, or overshoot. With the interpolator added, it will move at a different rate across the view. A interpolator is added to your animation element as such:
android:interpolator="@android:anim/decelerate_interpolator"

Additional reading Interpolators
In our next tutorial, Animation Interpolators, with Spinner, you can see how the different interpolators animate.

For this app tutorial, our View Animation app, we are coding the Translate method, where we add code for our abstract image so that it moves across the view to the left; then returns to its starting position at center.

We have also included Example Code for the Scale and Rotate methods; which you can use in your app by replacing the translate method code with either of them, or you can use all three methods together; Translate, Rotate, Scale by adding them all in a set.

For additional reading on View Animations,
Translate Animation

Animation Resource Guide

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. For the image used in this app, we used GIMP to create an abstract image. Basically we created a white square image, added various colors to it; then used the cubism feature in the Filters to cubify the colors which resulted in the abstract look of the image.

Creating The Anim Folder

For view animations, an xml file has to be created(name it as you like), then put the code for the animation method, and save the file at the res/anim folder of your app project. The res/anim folder has to be created.

The image we use, is put into the res/drawable folder.


Material Design Theme

For each template android/gradle/java/xml app you create:

By default;

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

This theme has a light colored view with a light 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, 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

For users of devices that are pre or before android 5.0 Api 21, they will have the Theme.Holo.Light as their theme. We need to change the theme to read Theme.Holo.Light at the res/values/styles.xml file.

You can copy paste the code for these themes at the Example Code section on this page.

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 whatever you like; if your using the name as shown in our example code use;

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

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

1 myanimations.xml file; this file has the code for the animation.

In this xml file you add the code for the 'Translate' animation. The xml file must be put into the anim folder of your app project at res/anim. You have to create the
anim folder. Then create your xml page; name it as you like. For this tutorial we named it, myanimations.xml

The xdelta is the horizontal animation, and the ydelta is the vertical animation. Because we want our image to move left we put a - in front of our number, -350. If we wanted it to move to the right, then we would have coded 350.

The duration is the time is takes for the animation to complete. If you use a smaller number then the animation is completed sooner than a larger number.

code for View Animation Translate
Copy and paste the code for this page from our Example Code section, save the file.

IMAGES
res/drawable folder; at the drawable folder we add our image for this app:
myexample.png
You can save this image at the Example Code section, then paste it into your res/drawable folder.

JAVA File 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 button.

java code
Looking at this image of the code, you can see the findViewByID code for the Button that we coded with the id of button1 from our Layout element. In this code we attach this id name from our layout button element to the onClickListener code to implement the Button Click.

Imports

Each code class you code has a corresponding import, that has to be coded in your apps java file. The default java page created for our template android app is named MainActivity.java. This is where we put the import codes.
If you were to add additional pages to your app, then you would code any additional java pages with the import code or codes for whatever code classes your implementing.

Each android template app we create codes the common required 'import' for us, like:

import android.app;
import android.os;
import android.view.view;


These are the most common ones; as all apps have one page, one view, and an os.

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, Button, then we need to add the import for those in our java code page as it is shown in this image.

Also, whatever code class we are using in the java page, has a corresponding import code. Those must also be added to the import codes.
This is an image of the import codes on the MainActivity.java page
import codes android java page

In our java page we have these code classes,- onClickListener, Animation, Animation Utilities, and Object Animator; therefore, we added import code for them as well.

You can copy paste the code from the Example Code section to replace the code on the java page now and save the page.

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. And, the error message or messages may not be indicative of the actual error which is why you may need to look in different code areas to try and find the error.



STRINGS.XML File 1 strings.xml file; This file has the strings that contains the app_name text - View Animation

BUILD.GRADLE file, 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 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/ViewAnimation/app/src.


ANDROIDMANIFEST.XML File 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.


Some Common Errors When Coding Android

File names that don't match the corresponding code in another file

Android Manifest file for AppTheme correctly spelled or missing

Android Manifest file for code required like InternetPermissions,SDK min and Target versions, or Intent filters for additional app pages

R.id names from layout file that don't match to the name in the java file, misspelled or capped

Capitalized words versus small capped words

Java pages not camel cased; all java page names must be camel cased like: myappname.java - correct spelling is MyAppName.java

Drawables - all images, drawables must be small letters only, not capped, and no dashes, underscores allowed.

SDK target and min versions not matching the code implemented - check your APi level for a code your implementing

Images/xml pages put in wrong folder, example, for frame animation all images and xml files go in the res/drawable folder, however for view animation the xml files must go in the anim folder, and images go in the drawable folder.

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 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. The platforms range from 2 to the most current version being 8.0(oreo api level 27).
At this time users on platforms 5,6,7 and 8 have about 80% of the market and users on platforms 4 and previous to 4 have about 10% of the market.
Android Platforms Market Distribution

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 the target version using a Sdk version from 21 to 26 would give your app the best possible user audience. 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.

Support libraries are used to make code compatible across the different android platforms, and adding them will make your app more compatible to more users.

Additionally, android uses support libraries for certain code classes that are new or that simply require a support library in order to be implemented; like in Material Design. Several code classes or widgets from Material Design require a support library in order for the code to perform as it should in your app and for the different platforms as well. Some examples are the CardView, RecyclerView, SnackBar, Fab buttons, and UI Designing Widgets.

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 widgets or features you want to add from the Material Design coding classes requires the 'design' library to be added.
This is the code;
compile 'com.android.support:design:23.4.0'

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 Animation' - located at AppProjects/ViewAnimation in AIDE, open the AIDE app, then open App Projects, THEN select the 'ViewAnimation' 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 ViewAnimation is there next to AppProjects like so: AppProjects/ViewAnimation , 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 'ViewAnimation' 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 Animation
Use Mouse To Copy Paste the Code


SAVE IMAGE: Right Click and Save As

myexample.png
abstract image



Add the image to the anim folder in your app project at res/anim

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

You May Like:
Sushi Rolls Make Sushi at Home | Taste World Wines Flavours and Aromas



TUTORIALS I
Java XML
The Coded Pages

Beginners Article

About Our Tutorials

Coding androidmanifest.xml

Coding R.java

Coding buildconfig.java

Coding mainactivity.java

Coding main.xml

Coding strings.xml

Coding drawables

TUTORIALS II
Java XML
Learning To Code

Create A Simple
Android App

Change App Icon

Add Text and Style

Add Buttons To App

Placing Text in
Buttons


Change View
Background Color


Change Screen
Orientation


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
Identifiers



TUTORIALS III

Java XML
Adding Features,
Functionality

Coding Shape
Drawable - Lines


Coding A WebView

Coding A Timed
Screen Splash


Coding A Gradient
Drawable


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



TUTORIALS MATERIAL DESIGN
Java XML

What is Material
Design?


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 Interpolators
with Spinner


Android AppBar
ToolBar Design



from the Web
SPECIFIC CODING TASKS

Add Clickable Button
To textView

Image Button with
Selector


Linear Layout with
weight attribute


OnClick Displays
Message


Screen Density
Coding Practices



CODING ENVIRONMENTS


AIDE
for android tablets


Android Studio
For desktop computers



IMAGES ICONS FOR YOUR APPS

Code Canyon Paid From $1

IconFinder.com Free and Paid From $1


Our ARTICLES

App Distribution
Launching Your Android App
How To Be Successful


Android App Libraries
What are they and how
to implement them


ScrollView
How To Implement
ScrollView


View All Articles


Coding Tools

Android Studio
Course - Paid


Java Programming
Course - Free


Git Hub Course
Free



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.

APP SIGNING KEY- GOOGLE


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


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


MONETIZE YOUR APP
InMobi

AdMob

Google's In-App Billing for App monetization.

Monetizing Your App
How Tos




Follow Us On Twitter