Android ViewSwitcher

May 08, 2015 By: Dr. Droid Android Basics, Android ViewAnimator, Android ViewSwitcher Comment: 1

ViewSwitcher is a sub-class of ViewAnimator, switches between two views, and has a factory from which these views are created. You can either use the factory to create the views, or add them yourself.

A ViewSwitcher can only have two child views, of which only one is shown at a time. If you have more than two child views in ViewSwitch, java.lang.IllegalStateException of “Can’t add more than 2 views to a ViewSwitcher” will happen.

Example

In this example i will demonstrate you how to work on ViewSwitcher.

VIDEO DEMO

Let’s get start by creating a project in Eclipse IDE.

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)

2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken ViewSwitcher and inside it i had taken two views one ImageView and other one is Button.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/prev"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Previous View" />

        <Button
            android:id="@+id/next"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Next View" />
    </LinearLayout>

    <!-- View Switcher for holding two views (Note : ViewSwitcher can hold only two views) -->
    <ViewSwitcher
        android:id="@+id/viewSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/image" />

        <Button
            android:id="@+id/click"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Click Here" />
    </ViewSwitcher>

</LinearLayout>

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<Button

android:id="@+id/prev"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="Previous View" />

<Button

android:id="@+id/next"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="Next View" />

</LinearLayout>

<ViewSwitcher

android:id="@+id/viewSwitcher1"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:src="@drawable/image" />

<Button

android:id="@+id/click"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:gravity="center"

android:text="Click Here" />

</ViewSwitcher>

</LinearLayout>

3. Now, add the following code to MainActivity.java , in this activity i am going to show how to show both views in single layout.

package com.view_switcher_demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
import android.widget.ViewSwitcher;

public class MainActivity extends Activity {
	Button pre, nex, click;
	ViewSwitcher view;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		pre = (Button) findViewById(R.id.prev);
		nex = (Button) findViewById(R.id.next);
		click = (Button) findViewById(R.id.click);
		view = (ViewSwitcher) findViewById(R.id.viewSwitcher1);

		pre.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {

				// Show Previous View
				view.showPrevious();

			}
		});
		nex.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {

				// Show Next View
				view.showNext();
			}
		});

		click.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {

				// Show Toast on second View Button Click
				Toast.makeText(MainActivity.this, "You clicked on Button",
						Toast.LENGTH_SHORT).show();
			}
		});
	}

}

package com.view_switcher_demo;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

import android.widget.ViewSwitcher;

public class MainActivity extends Activity {

Button pre, nex, click;

ViewSwitcher view;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

pre = (Button) findViewById(R.id.prev);

nex = (Button) findViewById(R.id.next);

click = (Button) findViewById(R.id.click);

view = (ViewSwitcher) findViewById(R.id.viewSwitcher1);

pre.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// Show Previous View

view.showPrevious();

}

});

nex.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// Show Next View

view.showNext();

}

});

click.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

// Show Toast on second View Button Click

Toast.makeText(MainActivity.this, "You clicked on Button",

Toast.LENGTH_SHORT).show();

}

});

}

4. Finally, run the app and you will get the output as shown in video.

Thanks.

1 Comment

Paolo

Monday, October 31st, 2016

Thank you for the tutorial, if i wont add the fragments non in main activity but in another, (help activity), where i must put the code ? all the tutorial the i have seen is in the main activity, i try to write the code in another activity but not work i have erro, can you help me ? thank you very much, Paolo