ListView of Images Example in Kotlin

In this Kotlin programming tutorial I will share with you how to use ListView to display list of images. In my example below I will use image as an element in a ListView, but this can be any other UI element or even a view with other elements on it.

Also, this example uses images added to res/drawable folder. So of this code example to work you will need to have an image in your drawable folder to display it.

XML Layout File with ImageView

This layout file defines the skeleton of our single list item. I have saved this file as my_list.xml.

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

</LinearLayout>

Custom Adaptor

With the help of this custom adapter we will inflate every single item with our desired image. I have saved this file as CustomAdapter.kt

import android.view.ViewGroup
import android.app.Activity
import android.view.View
import android.widget.BaseAdapter
import android.widget.ImageView

 
class CustomAdapter(private val context: Activity, private val imageIdList: Array)
    : BaseAdapter() {
    override fun getView(p0: Int, p1: View?, p2: ViewGroup?): View {
        val inflater = context.layoutInflater
        val rowView = inflater.inflate(R.layout.my_list,null)
        val imageView = rowView.findViewById(R.id.image_item)
        imageView.setImageResource(imageIdList[p0])
        return rowView
    }

    override fun getItem(p0: Int): Any {
        return imageIdList.get(p0)
    }

    override fun getItemId(p0: Int): Long {
        return p0.toLong()
    }

    override fun getCount(): Int {
        return imageIdList.size
    }

}

LinearLayout to Hold ImageView

Create a new xml file with the below content. I named my file as activity_image_list.xml. This file contains an empty LinearLayout to which we will add the ListView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/linearLayout"
   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="com.appsdeveloperblog.kotlinexample4.ImageList"
   android:orientation="vertical">

</LinearLayout>

Display List of Images in a ListView

Create a new ImageList.kt file. In this file we will create ListView and populate it with images using the CustomAdapter we have created above. The imageIdList array contains the ID of the images that we want to show in the list.

package com.appsdeveloperblog.kotlinexample4

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.LinearLayout
import android.widget.ListView

class ImageList : AppCompatActivity() {
    var imageIdList = arrayOf<Int>(
            R.drawable.android,
            R.drawable.apple,
            R.drawable.facebook,
            R.drawable.github,
            R.drawable.google,
            R.drawable.microsoft,
            R.drawable.twitter)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_image_list)
        val linearLayout = findViewById<LinearLayout>(R.id.linearLayout)
        val listView = ListView(this)
        val adapter = CustomAdapter(this, imageIdList)
        listView.adapter = adapter
        linearLayout.addView(listView)
    }
}

And this is it. If you run this code example in Android studio you should get a scrollable list of images. Just make sure you add enough images to the list for it to scroll.

I hope this short Kotlin programming tutorial was of some help to you. As always, I encourage you to check the list of books and video courses on Kotlin which I am listing below. You might find something very helpful and helpful in your current project.

If you would like to stay in touch, you can find me on Twitter @kargopolov, Google Plus sergey.kargopolov or subscribe to this blog.

Sergey