Slideshow animation Android

In the previous posts, you learnt how to set animation on a view and the transition between activities programmatically. The code is easy to understand. However, it is not reusable in multiple activities. The property animation system allows you to define animations in xml files so that the animations can be reused in different activities. To animate an object, you specify the object's property name, duration of the animation, and what values you want to animate between.

In this Android tip, I am going to show you how to set a slideshow animation on an ImageView that displays images. The images are stored in an array of drawable resources and they are added to the ImageView one by one as the ImageView is animating. The animation will stop when all images are shown.



Now to have a workable example Android application to demonstrate the slideshow animation, create a new Android project. Then modify the activity_main.xml file to add an ImageView. Here is the content of the activity_main.xml file after the ImageView was added.

<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"
   android:orientation="vertical"
   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/imageview"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center"/>

</LinearLayout>

You will create a folder called animator in the res folder. All your xml files that define animations will be placed in the animator folder. Here is the slideshow.xml file that specifies the slideshow animation to an object. The object in this example is the ImageView. In this file, there are three animations (fade-in, slide-in, and fade-out) are played in a set sequentially. The fade-in and fade-out animations make changes to the alpha property of the ImageView. The slide-in animation changes the y property of the ImageView. It changes the vertical position of the ImageView. All durations of the animations are set to 2000ms.  

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially">
   <!-- fade in -->
   <objectAnimator
     android:propertyName="alpha"
     android:duration="2000"
     android:valueFrom="0.0"
     android:valueTo="1.0"
     android:valueType="floatType"
     />  

   <!-- slide in-->
<objectAnimator
   android:propertyName="y"
     android:duration="2000"
     android:interpolator="@android:anim/accelerate_interpolator"
     android:valueFrom="-200"
     android:valueTo="100"
     android:valueType="intType"
     />
<!-- fade out -->
<objectAnimator
     android:propertyName="alpha"
     android:duration="2000"
     android:valueFrom="1.0"
     android:valueTo="0.0"
     android:valueType="floatType"
     />  

  
</set>

To apply the set animations defined in xml file to the ImageView, in onStart method of the MainActivity class, you need to write code to inflate the animation xml file, set target object, and start the animation. The addListener method is useful when you want to perform an action when the animation is playing. In this case, I use it to repeat the slideshow process so that all images in the imgResources array are displayed one by one. Before running the slideshow animation application, make sure you have two image files in your res/drawable folder. I my case, I have angkorwat.jpg, and angkorwat1.jpg. You can change the image names or add new images as you want.

package com.example.andtip;
import android.animation.Animator;
import android.animation.AnimatorInflater;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ImageView;
public class MainActivity extends Activity {
   Activity context;
   AnimatorSet set;
   ImageView imgView;
   int imgResources[]={R.drawable.angkorwat, R.drawable.angkorwat1};
   int index=0;
   protected void onCreate(Bundle savedInstanceState) {
   //TODO Auto-generated method stub
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   context=this;
  
   }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.main, menu);
           return true;
   }
   public void onStart(){
   super.onStart();  
   imgView=(ImageView)findViewById(R.id.imageview);
   set = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.slideshow);
     set.setTarget(imgView);    
       set.addListener(new AnimatorListenerAdapter(){         
     public void onAnimationEnd(Animator animator){
     //repeat animation
       
        if(index<imgResources.length)
        {
        imgView.setImageResource(imgResources[index]);
        index++;      
     set.start();
        }
     }
    
    
      });
   set.start();
    
   }
  
}




Slideshow-animation-Android

Posted by: Dara | post date: 07-05-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.