Using the Gallery with the ImageSwitcher View

Published? true
FormatLanguage: WikiFormat

Problem:

Creating UI for browse through multiple images.

Solution:

You could use Gallery with Image Switcher view to achieve this

Discussion:

The Gallery(android.widget.Gallery) and ImageSwitcher(android.widget.ImageSwitcher) can be used together to create a nice image browser for your application.

<?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"
    >

    <ImageSwitcher
     	android:id="@+id/switcher"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"                
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"      
   		 /> 
    
    <Gallery 
    	android:id="@+id/gallery"
        android:background="#55000000"
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:spacing="16px"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:gravity="center_vertical"        
	    />     
    
</RelativeLayout>

Now let's see how to use this layout.

public class ImageBrowser extends Activity implements AdapterView.OnItemSelectedListener, ViewSwitcher.ViewFactory {
	private ImageSwitcher mISwitcher;  
	private ArrayList<Drawable> allimages = new ArrayList<Drawable>();

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
                // lets remove the title bar
		requestWindowFeature(Window.FEATURE_NO_TITLE); 
		setContentView(R.layout.main);

		getImages();

		mISwitcher = (ImageSwitcher)findViewById(R.id.switcher);
		mISwitcher.setFactory(this);
                // some animation when image changes
		mISwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		mISwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));         

		Gallery gallery = (Gallery) findViewById(R.id.gallery);
		gallery.setAdapter(new ImageAdapter(this));
		gallery.setOnItemSelectedListener(this);         
	}


	private void getImages() {
		allimages.add(this.getResources().getDrawable(R.drawable.image1));
		allimages.add(this.getResources().getDrawable(R.drawable.image2));
		allimages.add(this.getResources().getDrawable(R.drawable.image3));
		allimages.add(this.getResources().getDrawable(R.drawable.image4));
		allimages.add(this.getResources().getDrawable(R.drawable.image5));
		allimages.add(this.getResources().getDrawable(R.drawable.image6));
		allimages.add(this.getResources().getDrawable(R.drawable.image7));
		allimages.add(this.getResources().getDrawable(R.drawable.image8));
		allimages.add(this.getResources().getDrawable(R.drawable.image9));

	}


	@Override
	public void onItemSelected(AdapterView<?> arg0, View v, int position, long id) {
		try{
			mISwitcher.setImageDrawable(allimages.get(position));
		}catch(Exception e){}
	}


	@Override
	public void onNothingSelected(AdapterView<?> arg0) {
		// TODO Auto-generated method stub

	}


	@Override
	public View makeView() {
          ImageView i = new ImageView(this);
          i.setBackgroundColor(0xFF000000);
          i.setScaleType(ImageView.ScaleType.FIT_CENTER);
          i.setLayoutParams(new ImageSwitcher.LayoutParams(ImageSwitcher.LayoutParams.FILL_PARENT,ImageSwitcher.LayoutParams.FILL_PARENT));
          return i; 
	}


	public class ImageAdapter extends BaseAdapter {
		private Context mContext;

		public ImageAdapter(Context c) {
			mContext = c;
		}

		public int getCount() {
			return allimages.size();
		}

		public Object getItem(int position) {
			return position;
		}

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

		public View getView(int position, View convertView, ViewGroup parent) {
                   ImageView galleryview = new ImageView(mContext);
                   galleryview.setImageDrawable(allimages.get(position));
                   galleryview.setAdjustViewBounds(true);
                   galleryview.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                   galleryview.setPadding(5, 0, 5, 0);
                   galleryview.setBackgroundResource(android.R.drawable.picture_frame);            
                   return galleryview; 
		}
	}
}