ViewSwitchers revisited

Posted by kevingrant on Aug 4, 2011 in Android Development, Beginner, Featured, General Coding Techniques | 1 comment

Welcome to the shiny new blog!  I have decided to embrace my developer spirit and break free of the bonds of WordPress.com, and begin to maintain and hold my own data, rarrr!  In light of this, I am slightly modifying the most popular post of all time, the ViewSwitcher.

For far too long, the ViewSwitcher has eluded many people. It can be conceptually hard to tackle, as you still are only using one Activity, but you can essentially have 2 different layouts.

Why would you want to do this? Previously, I had used to ViewSwitcher to switch from a loading screen to the loaded screen. Since then, I have used the ViewSwitcher a few more times, but under different circumstances. I’ve also even found more switchers that I never even realized existed.

With this new example, I will reintroduce the ViewSwitcher, as well as a TextSwitcher, and an ImageSwitcher! O boy….

This is a one activity program, the entire activity is below. All fairly standard variable declaration and initialization, grabbing the ID from the id we give it in the xml file later.

One thing I have learned, is that if you don’t need global access to your buttons, don’t declare them globally! As you see in this example, the switchers are global, but the button is a local variable! Once applications get bigger, making these local declarations makes a smaller footprint for your application.

public class ViewSwitcherActivity extends Activity {

	ViewSwitcher mViewSwitcher;
	TextSwitcher mTextSwitcher;
	ImageSwitcher mImageSwitcher;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		mViewSwitcher = (ViewSwitcher) findViewById(R.id.viewswitcher);
		mTextSwitcher = (TextSwitcher) findViewById(R.id.textswitcher);
		mImageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);

		Button button = (Button) findViewById(R.id.button);
		button.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mViewSwitcher.showNext();
				mTextSwitcher.showNext();
				mImageSwitcher.showNext();
			}
		});
	}
}

Here, you can see the layout of the main.xml file. Each switcher can have a MAXIMUM of 2 parent views. You can try to add a 3rd, and you will see your program crash. That doesn’t mean you can’t have more than two views, it just means there can only be 2 parents, eg: 1 linear layout and 1 relative layout, and they can be filled with as many views as you’d like.

<?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">
    
    <Button
    	android:id="@+id/button"
    	android:text="Switch the view!"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"/>
    
    <ViewSwitcher 
    	android:id="@+id/viewswitcher"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content">
    	
    	<TextView 
    		android:text="This is the 1st view!"
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content"/>	
    	
    	<TextView 
    		android:text="This is the 2nd view!"
    	    android:layout_width="wrap_content"
    		android:layout_height="wrap_content"/>		
    </ViewSwitcher>
    
    <TextSwitcher
    	android:id="@+id/textswitcher"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content">
    	
    	<TextView 
    		android:text="This is the 1st view!"
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content"/>	
    	
    	<TextView 
    		android:text="This is the 2nd view!"
    	    android:layout_width="wrap_content"
    		android:layout_height="wrap_content"/>	
    	</TextSwitcher>
    
    <ImageSwitcher
    	android:id="@+id/imageswitcher"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content">
    		
		<ImageView
    		android:src="@drawable/icon_green"
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content"/>
    		
		<ImageView
    		android:src="@drawable/icon_blue"
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content"/>
    		
	</ImageSwitcher>
    	
</LinearLayout>

Here are the 2 icon resources used in the demonstration

And that’s it! I hope you guys have enjoyed this little revisit of a classic post! Download the source below, post your comments!

-Kevin