Grid View

In Android, GridView lets you arrange screen elements in a two-dimensional scrolling grid. The grid items are automatically inserted to the layout using a ListAdapter.
In this tutorial, we shall see 2 common GridView examples :
1. Basic way to display text in GridView layout.
2. Create a custom adapter to display images as well as text in GridView layout.

1. Normal GridView example

i. Layout

Display characters from A to Z in GridView layout. Write the following code in your activity_main.xml layout file.

Android Layout file – res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/gridView1"

    android:numColumns="auto_fit"

    android:gravity="center"

    android:columnWidth="50dp"

    android:stretchMode="columnWidth"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

</GridView>

ii. Activity

Write the following Java code in MainActivity.java file in your src folder.

File: src/com.endeavour.android/MainActivity.java

package com.endeavour.android;

import android.app.Activity;

import android.os.Bundle;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.GridView;

import android.widget.TextView;

import android.widget.Toast;

import android.view.View;

import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {

        GridView gridView;

        static final String[] numbers = new String[] {

                       "A", "B", "C", "D", "E",

                       "F", "G", "H", "I", "J",

                       "K", "L", "M", "N", "O",

                       "P", "Q", "R", "S", "T",

                       "U", "V", "W", "X", "Y", "Z"};

        @Override

        public void onCreate(Bundle savedInstanceState) {

               super.onCreate(savedInstanceState);

               setContentView(R.layout.activity_main);

               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 OnItemClickListener() {

                       public void onItemClick(AdapterView<?> parent, View v,

                               int position, long id) {

                          Toast.makeText(getApplicationContext(),

                               ((TextView) v).getText(), Toast.LENGTH_SHORT).show();

                       }

               });

        }

}

iii. Output

The following output shall be displayed on your screen.

2. Custom Adapter 

In this example, we shall extend a BaseAdapter to display a group of image and text in GridView layout.

i. Layout

We shall need two layout files for this purpose

File – res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/gridView1"

    android:numColumns="auto_fit"

    android:gravity="center"

    android:columnWidth="100dp"

    android:stretchMode="columnWidth"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

</GridView>

File – res/layout/fruit.xml

<?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="50dp"

        android:layout_height="50dp"

        android:layout_marginRight="10dp"

        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="5dp"

        android:textSize="15dp" >

    </TextView>

</LinearLayout>

ii. Custom Adapter

Create a custom adapter.
File: 

src/com.endeavour.android/ImageAdapter.java

package com.endeavour.android;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class ImageAdapter extends BaseAdapter {

        private Context context;

        private final String[] fruitValues;

        public ImageAdapter(Context context, String[] fruitValues) {

               this.context = context;

               this.fruitValues = fruitValues;

        }

        public View getView(int position, View convertView, ViewGroup parent) {

               LayoutInflater inflater = (LayoutInflater) context

                       .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

               View gridView;

               if (convertView == null) {

                       gridView = new View(context);

                       // get layout from fruit.xml

                       gridView = inflater.inflate(R.layout.fruit, null);

                       // set value into textview

                       TextView textView = (TextView) gridView

                                      .findViewById(R.id.grid_item_label);

                       textView.setText(fruitValues[position]);

                       // set image based on selected text

                       ImageView imageView = (ImageView) gridView

                                      .findViewById(R.id.grid_item_image);

                       String mobile = fruitValues[position];

                       if (mobile.equals("Apple")) {

                               imageView.setImageResource(R.drawable.apple);

                       } else if (mobile.equals("Banana")) {

                               imageView.setImageResource(R.drawable.banana);

                       } else if (mobile.equals("Mango")) {

                               imageView.setImageResource(R.drawable.mango);

                       } else {

                               imageView.setImageResource(R.drawable.orange);

                       }

               } else {

                       gridView = (View) convertView;

               }

               return gridView;

        }

        @Override

        public int getCount() {

               return fruitValues.length;

        }

        @Override

        public Object getItem(int position) {

               return null;

        }

        @Override

        public long getItemId(int position) {

               return 0;

        }

}

iii. Activity

File: src/com.endeavour.android/MainActivity.java

package com.endeavour.android;

import com.example.android.ImageAdapter;

import android.app.Activity;

import android.os.Bundle;

import android.widget.AdapterView;

import android.widget.GridView;

import android.widget.TextView;

import android.widget.Toast;

import android.view.View;

import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {

        GridView gridView;

        static final String[] Fruit = new String[] {

               "Apple", "Banana", "Mango", "Orange" };

        @Override

        public void onCreate(Bundle savedInstanceState) {

               super.onCreate(savedInstanceState);

               setContentView(R.layout.main);

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

               gridView.setAdapter(new ImageAdapter(this, Fruit));

               gridView.setOnItemClickListener(new OnItemClickListener() {

                       public void onItemClick(AdapterView<?> parent, View v,

                                      int position, long id) {

                               Toast.makeText(

                                  getApplicationContext(),

                                  ((TextView) v.findViewById(R.id.grid_item_label))

                                  .getText(), Toast.LENGTH_SHORT).show();

                       }

               });

        }

}

iv. Output

The following output shall be displayed.