ViewFlipper and SlidingDrawer example Android

In my last post i talked about android selector mechanism and how to customize default GUI components apperances. another issue with mobile phone applications is limited displaying space, i mean if your application wants to go a bit further than a basic , simple application, it is almost gonna be impossible to fit all GUI options and features in a relatively small displaying space of mobile phones.

as we've already talked about it, the first option to solve this sort of problems is Menus and dialogs which are pretty easy to use and simple, but what if you need something more than that with higher level of customizability, that's whenViewFlipper and SlidingDrawer come into play(although they could be used for other purposes as well), like menus and dialogs they enable us to have some views hidden and show them when they are requested or when it's appropriate.


first of all let's see what a ViewFlipper is, 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.

There are two views between which we wanna flip, a ListView (Which we talked about it last time) and a simple view with a text and a button on it, When we press "Next" button our ListView will slide out and the other view will slide in and when "Go Back" button is pressed two views will be switched again. 
our XML will be something like this : 

<ViewFlipper 
       android:id="@+id/flipper"

       android:layout_width="fill_parent" 
       android:layout_height="fill_parent">
  <FrameLayout 

       android:layout_width="fill_parent" 
       android:layout_height="wrap_content"
       android:layout_gravity="top" 
       android:layout_marginTop="50dip">

    <ListView 

        android:id="@+id/list" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:dividerHeight="0dip"
        android:divider="@null" 
        android:listSelector="@drawable/list_selector"
        android:layout_gravity="center" /> 
  </FrameLayout>
  <LinearLayout 

        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:orientation="vertical"
        android:background="@drawable/wood01" 
        android:padding="20dip"
        android:layout_gravity="top" 
        android:layout_marginTop="50dip">
     <TextView 

          android:layout_width="wrap_content" 
          android:layout_height="wrap_content"
          android:text="TEST" 
          android:layout_gravity="center" 
          android:padding="15dip"
          android:textSize="22dip" 
          android:textColor="@color/white" />
    <Button 

          android:text="Go Back" 
          android:id="@+id/back_btn"
          android:layout_width="fill_parent" 
          android:layout_height="wrap_content" />
  </LinearLayout>
 </ViewFlipper>

As you can see our ViewFlipper has two children, a FrameLayout containing the ListView and a LinearLayout containing a TextView and a Button. by default the first child is shown when application comes up for the first time.

Setting Animation for our flipper is pretty easy and straigh forward, here's the code I've used :

  this.flipper = (ViewFlipper)findViewById(R.id.flipper);

        
  Animation s_in  = AnimationUtils.loadAnimation(this, R.anim.slidein);
  Animation s_out = AnimationUtils.loadAnimation(this, R.anim.slideout);
  this.flipper.setInAnimation(s_in);
  this.flipper.setOutAnimation(s_out);

and here are the content of slidein.xml and slideout.xml respectively : 

<?xml version="1.0" encoding="utf-8"?>
<set 
    xmlns:android="http://schemas.android.com/apk/res/android" 

    android:interpolator="@android:anim/decelerate_interpolator">
    <translate 

        android:fromXDelta="-100%" 

        android:toXDelta="0%" 

        android:duration="1800" />    
</set>

<?xml version="1.0" encoding="utf-8"?>

<set 

  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:interpolator="@android:anim/decelerate_interpolator">     
    <translate 

        android:fromXDelta="0%" 

        android:toXDelta="100%" 

        android:duration="1800" />    
</set>

All you need to do to switch the showing view manually is to use showNext() and showPrevious() methods of ViewFlipper class.
Another predefined Widget for hiding stuff is SlidingDrawer and its name pretty much suggests what it does. what does a drawer do!? it has a handle which is used to drag the drawer container out...obviously ;)
First of all, I should say sorry for this wierd object I used for my drawer's handle ;) I couldn't find anything better!!
here is the XML which is being used to create what you saw above:

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"
    android:layout_height="230dip" 
    android:id="@+id/frameLayout" 
    android:layout_gravity="bottom">

   <SlidingDrawer 

        android:layout_height="wrap_content"
        android:handle="@+id/handle" 
        android:content="@+id/content"
        android:id="@+id/slide" 
        android:orientation="vertical"
        android:layout_width="fill_parent">
   <ImageView 

        android:layout_width="55dip"
        android:layout_height="55dip" 
        android:id="@id/handle" 
        android:src="@drawable/arrow" />
  <LinearLayout 

        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:id="@id/content"
        android:orientation="vertical" 
        android:background="@drawable/wood01"
        android:padding="10dip">

     <Button 

         android:text="Test1" 
         android:id="@+id/Button01"
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" />

     <Button 

         android:text="Test2" 
         android:id="@+id/Button02"
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" />
     <Button 

         android:text="Test3" 
         android:id="@+id/Button03"
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" />
   </LinearLayout>
  </SlidingDrawer>
</FrameLayout>

SlidingDrawer tag has two important attributes, android:handle and android:content; these attributes are actually references to other views which will be rendered as our drawer's handle and content. as you can see here we have two child views with the same id as specified for android:handle and android:content.

That's it. we are now familiar with two other useful Android widgets...

Custom selector android

GUI is always an important part of any application, because ordinary users dont know and don't care what's behind the scene; they want something easy to work with and nowadays attractive GUI is a must for most applications. although making an appealing and innovative interface needs something more than just programming skills and knowledge, every programmer should know how to customize different GUI components within whatever framework and environment they are working.

Today I'm gonna talk about one of the beautiful features of Android which gives you the ability to change the default behavior of GUI components. 
when designing GUIs, most of the times you want to change the appearance of buttons, input Fields, menus and.... Android Selectors have been provided to solve all these kind of problems, they enable us to decide what to show and how to show based on different states of each components...for example you can tell a button to have black background color with red text color when it is in pressed state or whatever else.

It is nothing but a simple ListView... believe me, and here is the XML which is being used to create it :

<ListView android:id="@+id/list" 

      android:layout_width="fill_parent"
      android:layout_height="wrap_content" 
      android:dividerHeight="0dip"
      android:divider="@null" 
      android:listSelector="@drawable/list_selector"
      android:layout_gravity="center" />

the code which I've used to populate the list :

  ListView view = (ListView)findViewById(R.id.list);

  view.setAdapter(new ArrayAdapter(this, R.layout.menu_item, ITEMS));
  view.setOnItemClickListener(this); 

and finally, here is the content of menu_item.xml file :

<?xml version="1.0" encoding="utf-8"?>

 <TextView xmlns:android="http://schemas.android.com/apk/res/android" 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:textSize="12dip"
           android:textStyle="bold"
           android:paddingTop="20dip"
           android:paddingBottom="20dip"
           android:layout_gravity="center" 
           android:gravity="center"
           android:background="@drawable/selector"
           android:textColor="@drawable/color_selector"/>: 

see? it's a simple, ordinary list, there is no secret here but a simple trick; I've used selectors for both background and text color for our TextView, what do you think "selector" and "color_selector" are?
they actually refer to selector.xml and color_selector.xml files inside drawable directory, you can see the content of them below : 

<selector xmlns:android="http://schemas.android.com/apk/res/android">:

    <item android:state_selected="true" android:drawable="@drawable/selector_s" />:
    <item android:state_pressed="true" android:drawable="@drawable/selector_s" />:
    <item android:drawable="@drawable/selector_d" />:  
</selector>:

<selector xmlns:android="http://schemas.android.com/apk/res/android">:

    <item android:state_selected="true" android:color="@color/black" />:
    <item android:state_pressed="true" android:color="@color/red" />:
    <item android:color="@color/white" />:  
</selector>:

what does the content of color_selector file mean? it says that the text color will be black in "selected" state, red in "pressed" state and white otherwise, and i reckon now you should be able to figure out what the content of selector file means. 
here is the content of selector_s and selector_d :

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"

    android:src="@drawable/pill"
    android:gravity="center" />

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"

    android:src="@drawable/pill_s"
    android:gravity="center" />

as you might have noticed,I've also used "listSelector" attribute of our ListView to customize the behavior of the list when user is going through options in the list. 
list_selector.xml file looks like this : 

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" android:drawable="@drawable/wood01" />
    <item android:drawable="@drawable/wood02" />  
</selector> 

and here are all the drawable objects i used in this application if you wanna give it a try and see how easy it works ;)