Android Programming

Introduction to Android GridView

A gridview is an adapterview that shows items in a two-dimensional grid.

Android GridView

These grids are scrollable. It's an adapterview because it works with adapters. Adapters can then bind data to the gridview.

This is important because then it means that the gridview is decoupled from it's data source. So you can customize the gridview as you like without interfering with the data source. You can also work on the data source without affecting the visual appearance of the gridview.

GridView derives from AbsListview.

public class GridView extends android.widget.AbsListView{}

Both reside in the android.widget packages.

AbsListview is an abstract class and you won't use in directly. You'll use it in case you want to implement your own custom view with unique properties.

Even the sister of GridView which is ListView also directly derives from AbsListview. So AbsListview is a base class. It's used to implement virtualized list of items. Given it's virtualized you can implement it to show lists in various forms:

  • Lists -vertical and horizontal
  • Grids
  • Carousel
  • Stack

And so on.

So in our case the gridview uses it to display items in a grid. And we call the implementation the Gridview.

Some of the typical uses of gridview include:

  • Showing image gallery.
  • Showing list of movies.
  • Showing list of products etc.

Like other views and widgets, gridview are first defined in the xml layout. This is because android views and widgets are normally defined using XML, a markup language. Though it's also possible to create the views and widgets using raw java. However, XML has several advanatges:

  1. It's easier compared to having to remember the various APIs for creating views programmatically.
  2. It's more flexible and customizable.
  3. It decouples the user interface from the application logic. This leads to maintenable code.
  4. It's more reusable. You can easily copy paste XML code from online and reuse as opposed to java code.
  5. We can use the designer to generate the XML code.

To work with XML, first we add the gridview xml definition inside our layout:

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

Then we can move to our java code and reference the gridview and set its adapter:

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

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

        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                    int position, long id) {
                Toast.makeText(HelloGridView.this, "" + position,
                        Toast.LENGTH_SHORT).show();
            }
        });
    }