A Simple Android ViewSwitcher Example

ViewSwitcher does exactly what is what it sounds like. ViewSwitcher switches between two views. This can be  very useful. Using ViewSwitcher is very simple. The biggest part of using a ViewSwitcher is thinking of what will you do with it. You could, for example, have a EditText view and a TextView which shows the entered text from the EditText view. This is really up to you and your imagination.

In this example, I will show you how to build a simple app which uses the ViewSwitcher to switch between a RatingBar and a TextView. We will also have a button which switches between these two views. After you enter enter however many stars you want into the RatingBar, you will need to press the switch button and the TextView will appear with the results.

STEP 1: Creating The Project

Create a new project in Android Studio. Call it ViewSwitch. Use the blank activity and leave everything else at the default settings. Since we are creating a very simple app, there is no need for any fancy activities. This is just a demo of the ViewSwitcher from which you will, hopefully, learn how to use it and get some inspiration for how will you use it in your own app.

STEP 2: Editing The XML 

Go to activity_main.xml. Delete the TextView with the Hello world text, we won’t be needing that. Change the layout form RelativeLayout to LinearLayout. Set the orientation to be vertical. When you’re done, your activity_main.xml file should look something like this:

Now we will be adding the switch button.  Just add a simple button with the text “Switch” on it. Next we will add the ViewSwitcher.

ViewSwitcher can take in only two views, but you can put multiple views into one. For example you can have a RatingBar and a Button in a LinearLayout view. The LinearLayout view counts one view, so when you switch, you will be switching between the LinearLayout with multiple view and whatever you’ve set as the other view in the ViewSwitcher.

In our case, we’ll be putting in the Rating bar and the TextView. The first one you put in will be the default one. For example if you put the TextView first, the TextView will show up in your app the first time you use it (by first time, I mean before performing the switching). We’ll put the rating bar first, because we want to rate first than see the result.

After you’ve put both of them in, your activity_main.xml file should look like this:

STEP 3: Editing The MainActivity.java File

First we’ll need to find the views. Next we’ll set a onClickListener on the switcher button. When the button is clicked, we want to check which view is currently being shown. If the current view is the RatingBar, then we need to show the next one (since the first view we’ve put into the ViewSwitcher is the RatingBar). It should look like this:

STEP 4: Setting The RatingBar Behavior

Now it’s time to set the RatingBar behavior. We’ll set it up so when you enter however many stars you want and press the switch button, the TextView shows up and displays the results. For example, if we’ve set the maximum value to be 5 and we’ve entered 4 stars then the TextView will display “4/5 stars“. So, first will set the maximum value. Set it to be 10. To do that simply call the setMax() method and put in the number 10. Next you’ll need to add the OnRatingBarChangeListener. Since you’ll be doing this in a inner class, it’s best to write a method in the MainActivity class that sets the value of ratingBarResult variable. If you’ve done this correctly, your MainActivity.java file should look like this:

STEP 5: Adding The ViewSwitcher Functionality 

Now it’s time to add the ViewSwitcher functionality to our app. We’re gonna set this up so that the switching happens when you click the Switch button. We already have a onClickListener set on the switch button. So half of the work is already done. Now all we need to do is to add text to the TextView. We’ll do this before the switching happens. So that’s right before the showNext() method. It’s best to do it like this:

FINAL THOUGHTS

The ViewSwitcher is a very useful Android feature. This mostly won’t be the main feature of your app, but it’s nice to see. It makes the user of the app think that this is a quality app. You shouldn’t overuse this. Make it tasteful.

GitHub project link: https://github.com/makkam012/ViewSwitch