How to create Grid View in Android.

How to create simple GridView in Android

Simple GridView in Android

Grid View is one that displays the data in two-dimensional scrolling grid. Adapter associated with the Grid View loads the data into the Grid View from different sources like array or cursor containing query result.

I¬†am going to show you how to create simple Grid View having single Text View 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.

Simple Grid View in Android with click on its grid.
Simple Grid View in Android with click on its grid.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *