ImageSwitcher in Android

ImageSwitcher

The previous post http://emergingandroidtech.blogspot.in/2015/03/gallery-in-android.html
demonstrated how to use the Gallery view together with an ImageView to display a series of thumbnail images so that when one is selected, the selected image is displayed in the ImageView.
However, sometimes you don’t want an image to appear abruptly when the user selects it in the Gallery view — you might, for example, want to apply some animation to the image when it transits from one image to another. In this case, you need to use the ImageSwitcher together with the Gallery view.

The following Try It Out shows you how.

Using the imageSwitcher View

1 . Using Eclipse, create a new Android project and name it as ImageSwitcher. 

2 . Modify the main.xml file by adding the following statements in bold: 

<?xml​ version=”1.0”​encoding=”utf-8”?>
<RelativeLayout​
xmlns:android=”http://schemas.android.com/apk/res/android” ​
​​​android:orientation=”vertical”
​​​​android:layout_width=”fill_parent”
​​​​android:layout_height=”fill_parent” ​
​​​android:background=”#ff000000”​>

<Gallery
​​​​android:id=”@+id/gallery1” ​
​​​android:layout_width=”fill_parent”
​​​​android:layout_height=”wrap_content” />

<ImageSwitcher ​​​​
android:id=”@+id/switcher1” ​​​​
android:layout_width=”fill_parent” ​​​​
android:layout_height=”fill_parent” ​​
​​android:layout_alignParentLeft=”true” ​​​
​android:layout_alignParentRight=”true” ​​​
​android:layout_alignParentBottom=”true” />

</RelativeLayout>

3 . Right-click on the res/values folder and select New ➪ File. Name the file attrs.xml. 

4 . Populate the attrs.xml file as follows: 

<?xml version=”1.0” encoding=”utf-8”?>
<resources> ​
​​​<declare-styleable
name=”Gallery1”> ​​​
​​​​​<attr name=”android:galleryItemBackground” /> ​​​
​</declare-styleable>
</resources>

5 . Drag and drop a series of images into the res/drawable-mdpi folder When a dialog is displayed, check the copy option and click OK.

6 . Add the following bold statements to the MainActivity.java file: 

package com.emergingandroidtech.ImageSwitcher;

import android.app.Activity;
import android.os.Bundle;

import android.content.Context;
import android.content.res.TypedArray;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.BaseAdapter;

import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Gallery;
import android.widget.ViewSwitcher.ViewFactory;
import android.widget.ImageSwitcher;
import android.widget.ImageView;

public class MainActivity extends Activity implements ViewFactory {   
    //---the images to display---
    Integer[] imageIDs = {
            R.drawable.pic1,
            R.drawable.pic2,
            R.drawable.pic3,
            R.drawable.pic4,
            R.drawable.pic5,
            R.drawable.pic6,
            R.drawable.pic7                   
    };
   
    private ImageSwitcher imageSwitcher;
   
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);
        imageSwitcher.setFactory(this);
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.slide_in_left));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.slide_out_right));
       
        Gallery gallery = (Gallery) findViewById(R.id.gallery1);
        gallery.setAdapter(new ImageAdapter(this));
        gallery.setOnItemClickListener(new OnItemClickListener()
        {
            public void onItemClick(AdapterView<?> parent,
            View v, int position, long id)
            {               
                imageSwitcher.setImageResource(imageIDs[position]);
            }
        }); 
    }
   
    public View makeView()
    {
        ImageView imageView = new ImageView(this);
        imageView.setBackgroundColor(0xFF000000);
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setLayoutParams(new
                ImageSwitcher.LayoutParams(
                        LayoutParams.FILL_PARENT,
                        LayoutParams.FILL_PARENT));
        return imageView;
    }

    public class ImageAdapter extends BaseAdapter
    {
        private Context context;
        private int itemBackground;

        public ImageAdapter(Context c)
        {
            context = c;

            //---setting the style---               
            TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
            itemBackground = a.getResourceId(
                    R.styleable.Gallery1_android_galleryItemBackground, 0);
            a.recycle();                                                   
        }

        //---returns the number of images---
        public int getCount()
        {
            return imageIDs.length;
        }

        //---returns the ID of an item---
        public Object getItem(int position)
        {
            return position;
        }

        public long getItemId(int position)
        {
            return position;
        }

        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent)
        {
            ImageView imageView = new ImageView(context);
           
            imageView.setImageResource(imageIDs[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
            imageView.setBackgroundResource(itemBackground);
           
            return imageView;
        }
    }   
}

 7 . Run the application it shows the Gallery and ImageSwitcher views, with both the collection of images as well as the image selected.