Image Switcher View | Android Developer Tutorial

Now we will explore ImageSwitcher View. It is a
view useful to switch smoothly between two images and thus provides ways of
transitioning from one to another through appropriate animations.

We will implement the same concept of showing a gallery
of images that scrolls at the top of the android screen landscape and upon
selection of one image, it gets displayed as a larger image in the lower part
through the use of an ImageSwitcher. This is what I had done earlier in the
GalleryView tutorial but now instead of showing the selected picture through an
ImageView, I will show it using a ImageSwitcher. Though the output may seem very
similar, lot of other methods are available on the ImageSwitcher that can be
used, if required.

Here is how the output would look (NOTE that I
have not used the default gallery background provided by Android in the Gallery
images)

So, to begin with, first we need to declare the
layout xml to have a gallery and the ImageSwitcher:

<Gallery

      android:id="@+id/Gallery01"

      android:layout_width="fill_parent"

      android:layout_height="wrap_content"></Gallery>

<ImageSwitcher

      android:id="@+id/ImageSwitcher01"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent">

</ImageSwitcher>

The next thing that we need to do is create a
class that not only extends Activity but also implements ViewFactory. The
ViewFactory is a Interface that creates views that need to be shown in the
ImageSwitcher. So it has one method makeView() which we need to implement. It
is here that we can set the attributes of the ImageView that would be shown
within the ImageSwitcher -  like its
background, it scale, its layout parameters etc. – typically those attributes
that we would have otherwise statically set through a layout xml.

Here is the class declaration and the method
makeView():

public class ImageSwitcherView extends Activity implements ViewFactory {

and

      @Override

      public View makeView() {

            ImageView iView = new ImageView(this);

            iView.setScaleType(ImageView.ScaleType.FIT_CENTER);

            iView.setLayoutParams(new

                        ImageSwitcher.LayoutParams(

                                    LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));

            iView.setBackgroundColor(0xFF000000);

            return iView;

      }

This alone is the real difference from the Gallery
example.

Other smaller things we need to do is get a handle
to the ImageSwitcher in the onCreate() method:

            iSwitcher = (ImageSwitcher) findViewById(R.id.ImageSwitcher01);

            iSwitcher.setFactory(this);

            iSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,

                        android.R.anim.fade_in));

            iSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,

                        android.R.anim.fade_out));

Here we also set the animation on how the image
should fly in and fly out of the area. Then, we get a handle to the gallery and
set an ImageAdapter to it. The ImageAdpater is as described in my Gallery
Example. If you have not seen that, please go through that and then try this
example, as I would not want to repeat myself here.

Now on the click of a gallery image, we would want
to pass the selected image to the ImageSwitcher and this is what we do here:

            gallery.setOnItemClickListener(new OnItemClickListener() {

                  @Override

                  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {

                        iSwitcher.setImageResource(pics[arg2]);

                  }

            });

      }

This way we are done. You
may download the complete code here.