How to FadeOut Textview on Button Click

Introduction

 
In this article, you will learn how to fade_out text on button click using animation in Android.
 
In this first article, you will create the project. In the XML file, you will use a TextView and Button. So what you will do is to hide the textview on button click. In a Java class file, you will create an animation object. And then you call the loadAnimation() method to load the animation in the object. Now set the animation on its animation clicklistener(). At last on button click event this object to the setAnimation method as an argument to set the animation.
 
Step 1      
 
Create a project like this:
 
1.jpg
 
Step 2
 
Create an XML file and write this.
 
In the XML file you will use a TextView and Button. In this application you need to hide the TextView on button click.
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  6.     android:paddingRight="@dimen/activity_horizontal_margin"  
  7.     android:paddingTop="@dimen/activity_vertical_margin"  
  8.     android:paddingBottom="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity"  
  10.    
  11.         android:background="#81a3d0">  
  12.    
  13.     <TextView  
  14.         android:layout_width="wrap_content"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="@string/hello_world"  
  17.         android:textSize="40dp"  
  18.         android:id="@+id/textView1"  
  19.         android:layout_centerHorizontal="true"  
  20.             />  
  21.    
  22. <Button  
  23.         android:id="@+id/button1"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_width="wrap_content"  
  26.         android:text="FadeOut"  
  27.         android:layout_alignParentBottom="true"  
  28.         android:layout_centerHorizontal="true"  
  29.         >  
  30.    
  31. </Button>  
  32.    
  33. </RelativeLayout> 
Step 3
 
Create an anim resource file inside the res folder. Inside the anim folder you will create an XML file named fade_out and write this:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      android:fillAfter="true" >  
  4.    
  5.     <alpha  
  6.             android:duration="1000"  
  7.             android:fromAlpha="1.0"  
  8.             android:interpolator="@android:anim/accelerate_interpolator"  
  9.             android:toAlpha="0.0" />  
  10.    
  11. </set> 
Step 4
 
Create a Java file and write this.
 
In this class file, you will create an animation object. And then you call the loadAnimation() method to load the animation into the object. Now set the animation on its animation clicklistener(). At last on button click event this object to the setAnimation method as an argument to set the animation.
  1. package com.fadeoutapplication;  
  2.    
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.animation.Animation;  
  7. import android.view.animation.AnimationUtils;  
  8. import android.widget.Button;  
  9. import android.widget.TextView;  
  10.    
  11. public class MainActivity extends Activity implements Animation.AnimationListener {  
  12.    
  13.     Animation fadeout;  
  14.     Button button;  
  15.     TextView textview;  
  16.     @Override  
  17.     protected void onCreate(Bundle savedInstanceState) {  
  18.         super.onCreate(savedInstanceState);  
  19.         setContentView(R.layout.activity_main);  
  20. textview=(TextView)findViewById(R.id.textView1);  
  21.    button=(Button)findViewById(R.id.button1);  
  22.    
  23.         fadeout= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out);  
  24.         fadeout.setAnimationListener(this);  
  25.    
  26.         button.setOnClickListener(new View.OnClickListener() {  
  27.             @Override  
  28.             public void onClick(View view) {  
  29.    
  30.                 textview.setAnimation(fadeout);  
  31.             }  
  32.         });  
  33. }  
  34.    
  35.     @Override  
  36.     public void onAnimationStart(Animation animation) {  
  37.    
  38.     }  
  39.    
  40.     @Override  
  41.     public void onAnimationEnd(Animation animation) {  
  42.    
  43.     }  
  44.    
  45.     @Override  
  46.     public void onAnimationRepeat(Animation animation) {  
  47.    
  48.     }  
Step 5 
 
output
 
2.jpg
 
Step 6
 
When you click on the fadeout button:
 
3.jpg