Jan 6, 2022

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
           
}
        })
;

   
}
}

 

Whatsapp Button works on Mobile Device only