Adding Simple Animations To Your Android Interface

Today one of my readers asked me for help to create simple animation. So I thought, it may be helpful for him as well as others if I could post an example as a topic.

For this example, we will need to create a folder “anim”, inside res. Then create xml files to define animation. So the explorer will look like this.

So, here is the code and source project for the example, using what you can create a simple animation for your welcome screen.

package com.anim;

//ShowAnim.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class ShowAnim extends Activity {
    /** Called when the activity is first created. */
	LinearLayout ll_buttons;
	TextView heading,subheading;
	Button exit;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        heading=(TextView)findViewById(R.id.heading);
        subheading=(TextView)findViewById(R.id.subheading);
        ll_buttons=(LinearLayout)findViewById(R.id.ll_buttons);
        ll_buttons.setVisibility(View.GONE);
        Animation heading_animation = AnimationUtils.loadAnimation(this, R.anim.heading);
        Animation subheading_animation = AnimationUtils.loadAnimation(this, R.anim.subheading);
        heading.startAnimation(heading_animation);
        subheading.startAnimation(subheading_animation);

        subheading_animation.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onAnimationEnd(Animation animation) {
            	startButtonAnimation();
            }
        });
        exit=(Button)findViewById(R.id.btn_exit);
        exit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            	finish();
            }
        });
    }

    public void startButtonAnimation()
    {
 	   ll_buttons.setVisibility(View.VISIBLE);
 	   Animation buttons_animation = AnimationUtils.loadAnimation(this, R.anim.buttons);
       ll_buttons.startAnimation(buttons_animation);
    }
}
<?xml version="1.0" encoding="utf-8"?>
<!-- main.xml -->
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
>
<TextView android:id="@+id/heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_centerHorizontal="true"
android:textColor="#FFEA00"
android:textSize="40dip"
android:textStyle="bold"
android:layout_marginTop="30dip"
android:text="ANDROID"/>
<TextView android:id="@+id/subheading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_centerHorizontal="true"
android:textColor="#00FFF0"
android:textSize="15dip"
android:textStyle="bold"
android:layout_marginTop="10dip"
android:text="A Software Stack for Mobile Devices."/>
<LinearLayout
android:id="@+id/ll_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:layout_below="@+id/slogon"
android:layout_marginTop="50dip">
<Button
android:id="@+id/btn_exit"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_below="@+id/slogon"
android:layout_alignParentLeft="true"
android:textColor="#FF0000"
android:textStyle="bold"
android:text="EXIT" />
</LinearLayout>
</LinearLayout >
 
<?xml version="1.0" encoding="UTF-8"?>
<!-- heading.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<alpha
android:fromAlpha="0"
android:toAlpha="1.0"
android:duration="5000"
android:delay="3000" />
<!-- If you want rotation, you can use this -->
<!--<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:toYScale="100"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000"/>
-->
<translate
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="-100.0"
android:toYDelta="0.0"
android:duration="3000"/>
</set>
<?xml version="1.0" encoding="UTF-8"?>
<!-- subheading.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<alpha
android:fromAlpha="0"
android:toAlpha="1.0"
android:duration="3000"
android:delay="3000" />
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="5"
android:toXScale="1"
android:fromYScale="5"
android:toYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="3000" />
<translate
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="100.0"
android:toYDelta="0.0"
android:duration="3000"/>

</set>
<?xml version="1.0" encoding="UTF-8"?>
<!-- buttons.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<alpha
android:fromAlpha="0"
android:toAlpha="1.0"
android:duration="500"/>
<translate
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="30.0"
android:toYDelta="0.0"
android:duration="500"/>
</set>

Project Source Code is Available here

Advertisements