CS-EJ4102 - Mobile Application Development with Android D, 07.09.2020-23.10.2020

In this tutorial, you will learn how to use a GridView to display images. Same approach can be used for other controls including ListView.

Creating the layout for the GridView

First, we create the layout for the GridView 

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/gridImages"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="30dp"
       android:columnWidth="150dp"
       android:horizontalSpacing="15dp"
       android:numColumns="auto_fit"
       android:verticalSpacing="15dp"
       app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Next, we require another layout to represent each element of the GridView. In this case, we use an ImageView and a TextView

res/layout/image_entry.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="150dp"
   android:layout_height="wrap_content"
   android:background="#ddd"
   android:gravity="center"
   android:orientation="vertical"
   android:padding="15dp">
   <ImageView
       android:id="@+id/image"
       android:layout_width="150dp"
       android:layout_height="120dp"
       app:srcCompat="@drawable/phone"/>
   <TextView
       android:id="@+id/name"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:gravity="center"
       android:textSize="20sp" />
</LinearLayout>

Defining a class in Kotlin

Once defined the layouts, we need to represent each item of the GridView as an entity. To this end, we define a class called Image

Image.kt



package com.example.imagegrid
class Image {
   var name: String? = null
   var image: Int? = null
   constructor(name: String, image: Int) {
       this.name = name
       this.image = image
   }
}

Creating a custom adapter

To display the images on the GridView, we have to create a custom adapter. For this example, we define a class which extends from the BaseAdapter class. This class has an ArrayList<Image> as parameter. 

ImageAdapter.kt



package com.example.imagegrid
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import kotlinx.android.synthetic.main.image_entry.view.*

class ImageAdapter : BaseAdapter {
   var imgList = ArrayList<Image>()
   var context: Context? = null

   constructor(context: Context, imgList: ArrayList<Image>) : super() {
       this.context = context
       this.imgList = imgList
   }
   override fun getCount(): Int {
       return imgList.size
       // returns number of items in the list
   }
   override fun getItem(position: Int): Any {
       return imgList[position]
       // returns item a specific position
   }
   override fun getItemId(position: Int): Long {
       return position.toLong()
   }
   override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
       // get item to be displayed 
       val img = this.imgList[position]
       // inflate the layout for each item
       var inflator = context!!.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
       // link item layout with inflator 
       var imgView = inflator.inflate(R.layout.image_entry, null)
       // set image to ImageView 
       imgView.image.setImageResource(img.image!!)
       // set text to TextView 
       imgView.name.text = img.name!!
       return imgView
   }
}

Using the CustomAdapter

Finally, we use the adapter to show the GridView. For this example, the images are stored in the folder res/drawable

package com.example.imagegrid
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.GridView

class MainActivity : AppCompatActivity() {

   var adapter: ImageAdapter? = null
   var imgsList = ArrayList<Image>()

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       // create array of items of type <Image>
       imgsList.add(Image("Phone", R.drawable.phone))
       imgsList.add(Image("Laptop", R.drawable.laptop))
       imgsList.add(Image("TV", R.drawable.tv))
       // create ImageAdapter and set array of items
       adapter = ImageAdapter(this, imgsList)

       // get reference to the GridView from the layout
       val gridView = findViewById<GridView>(R.id.gridImages)
       gridView.adapter=adapter

   }
}