Build Fade Animation App in Android

 Hello Guys ,

    In this tutorial , we are going to create fade animation on android app. we can make android app more attractive using fade animation. In this app we create two button and textview. Button name is fade-in and fade-out. fade-in and fade-out animation modify for text appearance.

and

  Feel free to visit my previous Animation tutorial.

     Bounce Animation

Fade Animation App MainScreen looking like below picture :

Let's implemented Fade Animation App.

Step 1 : Create a new Project

Step 2 : Create the animation file.

• Go to res folder and create a new Android Resource Directory named "anim". And in the anim resource directory create new animation files. Here We create 2 animation files. Animation files names are fade_in_animation.xml and fade_out_animation.xml.
•  fade_in_animation.xml

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

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="4000"/>

</set>

• fade_out_animation.xml

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

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="4000"/>

</set>

• android:fromAlpha : It is used to specify starting value for alpha offset. Where 0.0 is transparent and 1.0 is opaque.
• android:toAlpha : It is used to specify ending value of alpha offset.
• android:duration : It is used to specify  duration for animation. 

Step 3 : Edit activity_main.xml file

• Here we added two button and textview for perform fade animation.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ps_Inf0"
        android:textAllCaps="false"
        android:layout_centerInParent="true"
        android:textSize="30sp"
        android:textColor="@color/design_default_color_secondary"/>


    <Button
        android:id="@+id/btn_fade_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="82dp"
        android:textAllCaps="false"
        android:layout_marginBottom="48dp"
        android:text="Fade In" />

    <Button
        android:id="@+id/btn_fade_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="82dp"
        android:layout_marginBottom="48dp"
        android:textAllCaps="false"
        android:text="Fade Out" />

</RelativeLayout>

Step 4 : Implement MainActivity.java class file.

• In this class we can load animation class using Animation class.

import androidx.appcompat.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.TextView;

public class MainActivity extends AppCompatActivity {

    Button FADEIN , FADEOUT;
    TextView textView;

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

        FADEIN = findViewById(R.id.btn_fade_in);
        FADEOUT = findViewById(R.id.btn_fade_out);
        textView = findViewById(R.id.text);

        FADEIN.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation = AnimationUtils.loadAnimation(
                        getApplicationContext() , R.anim.fade_in_animation);
                textView.startAnimation(animation);
            }
        });

        FADEOUT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation = AnimationUtils.loadAnimation(
                        getApplicationContext() , R.anim.fade_out_animation);
                textView.startAnimation(animation);
            }
        });

    }
}

Output :

                 

     

If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support.  🙏