Android ViewFlipper
ViewFlipper is an extension class of ViewAnimator, which animates between two or more views that have been added to it. Specfically, only one child is shown at a time.
To learn Basic of Android Animation go to Android Animation Tutorial.
To get a better understanding, suppose that we have two TextViews that will be used in our app, but we want only one to be displayed at a time. That is, here is the most popular use case that ViewFlipper fits in.
Example
In this example i will demonstrate you how to work on viewflipper with animations.
VIDEO DEMO
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken one viewfilpper for flipping the views and inside the viewflipper i had taken four different views.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ViewFlipper android:id="@+id/viewFlipper1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" > <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/a" /> <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/b" /> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:textSize="18sp" android:text="@string/flipper_textview" /> <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/e" /> </ViewFlipper> </LinearLayout> |
3. Now, create a new folder in res folder naming anim for animation files. In this folder create two xml files naming left_out.xml and right_enter.xml.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="-100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set> |
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <translate android:fromXDelta="100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="300" /> </set> |
4. Now, add the following code to your MainActivity.java. In this file i am going to show using of viewflipper.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
package com.view_flipper_demo; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.MotionEvent; import android.widget.ViewFlipper; public class MainActivity extends Activity { private ViewFlipper flip; private float initialX; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); flip = (ViewFlipper) findViewById(R.id.viewFlipper1); // Setting IN and OUT animation for view flipper flip.setInAnimation(this, R.anim.right_enter); flip.setOutAnimation(this, R.anim.left_out); } // Implementing touch event for view flipper @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // Getting intitial by event action down initialX = event.getX(); break; case MotionEvent.ACTION_UP: // On action up the flipper will start and showing next item float finalX = event.getX(); if (initialX > finalX) { // Show items are 4 if (flip.getDisplayedChild() == 4) break; // Flip show next will show next item flip.showNext(); } else { // If flip has no items more then it will display previous item if (flip.getDisplayedChild() == 0) break; flip.showPrevious(); } break; } return false; } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.flip_by_interval: // This will set the flipper automatic and timing is 2sec between // flipping flip.setFlipInterval(2000); flip.startFlipping(); break; case R.id.flip_on_click: // If flipper is already flipping it will stop flipping and show // next if not flipping if (flip.isFlipping()) { flip.stopFlipping(); } flip.showNext(); break; } return super.onOptionsItemSelected(item); } } |
5. Now, run the app and you will get the output as shown in video.
Thanks. 