1 page.title=Hello, Gallery 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>A {@link android.widget.Gallery} is a View commonly used to display items in a horizontally scrolling list 7 that locks the current selection at the center. When one is selected, we'll show a message.</p> 8 9 10 <ol> 11 <li>Start a new project/Activity called HelloGallery.</li> 12 <li>Add some images to your res/drawable/ directory.</li> 13 <li>Open the layout file and make it like so: 14 <pre> 15 <?xml version="1.0" encoding="utf-8"?> 16 <Gallery xmlns:android="http://schemas.android.com/apk/res/android" 17 android:id="@+id/gallery" 18 android:layout_width="fill_parent" 19 android:layout_height="wrap_content" 20 /> 21 </pre> 22 </li> 23 24 25 <li>Open the HelloGallery.java file. Insert the following for the <code>onCreate()</code> method: 26 <pre> 27 @Override 28 public void onCreate(Bundle savedInstanceState) { 29 super.onCreate(savedInstanceState); 30 setContentView(R.layout.main); 31 32 Gallery g = (Gallery) findViewById(R.id.gallery); 33 g.setAdapter(new ImageAdapter(this)); 34 35 g.setOnItemClickListener(new OnItemClickListener() { 36 public void onItemClick(AdapterView parent, View v, int position, long id) { 37 Toast.makeText(HelloGallery.this, "" + position, Toast.LENGTH_SHORT).show(); 38 } 39 }); 40 } 41 </pre> 42 <p>We start as usual: set the layout and capture the View we want (our Gallery). 43 We then set an Adapter, called ImageAdapter for the Gallery—this is a new class that 44 we'll create next. Then we create an item click listener for the Gallery. This is like a normal 45 on-click listener (which you might be familiar with for buttons), but it listens to each item 46 that we've added to the Gallery. The <code>onItemClick()</code> callback method 47 receives the AdapterView where the click occurred, the specific View that received the click, the 48 position of the View clicked (zero-based), and the row id of the item clicked (if applicable). All 49 that we care about is the position, so that we can pop up a {@link android.widget.Toast} message that 50 tells us the index position of the item clicked. We do this with <code>Toast.makeText().show()</code>. 51 </p> 52 </li> 53 54 <li>After the <code>onCreate()</code> method, add the <code>ImageAdapter</code> class: 55 <pre> 56 public class ImageAdapter extends BaseAdapter { 57 int mGalleryItemBackground; 58 private Context mContext; 59 60 private Integer[] mImageIds = { 61 R.drawable.sample_1, 62 R.drawable.sample_2, 63 R.drawable.sample_3, 64 R.drawable.sample_4, 65 R.drawable.sample_5, 66 R.drawable.sample_6, 67 R.drawable.sample_7 68 }; 69 70 public ImageAdapter(Context c) { 71 mContext = c; 72 TypedArray a = obtainStyledAttributes(android.R.styleable.Theme); 73 mGalleryItemBackground = a.getResourceId( 74 android.R.styleable.Theme_galleryItemBackground, 0); 75 a.recycle(); 76 } 77 78 public int getCount() { 79 return mImageIds.length; 80 } 81 82 public Object getItem(int position) { 83 return position; 84 } 85 86 public long getItemId(int position) { 87 return position; 88 } 89 90 public View getView(int position, View convertView, ViewGroup parent) { 91 ImageView i = new ImageView(mContext); 92 93 i.setImageResource(mImageIds[position]); 94 i.setLayoutParams(new Gallery.LayoutParams(150, 100)); 95 i.setScaleType(ImageView.ScaleType.FIT_XY); 96 i.setBackgroundResource(mGalleryItemBackground); 97 98 return i; 99 } 100 } 101 </pre> 102 <p>First, there are a few member variables, including an array of IDs that reference 103 the images we placed in our drawable resources directory.</p> 104 <p>Next is the constructor, where we define the member Context. The rest of the constructor 105 sets up a reference for our Gallery them, which adds the nice framing for each Gallery item. 106 Once we have our <code>mGalleryItemBackground</code>, it's important to recycle the 107 StyledAttribute for later re-use.</p> 108 <p>The next three methods are required for basic member queries. 109 But then we have the <code>getView()</code> method, which is called 110 for each item read by our ImageAdapter, when the Gallery is being built. Here, we 111 use our member Context to create a new {@link android.widget.ImageView}. We then define 112 the image resource with the current position of the Gallery items (corresponding to our 113 array of drawables), set the dimensions for the ImageView, 114 set the image scaling to fit the ImageView dimensions, then finally set the 115 background theme for the ImageView.</p> 116 117 <p>See {@link android.widget.ImageView.ScaleType} 118 for other image scaling options, in case you want to avoid stretching images that don't 119 exactly match the ImageView dimensions.</p> 120 121 <li>Now run it.</li> 122 </ol> 123 <p>You should see something like this:</p> 124 <img src="images/hello-gallery.png" width="150px" /> 125 126 127 <h3>References</h3> 128 <ul> 129 <li>{@link android.widget.BaseAdapter}</li> 130 <li>{@link android.widget.Gallery}</li> 131 <li>{@link android.widget.ImageView}</li> 132 <li>{@link android.widget.Toast}</li> 133 </ul> 134 135 136
