Android App Development: View Filpper and Sliding drawer

In this post we’re going to see two interesting controls in Android: ViewFlipper and SlidingDrawer.

View Flipper:

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

    }

Sliding Drawer:

Remeber Android’s old versions’ (prior to 2.2) launcher screen where we had a sliding pane at the bottom that when dragged upwards displays the applications menu of the phone, that is called the SlidingDrawer control.

Consider this layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <SlidingDrawer
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@+id/drawer"
  android:handle="@+id/handle"
  android:content="@+id/content"
  >
  <ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/handle"
  android:src="@drawable/tray_handle_normal"
  />
  <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:id="@+id/content"
  >
  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="This is some text"
  android:id="@+id/txt"
  />
  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Click Me"
  android:id="@+id/btn"
  android:onClick="ClickHandler"
  />
  </LinearLayout>

  </SlidingDrawer>
</FrameLayout>

When the SlidingDrawer is pressed it looks like this:

The SlidingDrawer is a container that when dragged or pressed shows/hides its contents.

As the SlidingDrawer displays one content at a time, it must be declared within FrameLayout
the SlidingDrawer has two key properties:
android:handle: specifies the id of the control that acts as the handle.
android:content: specifies the id of the view that acts as content of the SlidingDrawer, most times will be a container.

you can open/close the drawer from the code like this:

if(drawer.isOpened())
    {
     drawer.close();
     btnToggle.setText("Open");
    }
    else
    {
     drawer.open();
     btnToggle.setText("Close");
    }

You can open/close the drawer with animation using these methods instead

drawer.animateClose();
drawer.animateOpen();

or you can handle the open/close operations automatically using toggle method:

drawer.toggle();
drawer.animateToggle();

you can lock/unlock the SlidingDrawer to enable/disable dragging or clicking of the drawer using these methods:

drawer.lock();
drawer.unlock();

Responding to SlidingDrawer Events:

SlidingDrawer has three key callbacks:

1. When the drawer is open, handled by implementing OnDrawerOpenListener.
2. When the drawer is close, handled by implementing OnDrawerCloseListener.
3. When the drawer is close, handled by implementing OnDrawerScrollListener.

drawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {

    @Override
    public void onDrawerOpened() {
     // TODO Auto-generated method stub
     TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
     txtStatus.setText("Opened");
     ImageView view=(ImageView)drawer.getHandle();
     view.setImageResource(R.drawable.tray_handle_selected);

    }
   });

         drawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {

    @Override
    public void onDrawerClosed() {
     // TODO Auto-generated method stub
     TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
     txtStatus.setText("Closed");
     ImageView view=(ImageView)drawer.getHandle();
     view.setImageResource(R.drawable.tray_handle_normal);
    }
   });

         drawer.setOnDrawerScrollListener(new OnDrawerScrollListener() {

    @Override
    public void onScrollStarted() {
     // TODO Auto-generated method stub
     TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
     txtStatus.setText("Scroll start");

    }

    @Override
    public void onScrollEnded() {
     // TODO Auto-generated method stub
     TextView txtStatus=(TextView)findViewById(R.id.txtStatus);
     txtStatus.setText("Scroll end");
    }
   });

You can make the drawer appear horizontally from right to left by setting the android:orientation property to horizontal in the xml file.

That was the View Flipper and Sliding drawer controls, stay tuned for another tutorial next week