Android ImageSwitcher Animation Slideshow Widget Example Tutorial

How to use ImageSwitcher in android app to create smooth,sober,simple image gallery with multiple effects.

ImageSwitcher widget is used to display images with animation like fade in, fade out or multiple type of animation effects. With the use of ImageSwitcher developer can create smooth image gallery with slideshow effects and perform various type of functionality inside android application. In this tutorial we are create ImageSwitcher with gallery view widget and display sample images inside ImageSwitcher with fade in,fade out effects. So here is the complete step by step tutorial for Android ImageSwitcher Animation Slideshow Widget Example Tutorial.

android-project-download-code-button

Android ImageSwitcher Animation Slideshow Widget Example Tutorial.

Code for MainActivity.java file.

 package com.imageswitcher_android_examples.com;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity implements ViewFactory {

 Gallery gallery;
 ImageSwitcher imageSwitcher;
 Context context;
 int imageItem;
 Integer[] images = {
 R.drawable.image_1,
 R.drawable.image_2,
 R.drawable.image_3,
 R.drawable.image_4,
 R.drawable.image_5 };
 
 @Override
 protected void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 context = MainActivity.this;
 
 gallery = (Gallery)findViewById(R.id.gallery);
 
 imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher);
 
 imageSwitcher.setFactory(MainActivity.this);
 
 imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
 
 imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
 
 imageSwitcher.setAlpha(Float.parseFloat("50.0"));
 
 gallery.setAdapter(new ImageAdapter(this));
 
 gallery.setOnItemClickListener(new OnItemClickListener()
 {
 @Override
 public void onItemClick(AdapterView<?> parent, View view, int position, long id) 
 {
 imageItem = position;
 imageSwitcher.setImageResource(images[position]);
 }
 });
 }

 private class ImageAdapter extends BaseAdapter
 {
 Context context;
 
 public ImageAdapter(Context context) 
 {
 this.context = context;
 }
 
 public int getCount() 
 {
 return images.length;
 }

 public Object getItem(int position) 
 {
 return images[position];
 }

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

 public View getView(int position, View convertView, ViewGroup parent) 
 {
 ImageView imageView = new ImageView(this.context);
 imageView.setImageResource(images[position]);
 imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));
 
 return imageView;
 }
 }

 public View makeView() 
 {
 ImageView imageView = new ImageView(context);
 imageView.setImageResource(images[imageItem]);
 return imageView;
 }

 }

Code for activity_main.xml layout file.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.imageswitcher_android_examples.com.MainActivity" >

 
 <Gallery 
 android:id="@+id/gallery"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"/>
 
 <ImageSwitcher 
 android:id="@+id/imageSwitcher"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_below="@+id/gallery"
 android:layout_marginTop="10dp"
 android:layout_alignParentLeft="true"
 android:layout_alignParentRight="true"
 android:layout_alignParentBottom="true">
 </ImageSwitcher>
 
</RelativeLayout>

Screenshots:

Android ImageSwitcher Animation Slideshow Widget Example TutorialImageSwitcher-2

Click here to download Android ImageSwitcher Animation Slideshow Widget Example Tutorial project with source code.

Leave a Reply

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