The layout .
I’m using the ViewFlipper to demonstrate this simple fling application.
So, what is Fling… It’s also known as the swiping action on your mobile device screen.
In this demo, I prepared an Activity with ViewFlipper layout that has 3 screens. Green, Blue and Yellow.
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><TableLayout android:id="@+id/LinearLayout01"android:layout_width="fill_parent"android:layout_height="wrap_content"><TableRow><TextView android:id="@+id/btnback"android:text="Fling left - Back "android:layout_width="fill_parent"android:layout_height="wrap_content"/><TextView android:id="@+id/btnforward"android:text=" Fling right - Forward"android:layout_width="fill_parent"android:layout_height="wrap_content"/></TableRow></TableLayout><ViewFlipperandroid:id="@+id/pages"android:layout_width="fill_parent"android:layout_height="fill_parent" ><TextViewandroid:text="1.red"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#AAff0000" /><TextViewandroid:text="2.green"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#AA00ff00" /><TextViewandroid:text="3.blue"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#AA0000ff" /></ViewFlipper></LinearLayout>
The Code…
package com.kerul.FlipperFling;
import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.GestureDetector.OnGestureListener;
import android.widget.Toast;
import android.widget.ViewFlipper;
public class FlipperFling extends Activity implements OnGestureListener {protected GestureDetector gestureScanner;
protected ViewFlipper vf;
private static final int SWIPE_MIN_DISTANCE = 120;private static final int SWIPE_MAX_OFF_PATH = 250;private static final int SWIPE_THRESHOLD_VELOCITY = 200;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);
gestureScanner = new GestureDetector(this);setContentView(R.layout.main);vf = (ViewFlipper) findViewById(R.id.pages);}@Overridepublic boolean onTouchEvent(MotionEvent me){return gestureScanner.onTouchEvent(me);
}public boolean onDown(MotionEvent e){return true;}public boolean onFling(MotionEvent e1,MotionEvent e2,float velocityX,float velocityY){try {
if(e1.getX() > e2.getX() && Math.abs(e1.getX() - e2.getX()) > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
Toast.makeText(this.getApplicationContext(), "Left", Toast.LENGTH_SHORT).show();vf.showPrevious();}else if (e1.getX() < e2.getX() && e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {Toast.makeText(this.getApplicationContext(), "Right", Toast.LENGTH_SHORT).show();vf.showNext();}} catch (Exception e) {
// nothing
}return true;}public void onLongPress(MotionEvent e){}public boolean onScroll(MotionEvent e1,MotionEvent e2,float distanceX,float distanceY){return true;}public void onShowPress(MotionEvent e){}public boolean onSingleTapUp(MotionEvent e){ return true;}}
Focus on onFling method, the fling gesture is detected in the method. (I’ll explain later…).
The onFling method (which is the method detecting the Fling motion will catch a horizontal swipe, either from left to right, or from right to left). Assuming that MotionEvent.e1 is the starting point of the motion, and MotionEvent.e2 is the end. FYI the screen coordinate (0,0) starts from the top-left corner. So left to right motion detected when the e1.getX is greater than e2.getX, and vice-versa.
Really good its helps me a lot
ReplyDeletewhy its not smooth in emulator.
ReplyDeleteSeriously there are so many limitation of the emulator. You cannot play video smoothly, cannot capture picture, no GPS tracking, etc... My advice is get a REAL ANDROID DEVICE. You can get it very cheap nowadays...
DeleteThanks it helped me.
ReplyDeleteJorge Lage from Miami
ReplyDeleteYour code runs fine. It's very useful.
What I want now is to show not only a textview but also an imageview on each page.
Could you be kind enough to help me adding an image view on each page?
Thank you so much
Hi Miriam Pascual, pls refer to this link for an Android sample with Fling gesture and images of the layout.
Deletehttp://blog.kerul.net/2011/07/viewflipper-examplea-simple-flashcard.html
I am from Miami.
ReplyDeleteYour code runs fine, but now I'm trying to add add to each page an imageview and other textview.
Could you be kind enough to help me on this?
Thank you
falto poner los id a los textview para que funcione correctamente, por lo menos en mi casa, fuera de eso, excelente tutorial, muy bueno
ReplyDeletethank u !! it really works and helps :)
ReplyDeleteHey thanks very much for this..
ReplyDeleteDoes this only switch between view elements?
I would like to be able to make a project that flings between activities... one on either side of the main, and one above and below the main... could I use this code to do that?
Thanks a lot from New Zealand.
ReplyDeleteI am trying to make a app very similar to this, but I would like it to fling between activities.. is this code ok for that?
I would need one of either side of the main, and one above and below the main...
thanks again, very helpfull