CS-EJ4102 - Mobile Application Development with Android D, 07.09.2020-23.10.2020
This course space end date is set to 23.10.2020 Search Courses: CS-EJ4102
Displaying images on a GridView
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
}
}