ImageSwitchers in Android Tutorial | AndroidMonks

ImageSwitchers in Android Tutorial – Android Studio

ImageSwitchers is a specialized ViewSwitcher that contain ImageView type children. It is available from Android 1.6+.

This is mainly used to add animations to the image when switching between the images. Think about a Carousel like slider which you want to implement in your application. You depend on the ImageSwitcher for this purpose. It is important to note that, we cannot overload any application with lots of images, so ImageSwitcher is best used with Images that are retrieved from a database and shown in the UI effectively.

In this tutorial. we will see quick implementation of ImageSwitchers in Android.

ImageSwitchers Basics

<ImageSwitcher
    android:id="@+id/imageswitcher"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

The default parameters of ImageSwitcher includes the layout_width and layout_height as it is for any View.

ImageSwitchers Implementation Steps

It is imperative to note that, we will be creating a ImageSwitcher, and feeding the Images to it, using a Factory.

We will also create a in-animation and out-animation that help us to decide our Animation while switching through the Images.

Jumping straight on to creating the Activity and Layout for our Tutorial here, we will aim at 2 most important things, firstly it will be to create our ImageSwitcher in the Layout like below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android Monks"
        android:textSize="35dp" />

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left"
        android:id="@+id/button"
        />

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

This will create a simple Layout like below.

ImageSwitcher
ImageSwitcher

ImageSwitcher Activity

We have 2 simple Buttons. which will help us move Right/Left switching our Images.

Following the steps as we saw above, we will be creating the Factory that will supply us with the ImageView Stub continuously. Factory patterns are widely used in Java Programming, you can check more about Factory patterns here.

Once we are done creating the Factory pattern, the next thing is to set our In-Animation and Out-Animation(Not mandatory, but can add extra dynamics to the ImageSwitcher).

Once we are done setting the ImageSwitcher’s Animation properties, we can go ahead and add images to the ImageSwitcher using the setImageResources() method.

Let us see how the ImageSwitcherClass Activity looks.

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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.Toast;
import android.widget.ViewSwitcher;

public class ImageSwitcherClass extends AppCompatActivity {
    private ImageSwitcher sw;
    private Button b1,b2;

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

        b1 = (Button) findViewById(R.id.button);
        b2 = (Button) findViewById(R.id.button2);

        sw = (ImageSwitcher) findViewById(R.id.imageSwitcher);
        sw.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView myView = new ImageView(getApplicationContext());
                myView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                myView.setLayoutParams(new
                        ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT));
                return myView;
            }
        });
        // 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
        sw.setInAnimation(in);
        sw.setOutAnimation(out);


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

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

This creates a ImageSwitcher like below.

ImageSwitcher
ImageSwitcher
ImageSwitcher
ImageSwitcher

Drop in any comments below.

“Learn and Be Curious”.

Leave a Comment

Your email address will not be published. Required fields are marked *