Home » Android

Fade In Animation Example in Android



In this tutorial, we are going to learn how to animate pictures and graphics in android studio. This is an example of ‘fade in’ animation.
Submitted by Shamikh Faraz, on April 28, 2018

1) XML File: activity_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.example.faraz.Animation_Example.MainActivity">


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </LinearLayout>
    <ViewFlipper
        android:id="@+id/backgroundViewFlipper1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <ImageView
            android:id="@+id/backgroundImageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/tiger_2"
            android:adjustViewBounds="true" />

        <ImageView
            android:id="@+id/backgroundImageView2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/tigertiger"
            android:adjustViewBounds="true"/>

        <ImageView
            android:id="@+id/backgroundImageView3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/white2"
            android:adjustViewBounds="true"/>

        <ImageView
            android:id="@+id/backgroundImageView4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/white4"
            android:adjustViewBounds="true"/>

        <ImageView
            android:id="@+id/backgroundImageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/white_tiger_copy"

            />

        <ImageView
            android:id="@+id/backgroundImageView6"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/tiger" 
            android:adjustViewBounds="true"/>

        <ImageView
            android:id="@+id/backgroundImageView7"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/tigress"
            android:adjustViewBounds="true"/>

        <ImageView
            android:id="@+id/backgroundImageView8"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/wildcat"
            android:adjustViewBounds="true"/>

    </ViewFlipper>

</android.support.constraint.ConstraintLayout>


In the above code in every ImageView you will find android:src="@drawable/tigress" shows an error. Actually the error is concern about image/images. The particular images I use in this article will not be there in your computer, so first you have to copy your own images from your computer to ‘drawable’ folder in android studio and also write the same spelling of image in android:src="@drawable/your_image_name".

Android - Fade In Example 0

Here in ‘drawable’ folder you should copy your images which you would like to see in animation. As you copy your images, in drawble, red color will change in green color android:src="@drawable/your_image_name ". Error removes.

2) File: MainActivity.java

package com.example.faraz.Animation_Example;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {
    Animation fade_in, fade_out;
    ViewFlipper viewFlipper;

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

        viewFlipper= (ViewFlipper) this.findViewById(R.id.backgroundViewFlipper1);
        fade_in= AnimationUtils.loadAnimation(this,android.R.anim.fade_in);
        fade_out=AnimationUtils.loadAnimation(this,android.R.anim.fade_out);
        viewFlipper.setAnimation(fade_in);
        viewFlipper.setAnimation(fade_out);
        viewFlipper.setAutoStart(true);
        viewFlipper.setFlipInterval(5000);
        viewFlipper.startFlipping();

    }
}


In android, there are many possible ways to make ‘fade in’ animation and here I used alpha tag and it is one the easy and most used ways of making animation. For the fade in animation using alpha tag you have to create an anim folder in your res directory.

Android - Fade In Example 1

After creating anim folder in res/ directory and also create fadein.xml file in res/anim/ directory and place the following content.

3) XML File: fadein.xml

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

Output: After executing your code on your device/virtual device, you get animated images.






Was this page helpful? YES NO

Are you a blogger? Join our Blogging forum.



Comments and Discussions


We are using Google to publish ads on our website; Google has its own privacy policies. They may save log, cookies on your system. Google may also collect information of your system like IP address, region, city, country. For more details please go through the Google’s privacy policy.