Tutorial Online: xml

Showing posts with label xml. Show all posts

Sunday, January 18, 2015

Android beginner tutorial Part 94 Applying XML animations

In this tutorial well 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 well 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 activity_main.xml file. Add an ImageView there, set its layout_width and layout_height values to wrap_content. 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;
}
}

Thats all for today.

Thanks for reading!