Friday, July 9, 2010

Android image Transition for Animation

Simple Animation in Android

Basic animation can be achieved in following different ways.

  1. Use Transition of images.
  2. Frame Animation.
  3. Others (Tween Animation & NinePatchDrawable & ShapeDrawable)

Use Transition of images.

This type of animation shows cross-faded animation between the first and second layer. We can provide two different images for the transition & provide interval between their transitions.

Sample:

  • Create transition xml.

Store this file with any name in your drawable folder. E.d. splash_animation.xml

<transition xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/splash1"></item>
  <item android:drawable="@drawable/splash2"></item>
</transition>

 

  • Create a layout with ImageView that will have this transition.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/widget28"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:id="@+id/splashImgView"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:background="#ffccccff" android:padding="10px"
        android:layout_gravity="center_horizontal">
    </ImageView>
</LinearLayout>

 

  • Write code to fetch transaction and use it in one of the Image View.

public class TransitionAnimationActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.splashlayout);

        // Show A Transitions for Splash image here.
        TransitionDrawable transition = (TransitionDrawable) getResources()
                .getDrawable(R.drawable.splash_animation);

        //Set interval for the transition between two image.
        transition.startTransition(5000);

        //Fetch imageView from your layout and apply transition on the same.

        ImageView imageView= (ImageView) findViewById(R.id.splashImgView);
        imageView.setImageDrawable(transition);

    }
}

I wish i could take screen shot of that animation but sorry i can’t.

Next time i’ll describe how to achieve FRAME ANIMATION when you have more than one images to be shown.