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

Read More..

Android Layout properties

Here is a list of some of the layout properties used in different layout managers in android

Property	Possible Values	Notes
android:layout_width	"wrap_content”:adjusts the size of the control to fit according to its contents.  “fill_parent”: adjusts the size of the content to fit all the available space of the parent. numeric value of pixels(px), points(pt), inches(in), millimeters(mm), Density(dp) density-independent pixels based on 160 dpi (dot per inch), Scale (sp) Scale-independent pixels (dimensions that allow for user sizing; helpful for use in fonts).
android:layout_height	Same as android:layout_width
android:orientation	Vertical or horizontal	Used as a property for the container in LinearLayout
android:layout_weight	Numeric value: determines the ratio by which widgets share empty soace in the container. The lower value occupies more space
android:layout_gravity	top:widget positioned at the top of the container. Center: positioned at the center of the container both vertically and horizontally. center_horizontal: positioned at the horizontal center of the container. Center_vertical: positioned at the vertical center of the container. Bottom: positioned at the bottom of the container. fill_horizontal: grows the vertical size of the widget if needed, so it completely fills the container. fill_vertical: grows the horizontal size of the widget if needed, so it completely fills the container. fill: grows the size if needed of the widget both horizontally and vertically so it fills the container. Clip_vertical: Additional option that can be set to have the top and/or bottom edges of the child clipped to its containers bounds. The clip will be based on the vertical gravity: a top gravity will clip the bottom edge, a bottom gravity will clip the top edge, and neither will clip both edges. Clip_horizontal: Additional option that can be set to have the left and/or right edges of the child clipped to its containers bounds. The clip will be based on the horizontal gravity: a left gravity will clip the right edge, a right gravity will clip the left edge, and neither will clip both edges.
android:gravity	Same as android:layout_gravity	Used for the content of a widget
android:padding	Apply padding value to the four edges of the widget. numeric value of pixels(px), points(pt), inches(in), millimeters(mm), Density(dp) density-independent pixels based on 160 dpi (dot per inch), Scale (sp) Scale-independent pixels (dimensions that allow for user sizing; helpful for use in fonts).
android:paddingTop	Applies padding value to the top of the widget. Values same as android:padding
android:paddingBottom	Applies padding value to the bottom of the widget. Values same as android:padding
android:paddingRight	Apply padding value to the right of the widget. Values same as android:padding
android:paddingLeft	Apply padding value to the left of the widget.  Values same as android:padding
android:layout_alignParentTop	True|false: used in relative layout, aligns the widget’s top edge with the top of the container
android:layout_alignParentBottom	True|false: used in relative layout, aligns the widget’s top edge with the bottom of the container
android:layout_alignParentLeft	True|false: used in relative layout, aligns the widget’s left edge with the left of the container
android:layout_alignParentRight	True|false: used in relative layout, aligns the widget’s right edge with the right of the container

Read More..