Android Image Switcher Example : Android Studio Tutorials

in this post we are goin to learn about an android project in this project we can learn "how to create android image switcher" for android app projects 

Step 1 - Create A Empty Projects

Step 2 -  Add Images in drawable folder Which You Want To Include In Your App For Switch One Image To Another Image (Two or More Image)

Step 3 Add This Xml Code In Your Xml Activity Or Fragment

<ImageSwitcher
    android:id="@+id/simpleImageSwitcher"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="50dp" />


<Button
    android:id="@+id/buttonNext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="150dp"
    android:layout_gravity="center"
    android:background="#050"
    android:textColor="#fff"
    android:textStyle="bold"
    android:text="NEXT" />

 

Step 4 -  Add Java Code In Your Java Code Activity

private ImageSwitcher simpleImageSwitcher;

Button btnNext;



// Array of Image IDs to Show In ImageSwitcher

int imageIds[] = {R.drawable.image1, R.drawable.images2, R.drawable.image3, R.drawable.images4, R.drawable.images5};

int count = imageIds.length;

// to keep current Index of ImageID array

int currentIndex = -1;

 

// get The references of Button and ImageSwitcher

btnNext = (Button) findViewById(R.id.buttonNext);

simpleImageSwitcher = (ImageSwitcher) findViewById(R.id.simpleImageSwitcher);

// Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked

simpleImageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {



    public View makeView() {

        // TODO Auto-generated method stub



        // Create a new ImageView and set it's properties

        ImageView imageView = new ImageView(getApplicationContext());

        // set Scale type of ImageView to Fit Center

        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

        // set the Height And Width of ImageView To FIll PARENT

        imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));

        return imageView;

    }

});



// Declare in and out animations and load them using AnimationUtils class

Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);

Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);



// set the animation type to ImageSwitcher

simpleImageSwitcher.setInAnimation(in);

simpleImageSwitcher.setOutAnimation(out);





// ClickListener for NEXT button

// When clicked on Button ImageSwitcher will switch between Images

// The current Image will go OUT and next Image  will come in with specified animation

btnNext.setOnClickListener(new View.OnClickListener() {



    public void onClick(View v) {

        // TODO Auto-generated method stub

        currentIndex++;

        //  Check If index reaches maximum then reset it

        if (currentIndex == count)

            currentIndex = 0;

        simpleImageSwitcher.setImageResource(imageIds[currentIndex]); // set the image in ImageSwitcher

    }

});

 

Now Your Android Image Switcher Project Is  Ready

Now Install , I Hope Your App Is Done , If You Have Any Query Then You Can Comment In The Comments Box

 

Xml Code Like This 

<?xml version="1.0" encoding="utf-8"?>

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

    xmlns:app="http://schemas.android.com/apk/res-auto"

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    android:orientation="vertical">





    <ImageSwitcher

        android:id="@+id/simpleImageSwitcher"

        android:layout_width="match_parent"

        android:layout_height="200dp"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="50dp" />





    <Button

        android:id="@+id/buttonNext"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="150dp"

        android:layout_gravity="center"

        android:background="#050"

        android:textColor="#fff"

        android:textStyle="bold"

        android:text="NEXT" />



</LinearLayout>

 

Java Code Like This 

package com.example.imageswitcherandroid;



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.LinearLayout;

import android.widget.ViewSwitcher;



public class MainActivity extends AppCompatActivity {

    private ImageSwitcher simpleImageSwitcher;

    Button btnNext;



    // Array of Image IDs to Show In ImageSwitcher

    int imageIds[] = {R.drawable.image1, R.drawable.images2, R.drawable.image3, R.drawable.images4, R.drawable.images5};

    int count = imageIds.length;

    // to keep current Index of ImageID array

    int currentIndex = -1;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        // get The references of Button and ImageSwitcher

        btnNext = (Button) findViewById(R.id.buttonNext);

        simpleImageSwitcher = (ImageSwitcher) findViewById(R.id.simpleImageSwitcher);

        // Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked

        simpleImageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {



            public View makeView() {

                // TODO Auto-generated method stub



                // Create a new ImageView and set it's properties

                ImageView imageView = new ImageView(getApplicationContext());

                // set Scale type of ImageView to Fit Center

                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

                // set the Height And Width of ImageView To FIll PARENT

                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));

                return imageView;

            }

        });



        // Declare in and out animations and load them using AnimationUtils class

        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);

        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);



        // set the animation type to ImageSwitcher

        simpleImageSwitcher.setInAnimation(in);

        simpleImageSwitcher.setOutAnimation(out);





        // ClickListener for NEXT button

        // When clicked on Button ImageSwitcher will switch between Images

        // The current Image will go OUT and next Image  will come in with specified animation

        btnNext.setOnClickListener(new View.OnClickListener() {



            public void onClick(View v) {

                // TODO Auto-generated method stub

                currentIndex++;

                //  Check If index reaches maximum then reset it

                if (currentIndex == count)

                    currentIndex = 0;

                simpleImageSwitcher.setImageResource(imageIds[currentIndex]); // set the image in ImageSwitcher

            }

        });



    }

}

 

Tags