Display Images in GridView Android Example

Put the image in drawable folder.

GridView is a ViewGroup that displays items in two-dimensional scrolling grid. GridView is mostly used to display images or icons.

In the activity_main.xml file, we have used GridView to display images.

/layout/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"
    tools:context=".MainActivity">
        
    <GridView
        android:id="@+id/gridview"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:columnWidth="100dp"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:numColumns="auto_fit"/>

</RelativeLayout>

Create another layout image_list.xml and use ImageView.

/layout/image_list.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="#21bfaf">
        
    <ImageView
        android:id="@+id/image"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:scaleType="fitXY"/>

</RelativeLayout>

Create imageModel.java file and add the getter and setter method.

/imageModel.java

package zon.gidview.com;

public class imageModel {
    int mThumbIds;
    public int getmThumbIds() {
        return mThumbIds;
    }
    public void setmThumbIds(int mThumbIds) {
        this.mThumbIds = mThumbIds;
    }
}

Note: If you are displaying multiple images, then you have to use the android image loading and caching library.

Create imageAdapter.java file and extends BaseAdapter.

/imageAdapter.java

package zon.gidview.com;

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 java.util.ArrayList;

public class imageAdapter extends BaseAdapter {
    Context context; 
    ArrayList<imageModel> arrayList;
    public imageAdapter(Context context, ArrayList<imageModel> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }
    @Override
    public int getCount() {
        return arrayList.size();
    }
    @Override
    public Object getItem(int position) {
        return arrayList.get(position);
    }
    @Override
    public long getItemId(int i) {
        return i;
    }
    @Override
    public  View getView(int position, View convertView, ViewGroup parent) {
        if (convertView ==  null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.image_list, parent, false);
        }
        ImageView imageView;
        imageView = (ImageView) convertView.findViewById(R.id.image);
        imageView.setImageResource(arrayList.get(position).getmThumbIds());
        return convertView;
     }
}

In this MainActivity.java file, we have created an object of imageAdapter and set that object in GridView by using the setAdapter() method.

/MainActivity.java

package zon.gidview.com;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    int image[] = {R.drawable.ic_android_black_24dp,
                R.drawable.ic_announcement_black_24dp,
                R.drawable.ic_add_a_photo_black_24dp,
                R.drawable.ic_airline_seat_recline_extra_black_24dp,
                R.drawable.ic_security_black_24dp,
                R.drawable.ic_sentiment_satisfied_black_24dp,
                R.drawable.ic_sentiment_neutral_black_24dp,
                R.drawable.ic_rowing_black_24dp,
                R.drawable.ic_time_to_leave_black_24dp,
                R.drawable.ic_airplanemode_active_black_24dp,
                R.drawable.ic_airport_shuttle_black_24dp,
                R.drawable.ic_directions_bike_black_24dp,
                R.drawable.ic_grade_black_24dp,
                R.drawable.ic_local_florist_black_24dp,
                R.drawable.ic_vpn_lock_black_24dp};
    GridView gridView;
    ArrayList<imageModel> arrayList;
    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = (GridView) findViewById(R.id.gridview);
        arrayList = new ArrayList<>();
        for (int i = 0; i < image.length; i++) {
            imageModel imagemodel = new imageModel();
            imagemodel.setmThumbIds(image[i]);
            //add in array list
            arrayList.add(imagemodel);
        }
		
        imageAdapter adpter= new imageAdapter(getApplicationContext(), arrayList);
        gridView.setAdapter(adpter);    
        //item click listner
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
            }
        });
    }
}