Android View Animation example

Animations not only make your app look nice but sometimes its better to have a hidden view come in with a little transition to save space for the main functionality of the app. In this example we are going to review the Tween animation that can be defined in a XML format and performs transitions such as rotating, fading, moving, and stretching etc. You have to create a folder named anim inside the res directory and then create the XML that will define the transition such as whether the view will come in from the right side or left and what will be the transparency over a given duration. In addition to the you can also attach animationListener to check when a specific animation starts and stops. For more information on how to define your animation resource please refer to the documentation provided in this link http://developer.android.com/guide/topics/resources/animation-resource.html#Tween

Animation Resource - slide_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
 android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="2000" />
 <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="2000" />
</set>

Animation Resource - slide_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
 android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="12000" />
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="12000" />
</set>

Layout Resource for the Main Activity

<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:gravity="center_horizontal"
 tools:context=".MainActivity">

 <RelativeLayout android:id="@+id/topLayout"
  android:layout_width="match_parent" android:layout_height="48dp"
  android:layout_alignParentTop="true">

  <View android:layout_width="match_parent" android:layout_height="2dp"
   android:layout_alignParentBottom="true" android:layout_marginLeft="3dp"
   android:layout_marginRight="3dp" android:background="?android:attr/dividerVertical" />

  <View android:id="@+id/viewDivider" android:layout_width="2dp"
   android:layout_height="wrap_content" android:layout_alignParentTop="true"
   android:layout_alignParentBottom="true" android:layout_marginBottom="3dp"
   android:layout_marginTop="3dp" android:background="?android:attr/dividerVertical"
   android:layout_centerHorizontal="true" />
  <Button android:id="@+id/showView" android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:layout_alignParentLeft="true"
   android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/viewDivider"
   android:background="?android:attr/selectableItemBackground"
   android:text="Display View" android:textColor="@color/khaki"
   android:layout_alignParentBottom="true" />
  <Button android:id="@+id/hideView" android:layout_width="wrap_content"
   android:layout_height="match_parent" android:layout_alignParentRight="true"
   android:layout_alignParentTop="true"
   android:background="?android:attr/selectableItemBackground"
   android:text="Hide View" android:textColor="@color/khaki"
   android:layout_alignParentBottom="true" android:layout_toRightOf="@+id/viewDivider" />
 </RelativeLayout>

 <FrameLayout android:id="@+id/frameLayout"
  android:layout_width="match_parent" android:layout_height="wrap_content"
  android:layout_alignParentLeft="true" android:layout_below="@+id/topLayout"
  android:background="@color/khaki" android:visibility="gone">

  <AnalogClock android:id="@+id/analogClock1"
   android:layout_width="match_parent" android:layout_height="wrap_content" />
 </FrameLayout>

 <TextView android:id="@+id/textView1" android:layout_width="match_parent"
  android:layout_height="wrap_content" android:layout_alignParentLeft="true"
  android:layout_below="@+id/frameLayout" android:gravity="center_horizontal"
  android:paddingTop="10dp" android:text="This is my first Line"
  android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView android:id="@+id/textView2" android:layout_width="match_parent"
  android:layout_height="wrap_content" android:layout_alignParentLeft="true"
  android:layout_below="@+id/textView1" android:gravity="center_horizontal"
  android:text="This is my second Line" android:textAppearance="?android:attr/textAppearanceLarge" />

 <TextView android:id="@+id/textView3" android:layout_width="match_parent"
  android:layout_height="wrap_content" android:layout_alignParentLeft="true"
  android:layout_below="@+id/textView2" android:gravity="center_horizontal"
  android:text="This is my third Line" android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Main Activity

package com.as400samplecode;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.FrameLayout;

public class MainActivity extends Activity implements OnClickListener{

 private Button showView, hideView;
 private Animation slideRight, slideLeft;
 private FrameLayout myLayout;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        showView = (Button) findViewById(R.id.showView);
        showView.setOnClickListener(this);
        hideView = (Button) findViewById(R.id.hideView);
        hideView.setOnClickListener(this);
  
  myLayout = (FrameLayout) findViewById(R.id.frameLayout);
  
  slideRight = AnimationUtils.loadAnimation(this, R.anim.slide_right);
  slideLeft = AnimationUtils.loadAnimation(this, R.anim.slide_left);
  slideLeft.setAnimationListener(animationListener);
  
    }
    
    public void onClick(View v) {

  switch (v.getId()) {
  
  case R.id.showView:
   myLayout.startAnimation(slideRight);
   myLayout.setVisibility(View.VISIBLE);
   break;
   
  case R.id.hideView:
   myLayout.startAnimation(slideLeft);
   break;

   // More buttons go here (if any) ...

  }
 }

    private AnimationListener animationListener = new AnimationListener(){

  @Override
  public void onAnimationEnd(Animation animation) {
   myLayout.setVisibility(View.GONE);
  }

  @Override
  public void onAnimationRepeat(Animation animation) {
   // TODO Auto-generated method stub
   
  }

  @Override
  public void onAnimationStart(Animation animation) {
   // TODO Auto-generated method stub
   
  }};
   

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