Tutorial details

Android beginner tutorial: Part 94 - Applying XML animations | App Code for Sale | Preview

Android beginner tutorial: Part 94 - Applying XML animations | Android Tutorial

How to scale, rotate and translate animations to a shape on the screen

Overview PAGE TOP

In this tutorial we'll make a demo application that applies scale, rotate and translate animations to a shape on the screen.

First of all we need to create the animation XML files.

Go to the res/anim/ directory of your project. The first file we'll add is rotate.xml:

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

Then goes scale.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <scale android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="0.5"
        android:toYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="0"
        android:duration="1500"/>
</set>

Then we add translate.xml animation, which is a set containing two translate animations that are executed in order:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate android:toYDelta="-100"
        android:startOffset="0"
        android:duration="1500"/>
    <translate android:toYDelta="100"
        android:startOffset="1500"
        android:duration="1500"/>
</set>

Now go to activitymain.xml file. Add an ImageView there, set its layoutwidth and layoutheight values to wrapcontent. Set the gravity of the parent to center.

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:gravity="center">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

Now go to MainActivity.java class. First we declare the image and draw a red square onto it:

private ImageView image;

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

image = (ImageView)findViewById(R.id.image);
ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(100);
shape.getPaint().setColor(Color.RED);
image.setImageDrawable(shape);
}

Add an onCreateOptionsMenu() function, which adds 3 buttons to the menu. Set the IDs of the menu items to the IDs of the animations:

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, R.anim.rotate, Menu.NONE, "Rotate");
menu.add(Menu.NONE, R.anim.scale, Menu.NONE, "Scale");
menu.add(Menu.NONE, R.anim.translate, Menu.NONE, "Translate");
return(super.onCreateOptionsMenu(menu));
}

In the onOptionsItemSelected() function, we get the animation out of the selected item using the id. Then we apply it to the image using startAnimation() method:

@Override
public boolean onOptionsItemSelected(MenuItem item){
Animation animation = AnimationUtils.loadAnimation(this, item.getItemId());
image.startAnimation(animation);
return true;
}

Simple as that. Full code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RectShape;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity{

private ImageView image;

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

image = (ImageView)findViewById(R.id.image);
ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(100);
shape.getPaint().setColor(Color.RED);
image.setImageDrawable(shape);
}

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, R.anim.rotate, Menu.NONE, "Rotate");
menu.add(Menu.NONE, R.anim.scale, Menu.NONE, "Scale");
menu.add(Menu.NONE, R.anim.translate, Menu.NONE, "Translate");
return(super.onCreateOptionsMenu(menu));
}

@Override
public boolean onOptionsItemSelected(MenuItem item){
Animation animation = AnimationUtils.loadAnimation(this, item.getItemId());
image.startAnimation(animation);
return true;
}
}

That's all for today.

Thanks for reading!

Reference PAGE TOP

http://kirill-poletaev.blogspot.it/2013/02/android-beginner-tutorial-part-94.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.