Implement Simple GridView in Android App
Grid View is one that displays the data in two-dimensional scrolling grid. Adapter associated with the Gridview loads the data into the Gridview from different sources like array or cursor containing query result.
IÂ am going to show you how to create simple Gridview having single Textview in each of the grids. Let’s start,
Create the new project as File->New->New Project. Give a project name as SimpleGrid-> rename MainActivity as SimpleGridActivity and select Finish.
Go to res->layout->activity_simple_grid.xml. Copy the below code in the Text tab of activity_simple_grid.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f0f0f0">
<GridView
android:id="@+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="100dp"
android:drawSelectorOnTop="true"
android:gravity="center"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"
android:focusable="true"
android:clickable="true"/>
</RelativeLayout>
Now create a new xml file that represents single grid item in res ->layout ->right_click -> grid_item.xml. Copy the below code in Text tab of grid_item.xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="120dp"
android:layout_height="120dp"
android:orientation="vertical"
android:background="#d7d2d2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginTop="20dp"
android:textSize="20dp"
android:id="@+id/gridText"/>
</LinearLayout>
As I already mentioned that I am creating a grid view containing single Textview, that is why I am using ArrayAdapter of type String only. We will see the custom adapter for grid view as well. Open SimpleGridActivity.java from java directory and copy the below code.
package com.buzzmycode.simplegrid;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.GridView;
public class SimpleGridActivity extends AppCompatActivity {
ArrayAdapter<String> adapter;
String[] grid_array = {"Android OS (Google Inc.)",
"Bada (Samsung Electronics)",
"BlackBerry OS (Research In Motion)",
"iPhone OS / iOS (Apple)",
"MeeGo OS (Nokia and Intel)",
"Palm OS (Garnet OS)",
"Windows Mobile (Windows Phone 7)"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_simple_grid);
GridView gridView = (GridView) findViewById(R.id.gridView);
adapter = new ArrayAdapter<String>(SimpleGridActivity.this,R.layout.grid_item,R.id.gridText, grid_array);
gridView.setAdapter(adapter);
}
}
For a click on a grid, you need to add the onClick event in your SimpleGridActivity as follows.
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
String seleted_grid = ((TextView)view.findViewById(R.id.gridText)).getText().toString();
Toast.makeText(SimpleGridActivity.this, "You select "+seleted_grid + " at position "+ i , Toast.LENGTH_LONG).show();
}
});
The final SimpleGridActivity will as below.
package com.buzzmycode.simplegrid;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;
public class SimpleGridActivity extends AppCompatActivity {
ArrayAdapter<String> adapter;
String[] grid_array = {"Android OS (Google Inc.)",
"Bada (Samsung Electronics)",
"BlackBerry OS (Research In Motion)",
"iPhone OS / iOS (Apple)",
"MeeGo OS (Nokia and Intel)",
"Palm OS (Garnet OS)",
"Windows Mobile (Windows Phone 7)"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_simple_grid);
GridView gridView = (GridView) findViewById(R.id.gridView);
adapter = new ArrayAdapter<String>(SimpleGridActivity.this,R.layout.grid_item,R.id.gridText, grid_array);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
String seleted_grid = ((TextView)view.findViewById(R.id.gridText)).getText().toString();
Toast.makeText(SimpleGridActivity.this, "You select "+seleted_grid + " at position "+ i , Toast.LENGTH_LONG).show();
}
});
}
}
Your AndroidManifest.xml will be as below.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.buzzmycode.simplegrid">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".SimpleGridActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Now run the App you will have the following output.
Here we did with the simple Grid View with a click on its grid. Hope you understand it clearly, if you do not understand anything don’t hesitate to comment below. I would love to help you.
