Subscribe for notification
Categories: Android Tutorial

Create and Implement Simple GridView in Android App with 2 Layout

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

Implement Simple GridView in Android App
<?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

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.

This post was last modified on August 17, 2020 2:02 am

Sponsored
SyncSaS

SyncSaS Technologies is specialized in creating and designing customized software. We have our own team that will be in charge of developing your softwares.

Recent Posts

Adsense Updated Dashboard

Changes in Adsense Dashboard Recently you might have seen few changes in Adsense dashboard, these…

4 weeks ago

Guide Book For Google Adsense

With my experience in working as AdSense publisher, I have written many articles, tutorials for…

4 weeks ago

How to manage Google Adsense to get High CPC

Manage Adsense for High CPC CPC (Cost per click) in simple words the CPC is…

4 weeks ago

Google Adsense Introduce page level ads

If you are already the publisher of Google Adsense account then now its time to…

4 weeks ago