Android Fade In Fade Out Image Animation Example Tutorial

How to add-apply fade in out effect with animation using XML programmatically.

Fade in animation is one of the most simplest and usable animation in android apps. In this animation the we will change the alpha( Opacity ) of an image with slightly slow animation . First we will set image alpha value zero then with time management we will increase the alpha value to 1.0 . Same procedure follow in the fade out animation the only major difference between them that it’s just opposite of fade in animation. So here is the complete step by step tutorial for Android Fade In Fade Out Image Animation Example Tutorial.

android-project-download-code-button

List of all files usable in this project :

  1. MainActivity.java .
  2. activity_main.xml .
  3. fade_in.xml .
  4. fade_out.xml.

Android Fade In Fade Out Image Animation Example Tutorial.

1. Create a folder named as anim inside the res folder.

2. Create both fade_in.xml & fade_out.xml files inside this folder like i did in below screenshot.

anim_folder

3. Now start coding.
Code for MainActivity.java file.

package com.android_examples.fadeinout_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    Button buttonFadeIn, buttonFadeOut;
    ImageView imageView ;
    Animation animation ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonFadeIn = (Button)findViewById(R.id.button);
        buttonFadeOut = (Button)findViewById(R.id.button2);
        imageView = (ImageView)findViewById(R.id.imageView);

        buttonFadeOut.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_out);
                imageView.setAnimation(animation);

            }
        });

        buttonFadeIn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_in);
                imageView.setAnimation(animation);

            }
        });
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.fadeinout_android_examplescom.MainActivity"
    android:background="#FFF8E1">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="250dp"
        app:srcCompat="@drawable/sample_pic"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/imageView" />

    <Button
        android:text="Apply fade in animation on imageview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="21dp"
        android:id="@+id/button" />

    <Button
        android:text="Apply fade out animation on imageview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:id="@+id/button2" />

</RelativeLayout>

Code for fade_in.xml file.

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

    <alpha
        android:duration="4000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />

</set>

Code for fade_out.xml file.

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

    <alpha
        android:duration="4000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />

</set>

Screenshot:

Android Fade In Fade Out Image Animation Example Tutorial

Click here to download Android Fade In Fade Out Image Animation Example Tutorial project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *