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
Figure 1: Opening Android Studio
Provide ViewAnimationDemo as the Application Name and Click Next.
Figure 2: Naming the application
On the next screen, leave the default values and click Next.
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.
Figure 4: Choosing a blank activity
We are then prompted to customize the activity. We will leave the default values unchanged.
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.
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.
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.