Home » Android

Switching between two images in Android

In this article, we are going to switch between two images using ImageSwitcher in Android.
Submitted by Manu Jemini, on February 16, 2018

In the example below, we are going to use the ImageSwitcher class to switch between multiple images on a single screen. We take advantage of the object of ImageSwitcher class by creating a factory with whose help we create all this functionality on the top of a single screen.

To implement this in your program you will need to import: android.widget.ImageSwitcher, android.widget.ViewSwitcher in your java file.

Then create a layout file with a single ImageSwitcher like this:

<ImageSwitcher
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/imageSwitcher"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="50dp" />

We will also going to need two buttons to switch between images,

<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Left side"
	android:id="@+id/button1"
	android:layout_alignParentBottom="true"
	android:layout_alignParentStart="true"
	android:onClick="left"/>

<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Right side"
	android:id="@+id/button2"
	android:layout_alignParentBottom="true"
	android:layout_alignParentEnd="true"
	android:onClick="right"/>

The Button in the layout file is assigned to a method in the JAVA file, the function is click(). We assign on click function directly like this : android:onClick=" right ".

Later on, we create a factory which deals with the complications of the operation.

1) Java file:

package com.example.hp.myapplication;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;


public class MainActivity extends AppCompatActivity
{
	ImageSwitcher IS;
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		IS = (ImageSwitcher) findViewById(R.id.imageSwitcher);
		IS.setFactory(new ViewSwitcher.ViewFactory() {
			@Override
			public View makeView()
			{
				ImageView IV = new ImageView(getApplicationContext());
				IV.setScaleType(ImageView.ScaleType.FIT_CENTER);
				IV.setLayoutParams(new ImageSwitcher.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.WRAP_CONTENT));
				return IV;
			}
		});
	}
	public void left(View v) {
		IS.setImageResource(R.drawable.includehelp);
	}
	public void right(View v) {
		IS.setImageResource(R.drawable.ihelp);
	}
}

XML file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hp.myapplication.MainActivity">

    <ImageSwitcher
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageSwitcher"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left side"
        android:id="@+id/button1"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:onClick="left"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right side"
        android:id="@+id/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:onClick="right"/>

</RelativeLayout>

4) Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.hp.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output