Animation In Android

Flip Animation in Android

Animation is an important class in Android application development. Here I am going to describe to you about how we can implement animations in Android applications. In this application I have a list view and a button. The button is aligned at the  top of the screen and a listviewis below to the button.

On clicking in the button the listview items will flip and new contents will be loaded in to the listview.

 

For this first create the main layout,

<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Flip"
android:id="@+id/flipButton"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
    <ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_below="@+id/flipButton"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
</RelativeLayout>

Also create one more layout for the list items as follows,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
    <ViewFlipper
android:id="@+id/viewflipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
        <TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="New Text"
android:id="@+id/itemFront" />
        <TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="New Text2"
android:visibility="gone"
android:id="@+id/itemBack" />
    </ViewFlipper>


</LinearLayout>

Here I am using a View flipper and added two text views in to that, one for the front face and the other for the back face.

 

Now I am going to add two translate animations for fade in and fade out as follows

 

fade_in.xml,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
    <translate
android:fromXDelta="-100%"
android:toXDelta="0%"
android:duration="500" />
</set>

fade_out.xml,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
    <translate
android:fromXDelta="0%"
android:toXDelta="100%"
android:duration="500" />
</set>

In the MainActivity.java file i am creating an array list for populating the listview,

ArrayList<String> items = new ArrayList<String>();
for(int i=0;i<10;i++)
    items.add("item "+i);

Now create the adapter for the listview , here I created one more method to get the back face text,

public String getBackText(int i) {
if ((itemList.size() - (i + 1)) < 0)
return getItem(0);
return itemList.get(itemList.size() - (i + 1));
}

Please see the getview method for the adapter,

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    ViewHolder holder = null;
if (view == null) {
        LayoutInflater inflater = LayoutInflater.from(context);
        view = inflater.inflate(R.layout.list_item, null);
        holder = new ViewHolder();
        holder.frontText = (TextView) view.findViewById(R.id.itemFront);
        holder.backText = (TextView) view.findViewById(R.id.itemBack);
        holder.MyViewFlipper = (ViewFlipper) view.findViewById(R.id.viewflipper);
        view.setTag(holder);
    } else {
        holder = (ViewHolder) view.getTag();
    }
    holder.frontText.setText(getItem(i));
    holder.backText.setText(getBackText(i));
    Animation animationFlipIn = AnimationUtils.loadAnimation(context, R.anim.flip_in);
    Animation animationFlipOut = AnimationUtils.loadAnimation(context, R.anim.flip_out);
    animationFlipIn.setStartOffset(1000 * i);
    animationFlipOut.setStartOffset(1000 * i);
    holder.MyViewFlipper.setInAnimation(animationFlipIn);
    holder.MyViewFlipper.setOutAnimation(animationFlipOut);
if (holder.flipped)
        holder.MyViewFlipper.showPrevious();
else
 holder.MyViewFlipper.showNext();

return view;
}

Here I am using the Animation classes and loading the fade in and fade out animations here and put setStartOffset for some delay depending upon the index value. Please see the ViewHolder class,

class ViewHolder {
private TextView frontText = null;
private TextView backText = null;
private ViewFlipper MyViewFlipper = null;
private boolean flipped = false;
}

Please see the screen shots,

 

 

Read more articles on Android:

• Set Up Google Cloud Messaging Service In Android Studio: Part Three
• Bound Service Using Messenger In Android: Part Three