Saturday, September 8, 2012

Flip View In Android

This example shows how you can flip and animate a list view.
Algorithm:
1.) Create a new project by File-> New -> Android Project name it FlipViewExample.
2.) Write following into your main.xml:
<?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">
    <Button

       android:id="@+id/button"
       android:text="Flip"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
    <ListView
       android:id="@+id/list_en"
       android:layout_width="match_parent"
       android:layout_weight="1.0"
       android:layout_height="0dip"/>
    <ListView
       android:id="@+id/list_fr"
       android:layout_width="match_parent"
       android:layout_weight="1.0"
       android:layout_height="0dip"
       android:visibility="gone"/>
</LinearLayout>
3.) Run for output.
Steps:
1.) Create a project named FlipViewExample and set the information as stated in the image.
Build Target: Android 4.0
Application Name: FlipViewExample
Package Name: example. FlipViewExample
Activity Name: FlipViewExample
Min SDK Version: 14
2.) Open FlipViewExample.java file and write following code there:
package example.FlipViewExample;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SeekBar;
public class FlipViewExamplebrush extends Activity {
    private static final int DURATION = 1500;
    private SeekBar mSeekBar;
    private static final String[] LIST_STRINGS_EN = new String[] {
            "One",
            "Two",
      "Three",
            "Four",
            "Five",
            "Six"
    };
    private static final String[] LIST_STRINGS_FR = new String[] {
            "Un",
            "Deux",
            "Trois",
            "Quatre",
            "Le Five",
            "Six"
    };
    ListView mEnglishList;
    ListView mFrenchList;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mEnglishList = (ListView) findViewById(R.id.list_en);
        mFrenchList = (ListView) findViewById(R.id.list_fr);
        // Prepare the ListView
        final ArrayAdapter<String> adapterEn = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, LIST_STRINGS_EN);
        // Prepare the ListView
        final ArrayAdapter<String> adapterFr = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, LIST_STRINGS_FR);
        mEnglishList.setAdapter(adapterEn);
        mFrenchList.setAdapter(adapterFr);
        mFrenchList.setRotationY(-90f);
        Button starter = (Button) findViewById(R.id.button);
        starter.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                flipit();
            }
        });
    }
    private Interpolator accelerator = new AccelerateInterpolator();
    private Interpolator decelerator = new DecelerateInterpolator();
    private void flipit() {
        final ListView visibleList;
        final ListView invisibleList;
        if (mEnglishList.getVisibility() == View.GONE) {
            visibleList = mFrenchList;
            invisibleList = mEnglishList;
        } else {
            invisibleList = mFrenchList;
            visibleList = mEnglishList;
        }
        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visibleList,"rotationY", 0f, 90f);
        visToInvis.setDuration(500);
        visToInvis.setInterpolator(accelerator);
        final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisibleList,"rotationY",
                -90f, 0f);
        invisToVis.setDuration(500);
        invisToVis.setInterpolator(decelerator);
        visToInvis.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator anim) {
                visibleList.setVisibility(View.GONE);
                invisToVis.start();
                invisibleList.setVisibility(View.VISIBLE);
            }
        });
        visToInvis.start();
    }
}
3.) Compile and build the project.
Output

5 comments:

  1. Nice article...please credit the source blog too.

    ReplyDelete
  2. Can I use this with Android 2.2?

    ReplyDelete
    Replies
    1. Yes you can even you can use in 2.1 also.

      Delete
    2. ObjectAnimator requires API level 11. Which means you cant use this in API less 3.0

      Delete