Android Gridview Example in Android Studio

GridView Introduction:-

Android GridView layout is mainly useful when we want show data in grid layout like displaying images or icons. This layout can be used to build applications like image viewer, audio or video players in order to show elements in grid manner.

Android Gridview Attributes

android:id : This is the ID which uniquely identifies the layout
android:columnWidth : This specifies the fixed width for each column. This could be in px, dp, sp, in, or mm
android:gravity : Specifies the gravity within each cell. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc.
android:horizontalSpacing : Defines the default horizontal spacing between columns. This could be in px, dp, sp, in, or mm
android:numColumns : Defines how many columns to show. May be an integer value, such as “100” or auto_fit which means display as many columns as possible to fill the available space
android:stretchMode : Defines how columns should stretch to fill the available empty space, if any. This must be either of the values :
- none : Stretching is disabled
- spacingWidth : The spacing between each column is stretched
- columnWidth : Each column is stretched equally
- spacingWidthUniform : The spacing between each column is uniformly stretched
android:verticalSpacing : Defines the default vertical spacing between rows. This could be in px, dp, sp, in, or mm

Here is the Demo video of Android Gridview:-

create a new Project, and put the following code in activity_main.xml

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <GridView
       android:id="@+id/gridView"
       android:layout_marginTop="10dp"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:columnWidth="90dp"
       android:numColumns="auto_fit"
       android:verticalSpacing="10dp"
       android:horizontalSpacing="10dp"
       android:stretchMode="columnWidth"
       android:gravity="center"
       ></GridView>

</RelativeLayout>

create a new class name as ImageAdaptor.java and extends with BaseAdapter.

fill it with following Code:-

ImageAdapter.java

package com.androidcreation.gridview;

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

public class ImageAdapter extends BaseAdapter {
    private Context mContext;
    public Integer[] images;

    // Constructor
    public ImageAdapter(Context context, Integer[] images){
       this.mContext = context;
        this.images= images;
    }

    @Override
    public int getCount() {
        return images.length;
    }

    @Override
    public Object getItem(int position) {
        return images[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(images[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
        return imageView;
    }

}

finally in the MainActivity,java class , add the following Code

MainActivity.java

package com.androidcreation.gridview;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity {

    Integer images[]={R.drawable.actress,R.drawable.robert,R.drawable.angelina,R.drawable.chris,R.drawable.cute,
    R.drawable.deepika,R.drawable.jony,R.drawable.scrollet,R.drawable.dwaynejohnson,R.drawable.leonardo,R.drawable.tom,
    R.drawable.kristian,R.drawable.actress2,R.drawable.actress3,R.drawable.actress4};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView = findViewById(R.id.gridView);


        // Instance of ImageAdapter Class
        final ImageAdapter imageAdapter= new ImageAdapter(this,images);
        gridView.setAdapter(imageAdapter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v,
                                    int position, long id) {

                // Sending image id to FullScreenActivity
                Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
                // passing array index
                i.putExtra("image", images[position]);
                startActivity(i);
            }
        });
    }
}

Showing Selected grid image in new Activity:-

create a new Activity name as FullImageActivity

it contain two file FullimageActivity.java and activity_full_image.xml

fill the below code in activity_full_image.xml

activity_full_image.xml

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

    <ImageView android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:scaleType="centerCrop"
        android:layout_height="match_parent"/>

</LinearLayout>

add the below code in the FullImageActivity.java

FulImageActivity.java

package com.androidcreation.gridview;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class FullImageActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_full_image);
        // get intent data
        Intent i = getIntent();

        // Selected image id
        int image = i.getExtras().getInt("image");

        ImageView imageView = (ImageView) findViewById(R.id.imageview);
        imageView.setImageResource(image);
    }
}