Programming and Personal Development

Android Gallery

Along with ListViews and Spinners, android also provides a Gallery widget that are useful for displaying a list of elements. Unlike the other two where elements are displayed vertically, Gallery lets you scroll through the elements horizontally.   You specify the items to be displayed in the gallery through an adapter and can register callbacks using the setOnItemClickListener () method.

android gallery widget demo

Android Gallery Demo

Example

As a typical example, we will use the gallery widget to show a gallery of photos. We start with a simple Gallery element within the LinearLayout as shown below. In addition to the layout width and height,  we also specify the spacing between the items displayed and the position of the elements within the Gallery using the android:spacing and android:gravity respectively.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
<Gallery android:id="@+id/gallery"
          android:spacing="10dip"
          android:gravity="center"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
         />
</LinearLayout>

Custom Adapter Class

The items to be displayed are images that are placed with the resources/drawable-hdpi directory. We create a custom  adapter class that reads these image resources and constructs an image view for each one of them.  The CustomAdapter class is shown below.
private class CustomAdapter extends BaseAdapter {
   private Context m_context;
   /**
    * An array of input resource ids
    */
   private final Integer[] m_imgs = {           R.drawable.autumn,           R.drawable.creek,           R.drawable.desert   };   public CustomAdapter(Context context) {
      m_context = context;
   }
   @Override
   public int getCount() {
      return m_imgs.length;
   }
   @Override
   public Object getItem(int position) {
      return m_imgs[position];
   }
   @Override
   public long getItemId(int position) {
      return position;
   }
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {      ImageView imgView = new ImageView(m_context);
      imgView.setImageResource(m_imgs[position]);
      imgView.setScaleType(ImageView.ScaleType.FIT_XY);
      imgView.setLayoutParams(new Gallery.LayoutParams(200, 300));
      return imgView;
   }
}

It extends the BaseAdapter and overrides the required methods. The important method to focus here is the getView() method. We keep track of the source items using an Integer array.  Each time the getView () method gets called,
  • we create a new ImageView element
  • use the position argument as index into the source array to fetch the resource to be displayed
  • set the resource in the ImageView using the setImageResource () method
  • specify the scale type to fit the dimensions of the imageView. There are various  scale type options provided, try playing around with these options to see their effect.
  •  Finally, specify the width and height of the images using Gallery.LayoutParams () class.

Activity Class

We then use the setAdapter () method to bind  the CustomAdapter class  with the Gallery element and  register a callback to raise a Toast message that displays the name of the image using the setOnItemClickListener () method. The overall activity class is as shown.
public class GalleryDemo extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.gallerydemo);
      Gallery gallery = (Gallery) findViewById(R.id.gallery);
      final CustomAdapter adapter = new CustomAdapter(this);
      gallery.setAdapter(adapter);      gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {         @Override
         public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            String name = getResources().getString((Integer) adapter.getItem(position));
            int startIndex = name.lastIndexOf("/");
            name = name.substring(startIndex + 1);
            Toast.makeText(GalleryDemo.this,name,Toast.LENGTH_SHORT).show();         }
      });
   }
    // ....CustomAdapter inner class  goes here}

Happy Coding !!!

Web Analytics