[Android] GridView 作り方使い方

ギャラリーのように画像を格子状に並べるには、GridViewを使います。作り方は ListView に似ています。
　

Android Studio
2024.1.1

GridView

GridViewはListViewに比べて画像を表示するケースが多いのではないでしょうか。その場合はViewHolderやconvertViewを駆使してviewの再利用を行わないとスクロールがもたついてしまいます。
ただ、Picasso を使うケースではこの限りではありません。ここではとりあえず、本来のGridViewの作成方法にしたがって行きたいと思います。
　

目次
1. Adapter
2. サンプルコード
3. セルの選択

Adapter

GridViewはスクロール可能なアイテムのリストを表示するViewグループです。
Adapterは配列またはデータベースなどからそれぞれの要素をリストに入れられるように変換し自動的に挿入してくれます。
　

　
作り方はListViewと同じように作成していきます。drawableから画像ファイルを読出し、そのIDをArrayListに登録しGrid表示です。

GridView のインスタンス生成
BaseAdapter を継承した GridAdapter クラスのインスタンス生成
GridAdapter で ViewHolder と convertView を使って View の再利用
画像とテキストを表示

MainActivity.java

...
// GridViewのインスタンス生成
GridView gridview = findViewById(R.id.gridview);
 
// GridAdapterのインスタンス生成
GridAdapter adapter = new GridAdapter(this.getApplicationContext(),
                R.layout.grid_items,
                imgList, //Data Source
                members // Data Source
        );
 
// GridviewにアダプターGridAdapterをセット
gridview.setAdapter(adapter);
...

...

// GridViewのインスタンス生成

GridView gridview = findViewById(R.id.gridview);

// GridAdapterのインスタンス生成

GridAdapter adapter = new GridAdapter(this.getApplicationContext(),

R.layout.grid_items,

imgList, //Data Source

members // Data Source

);

// GridviewにアダプターGridAdapterをセット

gridview.setAdapter(adapter);

...

GridAdapter.java

// BaseAdapterを継承したGridAdapterクラス
public class GridAdapter extends BaseAdapter {
 
    // ViewHolderクラス
    class ViewHolder {
    }
 
...
    // コンストラクタ　GridViewからデータを受け取る
    GridAdapter(Context context, // this.getApplicationContext()　コンテキスト
                int layoutId, // R.layout.grid_items => grid_items.xmlファイル
                List<Integer> iList, // imgList のarray
                String[] members // members配列
    ){
...
 
    // ViewHolder と convertView を使って View の再利用
    public View getView(int position, View convertView, ViewGroup parent) {
 
        ViewHolder holder;
        if (convertView == null) {
            ...
        }
        else {
            holder = (ViewHolder) convertView.getTag();
        }
            ...
        return convertView;
    }
...

// BaseAdapterを継承したGridAdapterクラス

public class GridAdapter extends BaseAdapter {

// ViewHolderクラス

class ViewHolder {

}

...

// コンストラクタ　GridViewからデータを受け取る

GridAdapter(Context context, // this.getApplicationContext()　コンテキスト

int layoutId, // R.layout.grid_items => grid_items.xmlファイル

List<Integer> iList, // imgList のarray

String[] members // members配列

){

...

// ViewHolder と convertView を使って View の再利用

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;

if (convertView == null) {

...

}

else {

holder = (ViewHolder) convertView.getTag();

}

...

return convertView;

}

...

サンプルコード

画像とその名前をGridViewに表示してみます。
　

　
レイアウトは２列で縦長は150dpあたりとし、名前はシャドウを付けて背景の明暗に対応してみます。
　
MainActivity.java

//package com.example.testgridview;

import android.os.Bundle;
import android.util.Log;
import android.widget.GridView;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    // 表示する画像の名前（拡張子無し）
    // 画面が大きくなったので画像を再利用
    private final String[] members = {
            "yumiko", "yuka", "mai", "nagi", "toko",
            "kurumi", "miki", "saya", "yuyu","katakuriko",
            "yumiko", "yuka", "mai", "nagi", "toko",
            "kurumi", "miki", "saya", "yuyu","katakuriko"
    };

    // Resource IDを格納するarray
    private final List&lt;Integer&gt; imgList = new ArrayList&lt;&gt;();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -&gt; {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        // for-each member名をR.drawable.名前としてintに変換してarrayに登録
        for (String member: members){
            //int imageId = getResources().getIdentifier(
            //        member,"drawable", getPackageName());
            // getIdentifierが非推奨なので、リフレクションを利用する
            int imageId;
            try {
                imageId = R.drawable.class.getField(member).getInt(null);
            } catch (NoSuchFieldException | IllegalAccessException e) {
                throw new RuntimeException(e);
            }

            imgList.add(imageId);
            Log.v("TAG: ", String.valueOf(imageId));
        }

        // GridViewのインスタンスを生成
        GridView gridview = findViewById(R.id.gridview);
        // BaseAdapter を継承したGridAdapterのインスタンスを生成
        // 子要素のレイアウトファイル grid_items.xml を
        // activity_main.xml に inflate するためにGridAdapterに引数として渡す
        GridAdapter adapter = new GridAdapter(this.getApplicationContext(),
                R.layout.grid_items,
                imgList,
                members
        );

        // gridViewにadapterをセット
        gridview.setAdapter(adapter);
    }
}</pre>

//package com.example.testgridview;

import android.os.Bundle;

import android.util.Log;

import android.widget.GridView;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

// 表示する画像の名前（拡張子無し）

// 画面が大きくなったので画像を再利用

private final String[] members = {

"yumiko", "yuka", "mai", "nagi", "toko",

"kurumi", "miki", "saya", "yuyu","katakuriko",

"yumiko", "yuka", "mai", "nagi", "toko",

"kurumi", "miki", "saya", "yuyu","katakuriko"

};

// Resource IDを格納するarray

private final List<Integer> imgList = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);

return insets;

});

// for-each member名をR.drawable.名前としてintに変換してarrayに登録

for (String member: members){

//int imageId = getResources().getIdentifier(

// member,"drawable", getPackageName());

// getIdentifierが非推奨なので、リフレクションを利用する

int imageId;

try {

imageId = R.drawable.class.getField(member).getInt(null);

} catch (NoSuchFieldException | IllegalAccessException e) {

throw new RuntimeException(e);

}

imgList.add(imageId);

Log.v("TAG: ", String.valueOf(imageId));

}

// GridViewのインスタンスを生成

GridView gridview = findViewById(R.id.gridview);

// BaseAdapter を継承したGridAdapterのインスタンスを生成

// 子要素のレイアウトファイル grid_items.xml を

// activity_main.xml に inflate するためにGridAdapterに引数として渡す

GridAdapter adapter = new GridAdapter(this.getApplicationContext(),

R.layout.grid_items,

imgList,

members

);

// gridViewにadapterをセット

gridview.setAdapter(adapter);

}

}</pre>

　
BaseAdapterを継承したカスタムのadapterを作成します。
　
GridAdapter.java

//package com.example.testgridview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;

public class GridAdapter extends BaseAdapter {

    static class ViewHolder {
        ImageView imageView;
        TextView textView;
    }

    private final List<Integer> imageList;
    private final String[] names;
    private final LayoutInflater inflater;
    private final int layoutId;

    // 引数がMainActivityからの設定と合わせる
    GridAdapter(Context context,
                int layoutId,
                List<Integer> iList,
                String[] members) {

        super();
        this.inflater = (LayoutInflater)
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.layoutId = layoutId;
        imageList = iList;
        names = members;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;
        if (convertView == null) {
            // main.xml の <GridView .../> に grid_items.xml を inflate して convertView とする
            convertView = inflater.inflate(layoutId, parent, false);
            // ViewHolder を生成
            holder = new ViewHolder();

            holder.imageView = convertView.findViewById(R.id.image_view);
            holder.textView = convertView.findViewById(R.id.text_view);

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.imageView.setImageResource(imageList.get(position));
        holder.textView.setText(names[position]);

        return convertView;
    }

    @Override
    public int getCount() {
        // List<String> imgList の全要素数を返す
        return imageList.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

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

//package com.example.testgridview;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import java.util.List;

public class GridAdapter extends BaseAdapter {

static class ViewHolder {

ImageView imageView;

TextView textView;

}

private final List<Integer> imageList;

private final String[] names;

private final LayoutInflater inflater;

private final int layoutId;

// 引数がMainActivityからの設定と合わせる

GridAdapter(Context context,

int layoutId,

List<Integer> iList,

String[] members) {

super();

this.inflater = (LayoutInflater)

context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

this.layoutId = layoutId;

imageList = iList;

names = members;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;

if (convertView == null) {

// main.xml の <GridView .../> に grid_items.xml を inflate して convertView とする

convertView = inflater.inflate(layoutId, parent, false);

// ViewHolder を生成

holder = new ViewHolder();

holder.imageView = convertView.findViewById(R.id.image_view);

holder.textView = convertView.findViewById(R.id.text_view);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

holder.imageView.setImageResource(imageList.get(position));

holder.textView.setText(names[position]);

return convertView;

}

@Override

public int getCount() {

// List<String> imgList の全要素数を返す

return imageList.size();

}

@Override

public Object getItem(int position) {

return null;

}

@Override

public long getItemId(int position) {

return 0;

}

　
メインのレイアウト
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/main"
    android:padding="4dp"
    android:background="#aaa"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#888"
        android:gravity="center"
        android:horizontalSpacing="1dp"
        android:verticalSpacing="1dp"
        android:numColumns="2"
        android:stretchMode="columnWidth" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/main"

android:padding="4dp"

android:background="#aaa"

tools:context=".MainActivity">

<GridView

android:id="@+id/gridview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#888"

android:gravity="center"

android:horizontalSpacing="1dp"

android:verticalSpacing="1dp"

android:numColumns="2"

android:stretchMode="columnWidth" />

</RelativeLayout>

　
画面をRelativeViewでレイアウトしています。GridViewはmatch_parentで幅いっぱいまで占有します。GridView内でのセルの配置は次のように設定します。
　

　
android:numColumns=”2″ : 縦２列の配置
　
android:horizontalSpacing=”1dp” : 横のスペーサーを1dp (縦ラインです!)
android:verticalSpacing=”1dp” : 縦のスペーサーを1dp(横ラインです!)
　
android:stretchMode=”columnWidth” :
– columnWidth: 各列が同じ幅にストレッチされる
– none: ストレッチ無し
– spacingWidth: spacingで指定した値と余る余白を均等に分けた幅を加算
– spacingWidthUniform: 画像の解像度やその他の設定に応じて配置、余白がでる
　
GridViewに差し込む部分のレイアウトがgrid_items.xmlになります
　
grid_items.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="#f88"
    android:padding="3dp" >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:scaleType="centerCrop"
        android:contentDescription="@string/description"/>

    <TextView
        android:id="@+id/text_view"
        android:gravity="center"
        android:textSize="18sp"
        android:textColor="#fff"
        android:shadowDx="2"
        android:shadowDy="2"
        android:shadowRadius="2"
        android:shadowColor="#444"
        android:layout_margin="10dp"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

<?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="#f88"

android:padding="3dp" >

<ImageView

android:id="@+id/image_view"

android:layout_width="match_parent"

android:layout_height="140dp"

android:scaleType="centerCrop"

android:contentDescription="@string/description"/>

<TextView

android:id="@+id/text_view"

android:gravity="center"

android:textSize="18sp"

android:textColor="#fff"

android:shadowDx="2"

android:shadowDy="2"

android:shadowRadius="2"

android:shadowColor="#444"

android:layout_margin="10dp"

android:layout_alignParentBottom="true"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</RelativeLayout>

　
画像とテキストが重なって、白いっぽい画面とダークな画面上でわかるように文字に影を付けます。

android:shadowDx=”2″ : 影の水平オフセット
android:shadowDy=”2″ : 影の垂直オフセット
android:shadowRadius=”2″ : ぼかしレベル
　
strings.xml

<resources>
    <string name="app_name">TestGridView</string>
    <string name="description">picture</string>
</resources>

<string name="app_name">TestGridView</string>

<string name="description">picture</string>

</resources>

　
GridViewが表示されました。
　

セルの選択

ListViewと同じようにセルをタップしたら別のActivityに遷移して、そのセルアイテムの詳細を表示させるような設定です。
　
onItemClick を設定、タップされたセルの番号からその画像のIDをintentで送ります。

MainActivity.java

//package com.example.testgridview2;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity
        implements AdapterView.OnItemClickListener {

    // 表示する画像の名前（拡張子無し）
    private final String[] members = {
            "yumiko", "yuka", "mai", "nagi", "toko",
            "kurumi", "miki", "saya", "yuyu","katakuriko",
            "yumiko", "yuka", "mai", "nagi", "toko",
            "kurumi", "miki", "saya", "yuyu","katakuriko"
    };

    // Resource IDを格納するarray
    private final List<Integer> imgList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        // for-each member名をR.drawable.名前としてintに変換してarrayに登録
        for (String member: members){
            int imageId;
            try {
                imageId = R.drawable.class.getField(member).getInt(null);
            } catch (NoSuchFieldException | IllegalAccessException e) {
                throw new RuntimeException(e);
            }

            imgList.add(imageId);
        }

        // GridViewのインスタンスを生成
        GridView gridview = findViewById(R.id.gridview);
        // BaseAdapter を継承したGridAdapterのインスタンスを生成
        // 子要素のレイアウトファイル grid_items.xml を
        // activity_main.xml に inflate するためにGridAdapterに引数として渡す
        GridAdapter adapter = new GridAdapter(this.getApplicationContext(),
                R.layout.grid_items,
                imgList,
                members
        );

        // gridViewにadapterをセット
        gridview.setAdapter(adapter);

        // item clickのListnerをセット
        gridview.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Intent intent = new Intent(getApplication(), SubActivity.class);
        intent.putExtra("IMAGEID", imgList.get(position));
        startActivity( intent );
    }
}

//package com.example.testgridview2;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.GridView;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity

implements AdapterView.OnItemClickListener {

// 表示する画像の名前（拡張子無し）

private final String[] members = {

"yumiko", "yuka", "mai", "nagi", "toko",

"kurumi", "miki", "saya", "yuyu","katakuriko",

"yumiko", "yuka", "mai", "nagi", "toko",

"kurumi", "miki", "saya", "yuyu","katakuriko"

};

// Resource IDを格納するarray

private final List<Integer> imgList = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);

return insets;

});

// for-each member名をR.drawable.名前としてintに変換してarrayに登録

for (String member: members){

int imageId;

try {

imageId = R.drawable.class.getField(member).getInt(null);

} catch (NoSuchFieldException | IllegalAccessException e) {

throw new RuntimeException(e);

}

imgList.add(imageId);

}

// GridViewのインスタンスを生成

GridView gridview = findViewById(R.id.gridview);

// BaseAdapter を継承したGridAdapterのインスタンスを生成

// 子要素のレイアウトファイル grid_items.xml を

// activity_main.xml に inflate するためにGridAdapterに引数として渡す

GridAdapter adapter = new GridAdapter(this.getApplicationContext(),

R.layout.grid_items,

imgList,

members

);

// gridViewにadapterをセット

gridview.setAdapter(adapter);

// item clickのListnerをセット

gridview.setOnItemClickListener(this);

}

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Intent intent = new Intent(getApplication(), SubActivity.class);

intent.putExtra("IMAGEID", imgList.get(position));

startActivity( intent );

}

GridAdapter.javaは前と同じです。

遷移先のSubActivity.javaを作成します。
画像のIDを取得して、それを画面いっぱいに表示させます。

SubActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;


public class SubActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sub);

        Intent intent = getIntent();
        int imageId = intent.getIntExtra("IMAGEID", 0);

        ImageView imageView = findViewById(R.id.image_view);
        imageView.setImageResource(imageId);

    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.os.Bundle;

import android.widget.ImageView;

public class SubActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_sub);

Intent intent = getIntent();

int imageId = intent.getIntExtra("IMAGEID", 0);

ImageView imageView = findViewById(R.id.image_view);

imageView.setImageResource(imageId);

}

　
レイアウトです
activity_sub.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">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:contentDescription="@string/description" />

</LinearLayout>

<?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">

<ImageView

android:id="@+id/image_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitCenter"

android:contentDescription="@string/description" />

</LinearLayout>

grid_items.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="#f88"
    android:padding="3dp" >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:scaleType="centerCrop"
        android:contentDescription="@string/description"/>

    <TextView
        android:id="@+id/text_view"
        android:gravity="center"
        android:textSize="18sp"
        android:textColor="#fff"
        android:shadowDx="2"
        android:shadowDy="2"
        android:shadowRadius="2"
        android:shadowColor="#444"
        android:layout_margin="10dp"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

<?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="#f88"

android:padding="3dp" >

<ImageView

android:id="@+id/image_view"

android:layout_width="match_parent"

android:layout_height="140dp"

android:scaleType="centerCrop"

android:contentDescription="@string/description"/>

<TextView

android:id="@+id/text_view"

android:gravity="center"

android:textSize="18sp"

android:textColor="#fff"

android:shadowDx="2"

android:shadowDy="2"

android:shadowRadius="2"

android:shadowColor="#444"

android:layout_margin="10dp"

android:layout_alignParentBottom="true"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</RelativeLayout>

SubActivityをManifestに登録するのを忘れずに
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...

    <application
        ...
        <activity
            android:name=".SubActivity" />
        ...

    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

...

<application

...

<activity

android:name=".SubActivity" />

...

</application>

</manifest>

　
GridAdapter.java

package com.example.testgridview2;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;

public class GridAdapter extends BaseAdapter {

    static class ViewHolder {
        ImageView imageView;
        TextView textView;
    }

    private final List<Integer> imageList;
    private final String[] names;
    private final LayoutInflater inflater;
    private final int layoutId;

    // 引数がMainActivityからの設定と合わせる
    GridAdapter(Context context,
                int layoutId,
                List<Integer> iList,
                String[] members) {

        super();
        this.inflater = (LayoutInflater)
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.layoutId = layoutId;
        imageList = iList;
        names = members;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;
        if (convertView == null) {
            // main.xml の <GridView .../> に grid_items.xml を inflate して convertView とする
            convertView = inflater.inflate(layoutId, parent, false);
            // ViewHolder を生成
            holder = new ViewHolder();

            holder.imageView = convertView.findViewById(R.id.image_view);
            holder.textView = convertView.findViewById(R.id.text_view);

            convertView.setTag(holder);
        }
        else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.imageView.setImageResource(imageList.get(position));
        holder.textView.setText(names[position]);

        return convertView;
    }

    @Override
    public int getCount() {
        // List<String> imgList の全要素数を返す
        return imageList.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

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

package com.example.testgridview2;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import java.util.List;

public class GridAdapter extends BaseAdapter {

static class ViewHolder {

ImageView imageView;

TextView textView;

}

private final List<Integer> imageList;

private final String[] names;

private final LayoutInflater inflater;

private final int layoutId;

// 引数がMainActivityからの設定と合わせる

GridAdapter(Context context,

int layoutId,

List<Integer> iList,

String[] members) {

super();

this.inflater = (LayoutInflater)

context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

this.layoutId = layoutId;

imageList = iList;

names = members;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;

if (convertView == null) {

// main.xml の <GridView .../> に grid_items.xml を inflate して convertView とする

convertView = inflater.inflate(layoutId, parent, false);

// ViewHolder を生成

holder = new ViewHolder();

holder.imageView = convertView.findViewById(R.id.image_view);

holder.textView = convertView.findViewById(R.id.text_view);

convertView.setTag(holder);

}

else {

holder = (ViewHolder) convertView.getTag();

}

holder.imageView.setImageResource(imageList.get(position));

holder.textView.setText(names[position]);

return convertView;

}

@Override

public int getCount() {

// List<String> imgList の全要素数を返す

return imageList.size();

}

@Override

public Object getItem(int position) {

return null;

}

@Override

public long getItemId(int position) {

return 0;

}

　
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/main"
    android:padding="4dp"
    android:background="#aaa"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#888"
        android:gravity="center"
        android:horizontalSpacing="1dp"
        android:verticalSpacing="1dp"
        android:numColumns="2"
        android:stretchMode="columnWidth" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/main"

android:padding="4dp"

android:background="#aaa"

tools:context=".MainActivity">

<GridView

android:id="@+id/gridview"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#888"

android:gravity="center"

android:horizontalSpacing="1dp"

android:verticalSpacing="1dp"

android:numColumns="2"

android:stretchMode="columnWidth" />

</RelativeLayout>

strings.xml

<resources>
    <string name="app_name">TestGridViewItemSelect</string>
    <string name="description">picture</string>
</resources>

<string name="app_name">TestGridViewItemSelect</string>

<string name="description">picture</string>

</resources>

参考記事：

References:
Grid View
TextView | Android Developers