dcsimg
December 10, 2016
Hot Topics:

Working with Android View Animation in Apps

  • March 7, 2016
  • By Vipul Patel
  • Send Email »
  • More Articles »

Introduction

Do you want to build transition effects in your application? If yes, read on. Android has first class support for animation that developers can leverage in their applications.

Basics

Animations in Android come in two flavors: view animation and property animation. View Animation can be applied on a single view only and, at the end of the animation, the effects are lost. Property animation, on the other hand, can be applied to various kinds of objects and the effect persists after the animation is over.

View animations are further categorized into tween animation and frame animation.

Tween animations are useful when you want to perform one or more transformations to a single view. The available transformations are rotation, scaling, translation, and fading.

There are two ways to implement View animations:

  • As animation file in the /res/animator directory
  • Via Java code

Animation XML files can support the following elements:

  • <alpha>
  • <scale>
  • <translate>
  • <rotate>

<set> can be used to group multiple animation elements.

For each animation effect, there are properties such as animation start time, duration, and whether the animation is a sequential or simultaneous animation.

Hands On

Fire up Android Studio and Start a new Android Studio Project

Ani1
Figure 1: Opening Android Studio

Provide ViewAnimationDemo as the Application Name and Click Next.

Ani2
Figure 2: Naming the application

On the next screen, leave the default values and click Next.

Ani3
Figure 3: Leaving the default values in place

On the "Add an activity to Mobile" page, choose "Blank Activity." This creates an application with a single activity.

Ani4
Figure 4: Choosing a blank activity

We are then prompted to customize the activity. We will leave the default values unchanged.

Ani5
Figure 5: Again, leaving the default values in place

Click Finish to create the project files.

We will then proceed to create the animation files. Right-click the res folder and select New -> Android Resource file.

Ani6
Figure 6: Selecting a new Android resource file

Choose Animation as the resource type and alpha_animation as the file name.

Edit the default contents of the file to what follows:

// alpha_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="2000"
   android:fromAlpha="1.0"
   android:valueTo="0.0"
/>

We will similarly add another animation file for rotation effects.

Ani7
Figure 7: Adding another animation file

Edit the default contexts of the file to match what follows:

//rotation_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromDegrees="0"
   android:toDegrees="-360"
   android:duration="1000"
   android:pivotX="50%"
   android:pivotY="50%"
/>

Now, we will build the logic to exercise these animations. We will add two buttons on whose click events we will invoke the animations. We also will add an ImageView that will contain the image on which we will conduct these animations.

The layout file will be as shown in the following code segment.

<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"
   tools:context=".MainActivity">

   <ImageView
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:id="@+id/imageView"
      android:layout_gravity="center_vertical"
      android:src="@drawable/minion"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="100dp"
      />

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:weightSum="100"
      />


   <Button
      android:layout_weight="50"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Alpha Animation"
      android:onClick="executeAlphaAnimation"
      android:id="@+id/buttonAlpha"
      />

   <Button
      android:layout_weight="50"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Rotation Animation"
      android:onClick="executeRotateAnimation"
      android:id="@+id/buttonRotate"

      />

   </LinearLayout>


</RelativeLayout>

Finally, we will wire up the event handlers for the click event on the buttons. First, we will declare local variables for the two buttons and the ImageView control.

public class MainActivity extends AppCompatActivity {


   ImageView imageView;
   Animation rotateAnimation;
   Animation alphaAnimation;
   @Override
   protected void onCreate(Bundle savedInstanceState) {

Next, we will instantiate the imageView variable.

protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);

   imageView = (ImageView)findViewById(R.id.imageView);

}

Finally, we implement the click event handlers.

public void executeRotateAnimation(View v)
{
   rotateAnimation =
      AnimationUtils.loadAnimation(this, R.anim.rotate_animation);
   imageView.startAnimation(rotateAnimation);
}


public void executeAlphaAnimation(View v)
{
   alphaAnimation =
      AnimationUtils.loadAnimation(this, R.anim.alpha_animation);
   imageView.startAnimation(alphaAnimation);
}

Our application is now complete. When we run our application and click the buttons, you will notice the animation kick in.

Summary

In this article, we learned how to create simple animation effects in your application. I hope you found the information useful. You can download the sample code from here.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.


Tags: XML, Android, applications, animation, android studio, view animation, property animation, tween animation, frame animation




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel