Image Switcher in Android Example Programmatically in 2023 [Java]

You don’t always want an image to appear abruptly on the screen. Sometimes you want to apply some sort of animation like an image switcher in Android example when it transitions from one image to another.

Android does have a built-in ImageSwitcher class that allows for the switching of images.

An image switcher lets you add transitions to your images when you view them on your screen.

To use Image Switcher you need to define the component’s XML first.

Syntax Image Switcher in Android Example:

<ImageSwitcher
            android:layout_width="350dp"
            android:layout_height="300dp"
            android:id="@+id/imgswitcher"
            android:layout_gravity="center"
             />

Now we will create the instance in Java file for Image Switcher in Android Example:

ImageSwitcher imageSwitcher;
imageSwitcher = (ImageSwitcher) findViewById(R.id.imgswitcher);

Now we will implement the viewfactory interface in onCreate:

 imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView view = new ImageView(getApplicationContext());
                view.setScaleType(ImageView.ScaleType.FIT_CENTER);
                view.setLayoutParams(new
                        ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
                        LayoutParams.WRAP_CONTENT));
                return view;
            }
        });

The last thing you need to do is add Animation to the ImageSwitcher.

Animation classes need to be defined in this way using a static method called loadAnimation.

It’s given below:

Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
        Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right);
        imageSwitcher.setInAnimation(in);
        imageSwitcher.setOutAnimation(out);

setInAnimation sets the animation of the appearance of the object on the screen whereas setOutAnimation does the opposite.

The method loadAnimation() is used to create an animation object.

Image Switcher in Android Example of Full Code:

Following is the content of the modified main activity file src/MainActivity.java for Image Switcher in Android Example.

package com.example.imageswitcher;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewSwitcher;
import android.app.ActionBar.LayoutParams;

public class MainActivity extends AppCompatActivity {

    ImageSwitcher imageSwitcher;
    Button buttonleft, buttonright;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonleft = (Button) findViewById(R.id.button);
        buttonright = (Button) findViewById(R.id.button2);

        imageSwitcher = (ImageSwitcher) findViewById(R.id.imgswitcher);
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView view = new ImageView(getApplicationContext());
                view.setScaleType(ImageView.ScaleType.FIT_CENTER);
                view.setLayoutParams(new
                        ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
                        LayoutParams.WRAP_CONTENT));
                return view;
            }
        });

        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
        imageSwitcher.setInAnimation(in);
        imageSwitcher.setOutAnimation(out);

        buttonleft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "previous Image",
                        Toast.LENGTH_LONG).show();
                imageSwitcher.setImageResource(R.drawable.first);
            }
        });

        buttonright.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Next Image",
                        Toast.LENGTH_LONG).show();
                imageSwitcher.setImageResource(R.drawable.second);
            }
        });
    }
}

Following the modified content of the xml res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="35dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Voltage Lab"
        android:textColor="#009688"
        android:textSize="35dp"
        android:textStyle="bold" />

    <ImageSwitcher
        android:id="@+id/imgswitcher"
        android:layout_width="350dp"
        android:layout_height="300dp"
        android:layout_gravity="center" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView"
            android:layout_marginRight="50dp"
            android:text="Left" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/button"
            android:layout_alignLeft="@+id/button"
            android:layout_alignParentBottom="true"
            android:text="Right" />

    </LinearLayout>
</LinearLayout>

Result of Image Switcher in Android Example

Let’s try to run the application we just modified. And see the Image Switcher in Android Example.

You can set up your AVD using the default parameters.

To run the app from Android studio, open one of your project’s activity files and click the Run icon from the toolbar.

Install android studio and run the emulator it should run and you can see the emulator window like this one.

If you have any questions regarding Image Switcher in Android Example, please let us know in comment section. To learn more about image switcher in android, you can read this article: Android imageswitcher

Read More:

Align Text to the Right Android & Vertical Align TextView Without Programmatically

Related articles

Case Studies

eDental App

Case Study: eDental Dentist App

Our team recently embarked on an exciting project to develop the eDental Dentist App, a cutting-edge mobile application designed for both Android and iOS...

Voltage Lab SAAS App

Voltage Lab is an Electrical & Electronics Website and App that they wanted to launch a new SAAS app that would allow students to...
google play app store listing

Keyword Research for EEE & Cricket Live Score App

A Cricket Live Score App & Voltage Lab EEE Engineer App aimed to enhance their visibility on Google and the iOS app store, seeking...