Android – RecyclerView with Image

In this tutorial you will learn how to display a list with images in a RecyclerView. To start learning Android Application Development, you will need a computer or laptop and Android Studio, Google’s Integrated Development Environment (IDE). This tutorial makes use of the Kotlin Programming Language. Hence before diving into Android application development, it is recommended to have at least a basic knowledge of the Kotlin Programming Language.

RecyclerView with Image

In our previous tutorial we displayed a fruit list in a RecyclerView. In this tutorial, we are going to redesign our list item with an ImageView to display our fruit’s image and a TextView to display our fruit’s name.

Drag the fruit images in the res > drawable directory.

Replace the code of the strings.xml found in res > values.

<resources>
    <string name="app_name">Sample List Display</string>
    <string name="item">Item</string>
    <string name="fruit_image">Fruit image</string>
</resources>

Replace the code of the list_item.xml with the following codes:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imgFruit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:contentDescription="@string/fruit_image"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/icon_apple" />

        <TextView
            android:id="@+id/txtFruit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="@string/item"
            app:layout_constraintBottom_toBottomOf="@+id/imgFruit"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imgFruit"
            app:layout_constraintTop_toTopOf="@+id/imgFruit" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Let’s add an imageResource property to the FruitData class file.

data class FruitData (
    val id: Long,
    val name: String,
    val imageResource: Int
)

Let’s set the appropriate image to the ImageView in the method bind() of the FruitAdapter class file.

fun bind(fruitData: FruitData) {
    binding.txtFruit.text = fruitData.name
    binding.imgFruit.setImageResource(fruitData.imageResource)
    binding.executePendingBindings()
}

Replace the method getFruitList() of the MainActivity class file with the following:

private fun getFruitList(): List<FruitData> = listOf(
        FruitData(1, "Apple", R.drawable.icon_apple),
        FruitData(2, "Banana", R.drawable.icon_banana),
        FruitData(3, "Orange", R.drawable.icon_orange),
        FruitData(4, "Pineapple", R.drawable.icon_pineapple),
        FruitData(5, "Grape", R.drawable.icon_grape),
        FruitData(6, "Kiwifruit", R.drawable.icon_kiwi),
        FruitData(7, "Pears", R.drawable.icon_pear),
        FruitData(8, "Grapefruit", R.drawable.icon_grapefruit),
        FruitData(9, "Peach", R.drawable.icon_peach),
        FruitData(10, "Apricot", R.drawable.icon_apricot),
        FruitData(11, "Plum", R.drawable.icon_plum),
        FruitData(12, "Mango", R.drawable.icon_mango),
        FruitData(13, "Strawberry", R.drawable.icon_strawberry),
        FruitData(14, "Blueberry", R.drawable.icon_blueberry),
        FruitData(15, "Raspberry", R.drawable.icon_raspberry),
        FruitData(16, "Blackberry", R.drawable.icon_blackberry),
        FruitData(17, "Cranberry", R.drawable.icon_cranberry),
        FruitData(18, "Passionfruit", R.drawable.icon_passion_fruit),
        FruitData(19, "Watermelons", R.drawable.icon_watermelon),
        FruitData(20, "Cantaloupe", R.drawable.icon_cantaloupe),
        FruitData(21, "Date Fruit", R.drawable.icon_date_fruit),
        FruitData(22, "Lemon", R.drawable.icon_lemon),
        FruitData(23, "Lychee", R.drawable.icon_lychee),
        FruitData(24, "Papaya", R.drawable.icon_papaya),
        FruitData(25, "Dragonfruit", R.drawable.icon_dragon_fruit),
        FruitData(26, "Pomegranate", R.drawable.icon_pomegranate)
    )

Run the project. You should now have an app that displays a list of some fruits with their corresponding images.

Well done! 😀 You created an app to display a list with images. Awesome! 😀