Tuesday, 7 May 2013

View Flipper in android example


Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.
The ViewFlipper is a nifty widget that can be used to slide views in and out of the user’s current view port. At times I find it a handy UI replacement for the tab widget (which I’ve stated before I’m not overly fond of). What I like most about the ViewFlipper is the slick user experience. It’s the same sort of effect that is prevalent on Windows Phone 7, and was used by Google to jazz up the latest incarnation of the Android Market.
Despite the widget only recently gaining popularity on Android, it’s been around since version 1.0 of the API. (Read the official ViewFlipper documentation.) However, I don’t think the developer documentation makes it immediately obvious how to use the widget in your applications. In particular, puzzling through the sliding in and out animation transitions can be a little tough. Maybe not as tough as ignoring the candy bowl sitting on my kitchen counter, assuring me no one will notice if I take just one more Laffy Taffy, but still, it requires you to put on your thinking cap. If you’d like to download and import the entire project detailed in this tutorial, you can do so here.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="View Flipper Demo" />

<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="6dip" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A dog limps into a saloon and says..."
android:textColor="#00ff00"
android:textSize="14sp"
android:textStyle="bold" >
</TextView>
</LinearLayout>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I&apos;m looking for the man who shot my paw!"
android:textColor="#00ff00"
android:textSize="14sp"
android:textStyle="bold" >
</TextView>
</LinearLayout>
</ViewFlipper>

</LinearLayout>

MainActivity.java

package com.example.viewflipper;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

private ViewFlipper vf;
private float lastX;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vf = (ViewFlipper) findViewById(R.id.view_flipper);
}

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

public boolean onTouchEvent(MotionEvent touchevent) {
switch (touchevent.getAction()) {
case MotionEvent.ACTION_DOWN: {
lastX = touchevent.getX();
break;
}
case MotionEvent.ACTION_UP: {
float currentX = touchevent.getX();
if (lastX < currentX) {
if (vf.getDisplayedChild() == 0)
break;
vf.setInAnimation(this, R.anim.in_from_left);
vf.setOutAnimation(this, R.anim.out_to_right);
vf.showNext();
}
if (lastX > currentX) {
if (vf.getDisplayedChild() == 1)
break;
vf.setInAnimation(this, R.anim.in_from_right);
vf.setOutAnimation(this, R.anim.out_to_left);
vf.showPrevious();
}
break;
}
}
return false;
}

}

and Two another animation file;

to create that file first you need to create a new folder into /res named animation and into that you need to create xml files.

in_from_left.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<!--
<translate
android:duration="1400"
android:fromXDelta="-100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" /> -->
<!-- <scale android:duration="100"
android:fromXScale="100%"
android:fromYScale="0%"
android:repeatMode="reverse"/>
-->
<rotate android:fromDegrees="5"
android:toDegrees="50"
android:duration="5000"/>

</set>
in_from_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >

<translate
android:duration="1400"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />

</set>

Screen shot


Thanks 

4 comments:

  1. Thanks for this. i was able to implement a view flipper after using this. Kindly post the code in a zip file or github etc because some elements are missing. for example some anim files are missing and the constants like SWIPE_MAX_OFF_PATH etc are not defined int he code.

    Once again, much appreciated for the effort you put in. it has helped :)

    ReplyDelete
    Replies
    1. thanks for your replay you can find demo of effect on this application more then 100+ effect

      https://play.google.com/store/apps/details?id=com.photo.college.effect.pro

      Delete
  2. As kuriandengu said, please provide a downloaded project or some because the animation files, which in my opinion are complicated enough, are missing. The link you provided is empty.

    ReplyDelete
  3. Monetize your android app on http://adf.ly/ZJILW

    ReplyDelete