Tutorial 10 : Grid View Example

In this tutorial, we will learn how to arrange the components in two-dimensional gridView which is shown as Figure 10.1.

Figure 10.1

Same as the previous tutorial, we will show you in two ways (e.g. normal and customize adapter) to build up the gridView layout in Android application.

1. Normal Grid View

In the first part, we would like to display number from 1 to 25 in grid view layout. It is quite simple to implement grid view layout by using <GridView /> tag in XML layout coding (Figure 10.2). There are few settings can be set for the grid view layout such as android:numColumns="..." to set the number of column, android:columnWidth="..." to set the width of the column, android:gravity="..." to set the position of the content and other settings.

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="5"
    android:gravity="center"
    android:columnWidth="50dp"
    android:stretchMode="columnWidth"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</GridView>

Figure 10.2

After that, we create a string array to put all the contents which are needed. Next, set up an array adapter to link it with all the content to show on the XML layout page (Figure 10.3).

static final String[] numbers = new String[] {
            "1", "2", "3", "4", "5",
            "6", "7", "8", "9", "10",
            "11", "12", "13", "14", "15",
            "16", "17", "18", "19", "20",
            "21", "22", "23", "24", "25"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gridview_normal);

        gridView = (GridView) findViewById(R.id.gridView1);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, numbers);

        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                                    int position, long id) {
                Toast.makeText(getApplicationContext(),
                        ((TextView) v).getText(), Toast.LENGTH_SHORT).show();
            }
        });
    }

Figure 10.3

Then, run the Android application, it should be function well and perform same as the video clip below. The source code is provided at here.

 2. Grid View with Array Adapter

In second part, we will custom an array adapter as the previous tutorial to link our gridview with the main activity. First, create a new XML layout for the view of the item which we would like to plug into the main XML layout. We arrange it in LinearLayout form and the source code shown as Figure 10.4.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_marginRight="10px"
        android:src="@drawable/apple" >
    </ImageView>

    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:layout_marginTop="5px"
        android:textSize="15px" >
    </TextView>

</LinearLayout>

Figure 10.4

Then, get use of getView() method again to link the XML layout with the ArrayAdapter. Thus, the Android application will be able to function well as the video clip below. The source code of this Android application can get here.

Next tutorial, we will go through the web view layout to let you able to navigate the web pages in your custom Android application. Be always stay tune with my tutorial, it will make you surprise.