Crossfading Animation in Android Studio

Introduction

 

Right from the start, the 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 :)