Crossfading Animation in Android Studio

Introduction

Right from the start, animation is something that has interested me. In this article we will create a simple animation.

Animation can add subtle visual clues that notify the users about what is going on in your app and improve their mental model of your app's interface. Animation can be of many types:

• Crossfading two views
• Using view pager for screen slides
• Displaying card flip animations
• Zooming a view
• Animating layout changes

In this article we will look at "Crossfading two views". In this type of animation, an object will appear and then will fade away according to the fading time specified by you. This type of animation can be used to occupy the user while something is being loaded.

Step 1:

I am using images for this purpose. You can use any other element (like a Progress Bar, text etcetera).

Copy all the images you want to use to the clipboard and paste them on "drawable".

I am using 3 images, namely scene1, scene2 and scene3.

Step 2:

Open the layout file, in other words "activity_main" and make the following changes in it:

<ImageView

       android:layout_width="700dp"

       android:layout_height="600dp"

       android:id="@+id/im"

        />

 

The layout looks like:

Step 3:

Open "MainActivity.java" and add the following code to it:

package com.animation2;

 

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.app.Activity;

import android.os.Handler;

import android.view.Menu;

import android.view.View;

import android.view.animation.*;

import android.widget.ImageView;

 

public class MainActivity extends Activity {

    ImageView im;

    Animation fadeIn;

    Animation fadeOut;

    int fadeOutTime=5000;

    int timeBetween=3000;

    int images[]={R.drawable.scene1,R.drawable.scene2,R.drawable.scene3};

    static  int index=0;

    private AnimationSet animation;

    private Handler mHandler;

    final Context context=this;

 

    private Runnable mCountUpdater = new Runnable() {

        private int mCount = 0;

 

        @Override

        public void run() {

            if(mCount>2)

              return;

            else

            {

             func();

                mCount++;

            mHandler.postDelayed(this, 9000);

            }

        }

    };

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mHandler = new Handler();

        mHandler.post(mCountUpdater);

 

    }

    public void func()

    {

 

        if(index<=2)

        {

 

        im=(ImageView)findViewById(R.id.im);

 

        im.setImageResource(images[index]);

 

        fadeIn = new AlphaAnimation(0.00f, 1);

        fadeIn.setInterpolator(new LinearInterpolator()); // add this

        fadeIn.setDuration(500);

 

        fadeOut = new AlphaAnimation(1, 0f);

        fadeOut.setInterpolator(new AccelerateInterpolator()); // and this

        fadeOut.setStartOffset(timeBetween);

        fadeOut.setDuration(fadeOutTime);

 

        animation = new AnimationSet(false); // change to false

        animation.addAnimation(fadeIn);

        animation.addAnimation(fadeOut);

        animation.setRepeatCount(1);

        animation.setFillAfter(true);

        im.setAnimation(animation);

        index=index+1;

 

        animation.setAnimationListener(new Animation.AnimationListener() {

            @Override

            public void onAnimationStart(Animation animation) {

 

            }

 

            @Override

            public void onAnimationEnd(Animation animation) {

 

                if(index==3)

                {

                    Intent i=new Intent(context,Second.class);

                    startActivity(i);

                }

 

            }

 

            @Override

            public void onAnimationRepeat(Animation animation) {

 

            }

        });

        }

 

       }

 

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

 

}

 

In the code above, the alpha value is the opacity value of an object. If the alpha is 1 then the object is fully opaque. If the alpha is 0 then the object is fully transparent. If you skip "animation.setFillAfter(true)" then you will observe that the image appears again after fadding out. A handler has been used in the code above to introduce a delay between the animations of various images.

Step 4:

Let us design the layout of the second screen we require. "Layout" -> "New" -> "Layout Resource file". Name this file as "second_layout" and add the following code to it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:orientation="vertical"

              android:layout_width="match_parent"

              android:layout_height="match_parent"

              android:background="#45454545">

  <TextView

      android:layout_width="fill_parent"

      android:layout_height="wrap_content"

      android:layout_marginTop="150dp"

      android:layout_marginLeft="70dp"

      android:text="Hello"

      android:textSize="30dp"/>

 

</LinearLayout>

 

The layout looks like:

Step 5:

Click-right on the package of your main Java file then select "New" -> "Java class". Name this file "Second". Set the content view of this file to "second_layout".

package com.animation2;

 

import android.app.Activity;

import android.os.Bundle;

 

public class Second extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.second_layout);

    }

}

 

 

Step 6:

Add the name of the new activity to "AndroidManifest":

<activity android:name=".Second"

                  android:label="Hello"/>

 

The output snapshots follow.

The animation will look like:

The "Second" activity:

 

 Thank you.....Enjoy coding :)