Android Gridview Control – A detailed Overview

Android Gridview Control:

There are situations wherein we need to display data in tabular format in our application to our users. Android Gridview control helps for the same. Data in Android Gridview control is displayed using Rows and Columns which can be scrolled both horizontally and vertically. In this post, I’ll explain Android Gridview control in detail.
So let’s begin our tutorial.
Data in Android Gridview control are displayed using Adapterview which are populated using Adapter. Adapter can be linked to external data sources such as an SQLite database or from web service.

Attributes of Android Gridview control:

android:columnWidth : Used to define width of Gridview control columns.

Ex : android:columnWidth=”5dp”
android:horizontalSpacing : Used to define horizontal spacing of the rows .

Ex : android:horizontalSpacing=”2dp”
android:listSelector : Used to define a draw-able or color of selection.

Ex : android:listSelector=”#0078f0″
android:numColumns : Used to define number of Columns in Android Gridview control.

Ex : android:numColumns=”3″

android:stretchMode : Used to define stretching mode of the columns.

Ex : android:stretchMode=”columnWidth”

android:verticalSpacing : Used to define vertical spacing between rows.

Ex : android:verticalSpacing=”2dp”

---

Now let’s see a design layout code and program code to fill a Android gridview.

1. Using Adapter:

Edit your activity_main.xml file as following :

res > layout > activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

<GridView
 android:id="@+id/gridview1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:columnWidth="5dp"
 android:horizontalSpacing="2dp"
 android:listSelector="#0078f0"
 android:numColumns="3"
 android:stretchMode="columnWidth"
 android:verticalSpacing="2dp" >
 </GridView>

</LinearLayout>

And edit your MainActivity.java file as below code :

MainActivity.java:

package parallelcodes.simplewidget;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity {

 GridView gridview1;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 gridview1 = (GridView) findViewById(R.id.gridview1);

 ArrayList<String> s = new ArrayList<String>();
 for (int i = 1; i < 1001; i++) {
 s.add(String.valueOf(i));
 }
 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
 android.R.layout.simple_list_item_1, s);

 gridview1.setAdapter(adapter);
 gridview1.setOnItemClickListener(new OnItemClickListener() {

 @Override
 public void onItemClick(AdapterView<?> parent, View view,
 int position, long id) {

 Toast.makeText(
 MainActivity.this,
 "You selected "
 + gridview1.getItemAtPosition(position)
 .toString() + ".", Toast.LENGTH_SHORT)
 .show();

 }
 });
 }

}

This will produce following design at runtime.

---

2. Using Custom Adapter :

We will be displaying a Image in our gridview control using Custom Adapter.

Make a new layout file in res > layout folder named list_template.xml and edit it as below .

res > layout > list_template.xml :

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

<ImageView
 android:id="@+id/imgView1"
 android:src="@drawable/calendar"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</LinearLayout>

This will serve as the layout design file for our Gridview control.

res > layout > activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

<GridView
 android:id="@+id/gridview1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:columnWidth="5dp"
 android:horizontalSpacing="2dp"
 android:listSelector="#0078f0"
 android:numColumns="3"
 android:stretchMode="columnWidth"
 android:verticalSpacing="2dp" >
 </GridView>

</LinearLayout>

Make a new Java class file with name GridAdapter.java in your project and edit it as below :

GridAdapter.java :

package parallelcodes.simplewidget;

import android.content.Context;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.ImageView;

public class GridAdapter extends BaseAdapter {

private Context context;

public GridAdapter(Context context) {
 this.context = context;

}

@Override
 public int getCount() {
 // TODO Auto-generated method stub
 return 100; // This will define the number of childs in gridview
 }

@Override
 public Object getItem(int position) {
 // TODO Auto-generated method stub
 return null;
 }

@Override
 public long getItemId(int position) {
 // TODO Auto-generated method stub
 return 0;
 }

@Override
 public View getView(int position, View convertView, ViewGroup parent) {
 LayoutInflater inflater = (LayoutInflater) context
 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 View gridLayout;
 if (convertView == null) {
 gridLayout = new View(context);
 gridLayout= inflater.inflate(R.layout.list_template, null);
 ImageView imageView = (ImageView) gridLayout
 .findViewById(R.id.imgView1);

imageView.setImageResource(R.drawable.calendar);

} else
 gridLayout= (View) convertView;

return gridLayout;
 }

}

And MainActivity.java as below :

MainActivity.java:

package parallelcodes.simplewidget;

import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.widget.AdapterView;
 import android.widget.AdapterView.OnItemClickListener;
 import android.widget.GridView;
 import android.widget.Toast;

public class MainActivity extends Activity {

GridView gridview1;

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 gridview1 = (GridView) findViewById(R.id.gridview1);

gridview1.setAdapter(new GridAdapter(this));
 gridview1.setOnItemClickListener(new OnItemClickListener() {

@Override
 public void onItemClick(AdapterView<?> parent, View view,
 int position, long id) {

Toast.makeText(MainActivity.this,
 "Selected image position : " + String.valueOf(position) + ".",
 Toast.LENGTH_SHORT).show();

}
 });
 }

}

This will produce following result at runtime :

Please see :

Fill data in Android Gridview control using MS SQL server database.

Android Beginners Tutorial.