Android FadeIn and FadeOut Effect Animation





Sometimes its need to show something with fade effect or want to vanish with fade out effect. It's also have in android. We can use fade in and fade out effect in android apps. It's very easy task to use fade in and fade out effect.

First of all we have to ensure that is there have the anim folder under res folder. ( anim is the short of animation) Because, the animation will stay on anim folder with xml files.  Whatever if there not, have to create the anim folder and animation resource file.





To create anim folder :
   Right click on res folder > New > Android resource directory > select the Resource type  anim  ,Directory name anim > Click  OK.
To create animation file in anim folder: 
 Right click on anim folder > New > Animation resource file > Write the file name >  Then click Ok

Here see  I have created two files in anim folder.




fade_in.xml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?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:toAlpha="1.0"
        android:repeatCount="5"
     />

</set>


fade_out.xml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?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:toAlpha="0.0"
        android:repeatCount="5"
     />

</set>


activity_main.xml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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.hp.symonapps.MainActivity"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:weightSum="1">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv_in"
        android:src="@drawable/icon"
        android:layout_weight="0.07" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Fade out Text effect"
        android:id="@+id/tv_out"
        android:layout_marginTop="50dp"
        android:textSize="40sp"
        android:padding="20dp"
        android:textColor="#000"
        android:textAlignment="center" />


</LinearLayout>


MainActivity.java 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package com.example.hp.symonapps;

        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.view.animation.Animation;
        import android.view.animation.AnimationUtils;
        import android.widget.ImageView;
        import android.widget.TextView;


public class MainActivity extends AppCompatActivity {



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


        ImageView iv_in = (ImageView)findViewById(R.id.iv_in); //cast the iv_in imageView
        TextView tv_out = (TextView) findViewById(R.id.tv_out); //cast the  tv_out TextView

        //set the fade_in animation on ImageView
        Animation anim_in = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_in);
        iv_in.setAnimation(anim_in);
        //set the fade_out animation on TextView
        Animation anim_out = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_out);
        tv_out.setAnimation(anim_out);


    } //onCreate end

}




Thank you very much. If any question have just comments the below.

Comments

Post a Comment