Transit with Zoom animation in Android

Here I am providing you the example how to use Transit and Zoom effect with animation.

First image you want to transit use as drawable or create background. I have created background and apply transit effect on that

draw_cupcake.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient android:startColor="@color/cupcake_start"
        android:endColor="@color/cupcake_end"
        android:angle="270"/>

</shape>

My color code

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="cupcake_start">#007f9c</color>
    <color name="cupcake_end">#02adc7</color>
</resources>

Next is transit effect which I am applying on background.

anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="5000"
        android:fromYDelta="-100%p"
        android:toYDelta="0" />

</set>

Now for Zoom effect

anim_zoom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="2000"
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="0.5"
        android:toYScale="0.5" />

</set>

Here is my layout file

main_activity.xml

 <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="horizontal" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/img1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/draw_cupcake" />

        <ImageView
            android:id="@+id/img2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
            android:visibility="gone" />
    </FrameLayout>

</LinearLayout>

My MainActivity.java

package com.animsplash;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {

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

        Animation anim = AnimationUtils.loadAnimation(this, R.anim.anim);
        anim.setInterpolator((new AccelerateDecelerateInterpolator()));
        anim.setFillAfter(true);
        ImageView img1 = (ImageView) findViewById(R.id.img1);
        img1.setAnimation(anim);

        anim.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

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

            }

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

                Animation animzoom = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim_zoom);
                animzoom.setInterpolator((new AccelerateDecelerateInterpolator()));
                animzoom.setFillAfter(true);
                ImageView img2 = (ImageView) findViewById(R.id.img2);
                img2.setVisibility(View.VISIBLE);
                img2.setAnimation(animzoom);
            }
        });

    }
}

You can copy the code and create yourself this.

Happy to help you.