Gallery and Grid View

The Gallery ViewGroup (Figure 11-4) displays multiple items in a horizontally scrolling list. The currently selected item is locked in the center of the screen. Any items that approach the edge of the screen begin to fade, giving the user the impression that there may be more items "around the corner." The user can scroll horizontally through the items within the gallery. This ViewGroup is useful when you want to present a large set of possible choices to the user without using too much screen real estate.

A GridView (Figure 11-5, shown later) is very similar to a Gallery. Like a Gallery, the GridView displays many child Views that the user can manipulate. But in contrast to a Gallery, which is a one-dimensional list that the user can scroll horizontally, a Grid-View is a two-dimensional array that the user can scroll vertically.

The Gallery and GridView classes both descend from the AdapterView class, so you need a subclass of Adapter to provide a standardized way to access the underlying data. Any class that implements the Adapter class must implement the following abstract functions from that class:

int getCount

Returns the number of items in the data set represented by the Adapter. Object getItem(int position)

Returns the object in the Adapter function (Adapter class) at the given position.

long getItem(int position)

Returns the row ID within the Adapter of the object at the given position. View getView(int position, View convertView, ViewGroup parent)

Returns a View object that will display the data in the given position in the data set.

The ApiDemos application's file shows off the Gallery ViewGroup nicely. The demo displays a variety of images for the user to select, and when the user does select one, the image's index number briefly appears as toast.

Figure 11-4. The Gallery ViewGroup

The ApiDemos application also includes two example GridView Activities that show how to use the GridView. We will not examine the GridView here, because the Gallery example is so similar.

Example 11-4 shows how to use a Gallery ViewGroup. Example 11-4 shows the XML layout file (gaU.ery_1.xml).

Example 11-4. Layout file for Gallery example <?xml version="l.0" encoding="utf-8"?>

<Gallery xmlns:android="" android:id="@+id/gallery" android:layout_width="fill_parent"© android:layout_height="wrap_content"©

Here are some of the highlights of the layout code:

O The id for the Gallery View is gallery. As you have seen before, the id is used by the findViewByld function to hook a Java Object to the XML object named in the layout file.

© layout_width is set to fill_parent so that the Gallery's width will be the same as the parent's.

© layout_height is set to wrap_content, meaning that the height will be as high as the tallest child.

Views/Gricf/2. Photo Grid


Hg; 1






--- .. * *

f ».!« 1



□ rm

-XM ■iu

HS 1





Figure 11-5. The GridView ViewGroup

Now we'll turn our attention to the Java implementation,, shown in Example 11-5. We've modified the code from ApiDemos slightly to remove some features that do not add to our understanding of the Gallery ViewGroup.

Example 11-5. Java for Gallery: public class Galleryl extends Activity {

^Override public void onCreate(Bundle savedlnstanceState) { super.onCreate(savedlnstanceState); setContentView(R.layout.gallery_l);

// Reference the Gallery view

Gallery g = (Gallery) findViewByld(;©

// Set the adapter to our custom adapter (below)

g.setAdapter(new ImageAdapter(this));

// Set a item click listener, and just Toast the clicked position g.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView parent, View v, int position, long id) { Toast.makeText(Gallery1.this, "" + position, Toast.LENGTH_SHORT).show();O

Here are some of the highlights of the code:

O In the Gallery's onCreate method, create a Gallery object hooked to the id named gallery from the XML layout.

© Display each user option using the custom adapter defined in Example 11-6 (shown next).

© Set up a click listener on the Gallery object.

O Display the the index (position) within the ImageAdapter of the photo the user clicked on as a Toast pop up.

In Example 11-5, the setAdapter function tells the Gallery object to use the ImageAdapter object as its Adapter. Example 11-6 defines our ImageAdapter class. This ImageAdapter implements all of the abstract functions required in its base class, BaseAdapter. For the simple case of this demo, picture resources represent the data that the Gallery view is displaying. An integer array, mImageIds, contains the resource IDs of the picture resources.

Example 11-6. Java for Gallery's Adapter public class ImageAdapter extends BaseAdapter { int mGalleryItemBackground;

private Context mContext;

private Integer[] mImageIds = {

R.drawable.gallery_photo_1, R.drawable.gallery_photo_2, R.drawable.gallery_photo_3, R.drawable.gallery_photo_4, R.drawable.gallery_photo_5, R.drawable.gallery_photo_6, R.drawable.gallery_photo_7, R.drawable.gallery_photo_8

public ImageAdapter(Context c) { mContext = c;

TypedArray a = obtainStyledAttributes(android.R.styleable.Theme); mGalleryItemBackground = a.getResourceId(

android.R.styleable.Theme_galleryItemBackground, 0);

public int getCount() {

return mImagelds.length;

public Object getItem(int position) { return position;

public long getItemId(int position) { return position;

public View getView(int position, View convertView, ViewGroup parent) { ImageView i = new ImageView(mContext);

i.setImageResource(mImageIds[position]); i.setScaleType(ImageView.ScaleType.FIT_XY);© i.setLayoutParams(new Gallery.LayoutParams(l36, 88));

// The preferred Gallery item background i.setBackgroundResource(mGalleryItemBackground);

return i;

Here are some of the highlights of the code:

O Defines the mImageIds array. Each element holds a resource reference to an image that appears in the Gallery, and each image resource name maps to the filename in the resources directory. Thus R.drawable.gallery_photo_1 maps directly to /res/ drawable/gallery_photo_1.jpg in the resource directory.

© Sets the image for this position in the Gallery to the image in the corresponding element of mImageIds.

© setScaleType controls how the image is resized to match the size of its container.

O This call to setLayoutParams sets the size of the ImageView container.

0 0


Post a comment