How to Perform Tween Animation(Fade In and Out) in Android

In this tutorial how to perform Fade In and Fade Out in Tween Animation in Android is shown.

Points to Remember:

  • For creating the fade.xml file you will have to first create anim folder under res folder.
  • At the time of creating fade.xml file you can either select ‘alpha’ or ‘set’ as Root Element.
  • You can also perform fade in and fade out separately, for that you will have to create another file in anim folder, and don’t write the ‘android:startOffset’ property in this file else it will start the fade out after some delay.

activity_main.xml

<RelativeLayout 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”
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”.MainActivity” >

<ImageView
android:id=”@+id/imageView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_centerVertical=”true”
android:src=”@drawable/tweenedanm” />

<Button
android:id=”@+id/b1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignBottom=”@+id/imageView1″
android:layout_centerHorizontal=”true”
android:layout_marginBottom=”14dp”
android:onClick=”onFade”
android:text=”Fade” />

</RelativeLayout>

res/anim/fade.xml

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

<alpha
android:fromAlpha=”1″
android:toAlpha=”0″
android:startOffset=”2000″
android:duration=”2000″/>

</set>

 

MainActivity.java

package com.example.demo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity{

ImageView iv;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv=(ImageView)findViewById(R.id.imageView1);
}

public void onFade(View v)
{
Animation animation=AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade);
iv.startAnimation(animation);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
//Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}

https://youtu.be/vSwVg7u9Az0

Add a Comment

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