Image Switcher in Android Example

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 an 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.

Also Check: আউটসোসিং কি? Outsourcing থেকে কিভাবে ইনকাম করবেন?

Syntax:

<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:

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.

Read This: ফ্রিল্যান্সার দের যে ১০ টি কাজ করা যাবে না

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

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.

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.

Also Check:

Check Us on Social Media: Facebook, Twitter, Instagram, Pinterest, Linkedin

If you have any questions, please let us know.

Post Views: 51

Image Switcher in Android Example of Full Code:

Result of Image Switcher in Android Example

Leave a Reply Cancel reply