CoderzHeaven

Hello all…

I have shown a lot of examples of animations in android.
Today I will show you how to show an image transition animation between two images. For that you have to create an xml named “expand_collapse.xml” inside the res/drawable folder.

The contents of “expand_collapse.xml” are

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

Now in the main.xml place an imageView to show the transition

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/toggle_image"
    />
</LinearLayout>

Now in the main java file I will show you how to apply this transition.

package com.coderzheaven.pack;

import android.app.Activity;
import android.content.res.Resources;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class TransitionDrawableDemo extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources res = getApplicationContext().getResources();
        TransitionDrawable transition = (TransitionDrawable) res.getDrawable(R.drawable.expand_collapse);
        ImageView image = (ImageView) findViewById(R.id.toggle_image);
        image.setImageDrawable(transition);

        transition.startTransition(5000);
   }
}

In android the default transition between activities is to slide from left to right.
But with custom animations we can change that.

First create a folder inside the res/drawable folder called “anim”.
Then create a file named “fade.xml” and copy this code into it.

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:fromAlpha="0.0" android:toAlpha="1.0"
       android:duration="@android:integer/config_longAnimTime" />

create another file named “hold.xml” in the same place
hold.xml.

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:fromXDelta="0" android:toXDelta="0"
       android:duration="@android:integer/config_longAnimTime" />

activity_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:padding="4dip"
    android:gravity="center_horizontal"
    android:layout_width="fill_parent" android:layout_height="fill_parent">

    <TextView
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_weight="0"
        android:paddingBottom="4dip"
        android:text="Sample Animation"/>

    <Button android:id="@+id/fade_animation"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="fade In">
        <requestFocus />
    </Button>
</LinearLayout>

Now the main java file.

package pack.coderzheaven;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class ActivityAnimation extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);

        Button button = (Button)findViewById(R.id.fade_animation);
        button.setOnClickListener(mFadeListener);
    }

    private OnClickListener mFadeListener = new OnClickListener() {
        public void onClick(View v) {
            startActivity(new Intent(ActivityAnimation.this, SecondClass.class));
            overridePendingTransition(R.anim.fade, R.anim.hold);
        }
    };
}

package pack.coderzheaven;

import android.app.Activity;
import android.os.Bundle;

public class SecondClass extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Second Class"
    />
</LinearLayout>