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;
}
}
}