Android Viewflipper Example



Here is a small and easy example of how to use viewflipper in android. Android

 to add multiple views in a single Flipper.ViewFlipperName.showNext() is used to show the next item in flipper. ViewFlipperName.showPrevious() is used to show the previous item in flipper.



Android ViewFlipper Example:
Xml file looks like
[sourcecode language="xml"]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<LinearLayout android:id="@+id/LinearLayout03"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<Button android:id="@+id/Button01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Next"></Button>
<Button android:id="@+id/Button02" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Previous"></Button>
</LinearLayout>
<LinearLayout android:id="@+id/LinearLayout02"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<ViewFlipper android:id="@+id/ViewFlipper01"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<!--adding views to ViewFlipper-->
<TextView android:id="@+id/TextView01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Flipper Content 1"></TextView>
<TextView android:id="@+id/TextView02" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Flipper Content 2"></TextView>
<TextView android:id="@+id/TextView03" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Flipper Content 3"></TextView>
</ViewFlipper>
</LinearLayout>
</LinearLayout>
[/sourcecode]
Java file looks like
[sourcecode language="java"]
public class ViewFlipperExample extends Activity implements OnClickListener {
Button next;
Button previous;
ViewFlipper vf;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
vf = (ViewFlipper) findViewById(R.id.ViewFlipper01);
next = (Button) findViewById(R.id.Button01);
previous = (Button) findViewById(R.id.Button02);
next.setOnClickListener(this);
previous.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if (v == next) {
vf.showNext();
}
if (v == previous) {
vf.showPrevious();
}
}

}
[/sourcecode]
The output will looks like

3 comments :

MriwaUSBG said...

hi, thanx for this great tutorial! but i would ask if i have dynamic number of view that should been selected from db what should i do or how should i set the number in xml file??? (add views)

Bhushan shirsath said...

for the dynamic number
you can generate the view dynamicaly

for(int i=0,i<numberOfView;i++)

{
flipperView.add(view);

}

Sunharvesting said...

Hello matee great blog post