Wednesday, September 15, 2010

Using View Flipper in Android

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.

consider this layout:
<?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>


just a ViewFlipper container that contains three text views

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);

}

No comments:

Post a Comment