Constant Contact Labs Developer Blog

  • Android: Don’t Overlook ViewSwitcher Posted Wednesday, December 16, 2009 Brendan White 9 Comments

    Switching between views in Android is a recurring requirement.  Loading screens and background processing is a prime example.  The process usually goes:  show a loading or splash screen, load data in the background, and when the data has been loaded switch to a view showing the loaded data.  The first instinct of developers, especially those new to Android, is to use a view's visibility attribute to achieve this. Set View1 to Visible, View2 to Invisible until processing is done then reverse.  Numerous code examples online use this clumsy procedure and after using Android for months now I have only just come across ViewSwitcher by chance.  ViewSwitcher provides the capacity to switch between two views using simple logic that produces more readable code.  In this short post I will highlight this often overlooked class with a brief description and example code demonstrating its use.



    Views and ViewSwitcher

    In Android a view is the basic building block for user interface components.  Views and ViewGroups ultimately make up what is displayed on an Android device.  ViewSwitcher is just a view animator that has the ability to switch between these basic components.  Using ViewSwitcher is simple.  Views are added by the method addView(View child, int index, ViewGroup.LayoutParams params) or by using the ViewSwitcher factory and are accesssed (usually) using the methods showNext() and showPrevious().  It is important to note that ViewSwitcher can only hold two child views at a time.


    More about ViewSwitcher: 
    http://developer.android.com/reference/android/widget/ViewSwitcher.html


    ViewSwitcher in Action

    Let's say we have two views represented in XML.


    A Button (XML1):

    <?xml version="1.0" encoding="utf-8"?>
    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/btn_loadmorecontacts"
        android:text="Load More Items"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:textAppearance="?android:attr/textAppearanceLarge" 
        android:minHeight="?android:attr/listPreferredItemHeight"
        android:textColor="#FFFFFF" 
        android:background="@android:drawable/list_selector_background" 
        android:clickable="true" 
        android:onClick="onClick" />
    



    An Indeterminate ProgressBar and TextView (XML2):

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" 
        android:minHeight="?android:attr/listPreferredItemHeight">
    
        <ProgressBar 
            android:id="@+id/progressbar"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_centerVertical="true" />
    
        <TextView 
            android:text="Loading…" 
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"
            android:layout_toRightOf="@+id/progressbar" 
            android:layout_centerVertical="true" 
            android:gravity="center"
            android:padding="10dip"
            android:textColor="#FFFFFF" />
    </RelativeLayout>
    



    The following code creates a ListView of items and a footer item with the text “Load More Items”.  When this is clicked the view will change showing a ProgressBar until the background job is complete and then return to it’s original view, all using ViewSwitcher.

    public class ViewSwitcherExample extends ListActivity
    				 implements OnClickListener {
        
    	//sample list items
    	static final String[] ITEMS = new String[]
              { "List Item 1", "List Item 2", 
                "List Item 3", "List Item 4", 
                "List Item 5", "List Item 6", 
                "List Item 7", "List Item 8", 
                "List Item 9", "List Item 10" };
    	
    	//the ViewSwitcher
    	private ViewSwitcher switcher;
    	
    	/** Called when the activity is first created. */
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    	  super.onCreate(savedInstanceState);
    	  
    	  //no window title
    	  requestWindowFeature(Window.FEATURE_NO_TITLE);
    	  
    	  //create the ViewSwitcher in the current context
    	  switcher = new ViewSwitcher(this);
    	  
    	  //footer Button: see XML1
    	  Button footer = (Button)View.inflate(this, R.layout.btn_loadmore, null);
    	  
    	  //progress View: see XML2
    	  View progress = View.inflate(this, R.layout.loading_footer, null);
    	  
    	  //add the views (first added will show first)
    	  switcher.addView(footer);
    	  switcher.addView(progress);
    	  
    	  //add the ViewSwitcher to the footer
    	  getListView().addFooterView(switcher);
    	  
    	  //add items to the ListView
    	  setListAdapter(new ArrayAdapter(this,
    	          android.R.layout.simple_list_item_1, ITEMS));
    	}
    
    	@Override /* Load More Button Was Clicked */
    	public void onClick(View arg0) {
    		//first view is showing, show the second progress view
    		switcher.showNext();
    		//and start background work
    		new getMoreItems().execute();
    	}
    	
    	/** Background Task To Get More Items**/
    	private class getMoreItems extends AsyncTask {
    		@Override
    		protected Object doInBackground(Void… params) {
    			//code to add more items
    			//...
    			try {
    				Thread.sleep(3000); //only to demonstrate
    			} catch (InterruptedException e) {
    				e.printStackTrace();
    			}
    			return null;
    		}
    
    		@Override /* Background Task is Done */
    		protected void onPostExecute(Object result) {
    			//go back to the first view
    			switcher.showPrevious();
                            //update the ListView
    		}
    	}
    }
    
     
    The opinions expressed here represent those of the author and not those of Constant Contact, Inc. Read Blog Terms

    Tags

    AndroidMobile
    Next Post Previous Post
     

Comments (9) +comment on this post
 

  • XdebugX | 2:39 AM January 1, 2010

    Thanks! this helped

  • TBasket | 12:40 AM June 30, 2010

    actually I tried this as well and it didn’t work out for me. but I’ll definitely give that another shot… well, lets see if there is a happy end for my project, too. I’ll keep you posted about the result.

  • lishali | 5:30 AM September 2, 2010

    It’s so helpful. Thanks a lot.

  • Naveen | 4:21 AM September 22, 2010

    this tutorial is good one for android developer.But there is need to load more list item on more button click to show….
    thanks
    Naveen kumar shrivastva

  • Purushottam | 4:58 AM October 1, 2010

    Is there any way for more than 2 view switching, View switcher takes max 2 views.

  • nishant | 7:26 AM October 22, 2010

    Can you post code for ViewSwitcher between ListView and GridView??

  • Jim Garretson | 7:53 AM October 22, 2010

    Hi nishant, Unfortunately our app didn’t make use of a GridView, so we don’t have working source for that case!

  • yoyo | 7:27 AM December 15, 2010

    where is “addFooterView()” defined? Thanks
    could you send me mail, thanks.

  • Astral Projection Forum | 1:20 AM July 5, 2012

    What if I want to change switch view when I swipe something ?
    I’m doing a design for music player, So I want to show the share and some other buttons when user swipes the song in a list.

Add your comment below

Remember me

Please enter the word you see in the image below:


*  Please be aware that all comments are moderated.

Interested in a particular topic?

If there are specific topics you’d like to see us discuss on our blog or other ideas you’d like to share, please let us know. Click here to contact us.