ListView Image and Text with Kotlin and Android Studio

android listview with image and text using kotlin

ListView is a view list group items and display them in the vertical list, list item are automatically insert data to list group with Adapter, data Adapter is pulled from source such as array/database. Adapter actually bridges the UI Component/Interface with data source that insert data into UI Component, adapter can takes data from data store and sends data to adapter view then show to ListView, Spinner, GridView, etc.

To create android listview with images and 2 text you can follow step by step such as below

1. Create new project in Android Studio with including Kotlin

2. Add code below (listview) to activity_main.xml in res/layout folder

<ListView
    android:id="@+id/mylistview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3. Create new XML Layout (LinearLayout) and give name activity_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="8dp">

    <ImageView
        android:id="@+id/image_listview"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:scaleType="centerCrop" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="8dp">

        <TextView
            android:id="@+id/title_listview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="#000000"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description_listview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="5dp"
            android:textColor="#000000"
            android:textSize="12sp" />
    </LinearLayout>
</LinearLayout>

4. Create new Kotlin Class and give name ModelView.kt

public class ModelView {
    
    var list_title : String = ""
    var list_desc : String = ""
    var list_image : Int = 0

    constructor(list_title: String, list_image: Int, list_desc: String){
        this.list_image = list_image
        this.list_title = list_title
        this.list_desc = list_desc

    }
}

5. Create Adapter Kotlin Class and give name AdapterListview.kt

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

class AdapterListview(context: Context, baris: ArrayList<ModelView>) : BaseAdapter() {
    
    private val mInflator : LayoutInflater
    private val baris : ArrayList<ModelView>

    init {
        this.mInflator = LayoutInflater.from(context)
        this.baris=baris
    }

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

    override fun getItem(position: Int): Any {
        return baris.get(position)
    }

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

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View? {
        val view: View?
        val daftar: ListRowHolder
        if (convertView == null) {
            view = this.mInflator.inflate(R.layout.activity_listview, parent, false)
            daftar = ListRowHolder(view)
            view.tag = daftar
        } else {
            view = convertView
            daftar = view.tag as ListRowHolder
        }

        daftar.title_item.text = baris.get(position).list_title
        daftar.desc_item.text = baris.get(position).list_desc
        daftar.image_item.setImageResource(baris.get(position).list_image)
        return view
    }
}

private class ListRowHolder(row: View?) {
    public val title_item : TextView
    public val desc_item : TextView
    public val image_item : ImageView

    init {
        this.title_item = row?.findViewById<TextView>(R.id.title_listview) as TextView
        this.desc_item = row?.findViewById<TextView>(R.id.description_listview) as TextView
        this.image_item = row?.findViewById<ImageView>(R.id.image_listview) as ImageView
    }
}

6. Edit MainActivity.kt and Import dependencies plugin

import android.app.Activity
import android.os.Bundle
import android.widget.ListView

7. Add this code into function onCreate in MainActivity.kt

val baris = ArrayList<ModelView>()
baris.add(ModelView("Online Security", R.drawable.image1,"............."))
baris.add(ModelView("Work Hard", R.drawable.image2,"............."))
baris.add(ModelView("Okay Company", R.drawable.image3,"............."))
baris.add(ModelView("Free Download", R.drawable.image4,"............."))
baris.add(ModelView("Bag Career", R.drawable.image5,"............."))
baris.add(ModelView("Gallery Image", R.drawable.image6,"............."))
baris.add(ModelView("Sephia Nature", R.drawable.image7,"............."))
baris.add(ModelView("Personal People", R.drawable.image8,"............."))
baris.add(ModelView("Sunset Nature", R.drawable.image9,"............."))
baris.add(ModelView("Nebula Space", R.drawable.image0,"............."))

val myobject : AdapterListview
val mylistview = findViewById<ListView>(R.id.mylistview) as ListView
myobject = AdapterListview(applicationContext, baris)
mylistview.adapter = myobject

8. Done!

Full source code Android ListView with Images and 2 Text using Kotlin such as below

activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kautube.test.listview.MainActivity">

    <ListView
        android:id="@+id/mylistview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

activity_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="8dp">

    <ImageView
        android:id="@+id/image_listview"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:scaleType="centerCrop" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="8dp">

        <TextView
            android:id="@+id/title_listview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="#000000"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description_listview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="5dp"
            android:textColor="#000000"
            android:textSize="12sp" />
    </LinearLayout>
</LinearLayout>

ModelView.kt

/**
 * Created by TedirGhazali on 07/01/2018.
 */
public class ModelView {
    
    var list_title : String = ""
    var list_desc : String = ""
    var list_image : Int = 0

    constructor(list_title: String, list_image: Int, list_desc: String){
        this.list_image = list_image
        this.list_title = list_title
        this.list_desc = list_desc

    }
}

AdapterListview.kt

/**
 * Created by TedirGhazali on 07/01/2018.
 */
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

class AdapterListview(context: Context, baris: ArrayList<ModelView>) : BaseAdapter() {
    
    private val mInflator : LayoutInflater
    private val baris : ArrayList<ModelView>

    init {
        this.mInflator = LayoutInflater.from(context)
        this.baris=baris
    }

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

    override fun getItem(position: Int): Any {
        return baris.get(position)
    }

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

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View? {
        val view: View?
        val daftar: ListRowHolder
        if (convertView == null) {
            view = this.mInflator.inflate(R.layout.activity_listview, parent, false)
            daftar = ListRowHolder(view)
            view.tag = daftar
        } else {
            view = convertView
            daftar = view.tag as ListRowHolder
        }

        daftar.title_item.text = baris.get(position).list_title
        daftar.desc_item.text = baris.get(position).list_desc
        daftar.image_item.setImageResource(baris.get(position).list_image)
        return view
    }
}

private class ListRowHolder(row: View?) {
    public val title_item : TextView
    public val desc_item : TextView
    public val image_item : ImageView

    init {
        this.title_item = row?.findViewById<TextView>(R.id.title_listview) as TextView
        this.desc_item = row?.findViewById<TextView>(R.id.description_listview) as TextView
        this.image_item = row?.findViewById<ImageView>(R.id.image_listview) as ImageView
    }
}

MainActivity.kt

import android.app.Activity
import android.os.Bundle
import android.widget.ListView

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val baris = ArrayList<ModelView>()
        baris.add(ModelView("Online Security", R.drawable.image1,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus porta arcu, et auctor nibh tempus in. In non feugiat ante"))
        baris.add(ModelView("Work Hard", R.drawable.image2,"Proin sed purus in lacus ornare sodales sit amet quis diam. Vestibulum congue eros ac hendrerit congue. Quisque ut sagittis ex"))
        baris.add(ModelView("Okay Company", R.drawable.image3,"Ut lobortis nibh vel eros volutpat facilisis. Fusce consectetur tempor dignissim. Sed sodales sem eu sapien tincidunt convallis"))
        baris.add(ModelView("Free Download", R.drawable.image4,"Cras ornare quam nec sagittis viverra. Maecenas efficitur diam at sapien ullamcorper, eget ultrices eros feugiat. Ut urna tellus"))
        baris.add(ModelView("Bag Career", R.drawable.image5,"blandit ac nunc vel, congue rhoncus turpis. Donec odio purus, pulvinar in massa in, accumsan accumsan lorem. Nunc tempor sapien id porta tempus"))
        baris.add(ModelView("Gallery Image", R.drawable.image6,"Aliquam venenatis consequat nulla, quis facilisis massa viverra vitae. Phasellus eget leo ut ligula blandit tempor vel vel metus"))
        baris.add(ModelView("Sephia Nature", R.drawable.image7,"Cras magna ante, blandit eu ultricies id, vulputate sit amet libero. Interdum et malesuada fames ac ante ipsum primis in faucibus"))
        baris.add(ModelView("Personal People", R.drawable.image8,"Praesent sit amet velit ex. Nullam id fermentum tellus. Sed posuere egestas porta. Orci varius natoque penatibus et magnis dis parturient montes"))
        baris.add(ModelView("Sunset Nature", R.drawable.image9,"nascetur ridiculus mus. Vivamus congue, magna ac facilisis rhoncus, arcu est accumsan neque, tristique ullamcorper libero leo vel nibh"))
        baris.add(ModelView("Nebula Space", R.drawable.image0,"Maecenas id mauris diam. Nunc a mattis est, in dictum libero. Suspendisse tempor pulvinar lorem eget imperdiet. Mauris nulla leo"))

        val myobject : AdapterListview
        val mylistview = findViewById<ListView>(R.id.mylistview) as ListView
        myobject = AdapterListview(applicationContext, baris)
        mylistview.adapter = myobject
    }
}

Screenshot Android ListView with Images and 2 Text using Kotlin such as below

android listview with image and text using kotlin

Download source code Android ListView with Images and 2 Text using Kotlin

Download