Android Projects

Android Development Books

Monday

ViewFlipper example in android


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.

ViewFlipper is Actually a View container which can hold different Views, but it shows just one of those Views at a time and hide others, you can switch between views manually or automatically, most interesting thing about ViewFlipper is that it uses two different Animations for flipping between views, one is used for outgoing View and the other one for incoming View.


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. Otherwise, let’s begin with a new project in Eclipse.

The ViewFlipper works on the basis that the views you switch between are ALL inside the ViewFlipper. You have it so that the view you want to flip to is inside the ViewFlipper but the flipper itself is a child of the view you want to flip from (the outside relative layout) and so the about details view is therefore the first (and only) view in the flipper and appears as part of your layout.

Rearrange it so that it's like

<ViewFlipper...>
<RelativeLayout...>
...
</RelativeLayout>
<TextView.../>
</ViewFlipper>


Public Methods boolean isAutoStart()


Returns true if this view automatically calls startFlipping() when it becomes attached to a window.
boolean         isFlipping()
               Returns true if the child views are flipping.


void             setAutoStart(boolean autoStart)
            Set if this view automatically calls startFlipping() when it becomes attached to a window.


void             setFlipInterval(int milliseconds)
           How long to wait before flipping to the next view


void              startFlipping()
          Start a timer to cycle through child views


void            stopFlipping()
        No more flips 

Most suitable example of ViewFlipper :-
Suppose you want to display a news bar in your activity. this news bar displays a single news item at a time then flips and shows next item and so on, then your choice would be Android's ViewFlipper

ViewFlipper inherits from frame layout, so it displays a single view at a time.

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="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
    <Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Flip"
    android:id="@+id/btn"
    android:onClick="ClickHandler"
    />
    <ViewFlipper
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:id="@+id/flip"
    >
    <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Item1"
    />
    <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Item2"
    />
    <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Item3"
    />
    </ViewFlipper>
</LinearLayout>
Now we want to flip the views when the button is clicked

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        btn=(Button)findViewById(R.id.btn);
        flip=(ViewFlipper)findViewById(R.id.flip);
            
    }
    
    public void ClickHandler(View v)
    {
     
     flip.showNext();
     
    }

if we want to flip in reverese direction we could use
flip.showPrevious() instead.

we can add animations to the child views when they appear or disappear:

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        btn=(Button)findViewById(R.id.btn);
        flip=(ViewFlipper)findViewById(R.id.flip);
        //when a view is displayed
        flip.setInAnimation(this,android.R.anim.fade_in);
       //when a view disappears
     flip.setOutAnimation(this, android.R.anim.fade_out);     
    }

we can also set the ViewFlipper to flip views automatically when the button is clicked:

public void ClickHandler(View v)
    {
     
     
     //specify flipping interval
     flip.setFlipInterval(1000);
     flip.startFlipping();
    }
we can stop the flipping by calling flip.stopFlipping(); method.
or we can set the flipper to flip autommatically when the activity starts.
public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        btn=(Button)findViewById(R.id.btn);
        flip=(ViewFlipper)findViewById(R.id.flip);
        flip.setInAnimation(this,android.R.anim.fade_in);
     flip.setOutAnimation(this, android.R.anim.fade_out);
     flip.setFlipInterval(1000);
     flip.setAutoStart(true);
     
    }
Other Useful Resources Links are

Video:


http://developer.android.com/reference/android/widget/ViewFlipper.html

http://blogingtutorials.blogspot.com/2010/09/flipping-your-views.html

http://www.androidadb.com/source/pdn-slatedroid-read-only/eclair/frameworks/base/core/java/android/widget/ViewFlipper.java.html

http://www.warriorpoint.com/blog/2009/05/26/android-switching-screens-in-an-activity-with-animations-using-viewflipper/
http://www.codeproject.com/KB/android/ViewFlipper_Animation.aspx
http://stackoverflow.com/questions/1919169/android-viewflipper-animation
http://mobileorchard.com/android-app-development-view-filpper-and-sliding-drawer/





Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

Thanks for your comment

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

Related Posts Plugin for WordPress, Blogger...
© Google Android Lovers
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0