- Home Startseite ホーム 主页 首頁
- SDK
- Dev Guide Handbuch Guía Guide Guida 開発ガイド 开发人员指南 開發指南
- Reference Referenz Referencia Référence Riferimento リファレンス 参考 參考資料
- Resources
- Videos ビデオ
- Blog ブログ 博客 網誌

Android.com

Hello, Views >

# Hello, GridView

A `GridView` displays items in a two-dimensional, scrolling grid. The items are acquired from a `ListAdapter`.

1. Start a new project/Activity called HelloGridView.
2. Find some photos you'd like to use, or copy some from the SDK samples res/drawable/ folder of your project.
3. Open the layout and make it like so:

       <?xml version="1.0" encoding="utf-8"?>
       <GridView xmlns:android="http://schemas.android.com/apk/res/android"
           android:id="@+id/gridview"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:numColumns="auto_fit"
           android:verticalSpacing="10dp"
           android:horizontalSpacing="10dp"
           android:columnWidth="90dp"
           android:stretchMode="columnWidth"
           android:gravity="center"
       />

4. Open the HelloGridView Java file. Insert the following for the `onCreate()` method:

       public void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.main);

           GridView gridview = (GridView) findViewById(R.id.gridview);
           gridview.setAdapter(new ImageAdapter(this));
       }

   Here, we get a handle on our GridView, from the layout, and give it an Adapter. We're actually going to create our own Adapter called ImageAdapter.

5. Create a new class (nested or otherwise), called ImageAdapter, which extends `BaseAdapter`:

       public class ImageAdapter extends BaseAdapter {
           private Context mContext;

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

           public int getCount() {
               return mThumbIds.length;
           }

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

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

           // create a new ImageView for each item referenced by the Adapter
           public View getView(int position, View convertView, ViewGroup parent) {
               ImageView imageView;
               if (convertView == null) {  // if it's not recycled, initialize some attributes
                   imageView = new ImageView(mContext);
                   imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
                   imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                   imageView.setPadding(8, 8, 8, 8);
               } else {
                   imageView = (ImageView) convertView;
               }

               imageView.setImageResource(mThumbIds[position]);
               return imageView;
           }

           // references to our images
           private Integer[] mThumbIds = {
                   R.drawable.sample_2, R.drawable.sample_3,
                   R.drawable.sample_4, R.drawable.sample_5,
                   R.drawable.sample_6, R.drawable.sample_7,
                   R.drawable.sample_0, R.drawable.sample_1,
                   R.drawable.sample_2, R.drawable.sample_3,
                   R.drawable.sample_4, R.drawable.sample_5,
                   R.drawable.sample_6, R.drawable.sample_7,
                   R.drawable.sample_0, R.drawable.sample_1,
                   R.drawable.sample_2, R.drawable.sample_3,
                   R.drawable.sample_4, R.drawable.sample_5,
                   R.drawable.sample_6, R.drawable.sample_7
           };
       }

   First we take care of some required methods inherited from BaseAdapter. The constructor and `getCount()` are self-explanatory. Normally, `getItem()` should return the actual object at the specified position in our Adapter, but for this Hello World, we're not going to bother. Likewise, `getItemId()` should return the row id of the item, but right now we don't care.

   However, `getView()` is the method we care about. This one creates a new View for each image that we put in our ImageAdapter. So we're going to create an ImageView each time. When this is called, we're going to receive a View, which is likely a recycled View object (at least after the first call), so we check for this—if it's null, we initialize the ImageView and setup all the properties we want. The `LayoutParams()` initialization sets the height and width of the View—this ensures that no matter the drawable size, each image is resized and cropped to fit in the ImageView (if necessary). With `setScaleType()`, we say that images should be cropped toward the center (if necessary). And finally, we set the padding within the ImageView. (Note that, if the images have various aspect-ratios, as they do in this demo, then less padding will cause for more cropping of the image, if it does not match the dimensions given to the ImageView.) At the end of `getView()` we set the image resource and return the ImageView.

   All that's left is our array or drawable resources at the bottom.

6. Run it.

Your grid layout should look something like this:

Try experimenting with the behaviors of the GridView and ImageView by adjusting their properties. For example, instead of setting the ImageView LayoutParams, you can try using `setAdjustViewBounds(boolean)`.

### References

- `GridView`
- `ImageView`
- `BaseAdapter`

↑ Go to top

← Back to Hello, Views