Android ImageSwitcher with Gallery
A ImageSwitcheris a specialized ViewSwitcher that contains only children of type ImageView. A ImageSwitcher is useful to animate an Image on screen.
ImageSwitcher switches smoothly between two images and thus provides a way of transitioning from one Image to another through appropriate animations.
Example
In this example i will demonstrate you how to work on ImageSwitcher with Gallery.
VIDEO DEMO
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken one ImageSwitcher and one Gallery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageSwitcher android:id="@+id/image" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentTop="true" > </ImageSwitcher> <Gallery android:id="@+id/gallery" android:layout_width="fill_parent" android:layout_height="50dp" android:layout_alignParentBottom="true" android:background="#55000000" android:gravity="center_vertical" android:spacing="16dp" /> </RelativeLayout> |
3. Now, create an Adapter class naming ImageAdapter.java for ImageView where we are going to display the Gallery images.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
package com.image_switcher; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.widget.BaseAdapter; import android.widget.Gallery; import android.widget.ImageView; public class ImageAdapter extends BaseAdapter { private Context mContext; private Integer[] mImageIds; public ImageAdapter(Context c, Integer[] mImageIds) { this.mImageIds = mImageIds; mContext = c; } @Override public int getCount() { return mImageIds.length; } @Override public Object getItem(int pos) { return mImageIds[pos]; } @Override public long getItemId(int pos) { return pos; } @Override public View getView(int position, View convertView, ViewGroup parent) { // Adding dynamic image simillarly we had added to Image Switcher ImageView i = new ImageView(mContext); i.setImageResource(mImageIds[position]); i.setAdjustViewBounds(true); i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); // Setting background resource i.setBackgroundResource(mImageIds[0]); return i; } } |
4. Now, add the following code to your MainActivity.java. In this java file we display the selected gallery images into imageswitcher.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
package com.image_switcher; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.ViewGroup.LayoutParams; import android.view.Window; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.Gallery; import android.widget.ImageSwitcher; import android.widget.ImageView; import android.widget.ViewSwitcher.ViewFactory; public class MainActivity extends Activity implements OnItemSelectedListener, ViewFactory { private ImageSwitcher mswitcher; //All Images stored im integer array private Integer[] mImageIds = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h, R.drawable.i }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //Setting no title on window, it should be written before setting cotent view requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); //Getting id for Image switcher and it is used to switch between images mswitcher = (ImageSwitcher) findViewById(R.id.image); mswitcher.setFactory(this); //Gallery for placing images Gallery g = (Gallery) findViewById(R.id.gallery); //Setting adapter over gallery g.setAdapter(new ImageAdapter(MainActivity.this, mImageIds)); //Implementing itemselected listener over gallery g.setOnItemSelectedListener(MainActivity.this); } @Override public void onItemSelected(AdapterView<> arg0, View arg1, int position, long arg3) { //On item selected from gallery the image switcher will get the position and set it to background mswitcher.setImageResource(mImageIds[position]); } @Override public void onNothingSelected(AdapterView<> arg0) { } @Override public View makeView() { //Adding dynamic image ImageView i = new ImageView(this); //Setting background color i.setBackgroundColor(0xFF000000); //Setting scale type i.setScaleType(ImageView.ScaleType.FIT_CENTER); //Now setting layout parameters for image view i.setLayoutParams(new ImageSwitcher.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); //Returning imageview return i; } } |
5. Finally, run the app and you will get the output as shown in video.
Thanks. 