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.
Android Gridview Control – Normal Adapter Example
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 :
Android GridView Control Using Custom Adapter
Please see :
Fill data in Android Gridview control using MS SQL server database.