How to implement a horizontal ListView in Kotlin Android

How to implement a horizontal ListView in Kotlin Android.

Here's a step-by-step tutorial on how to implement a horizontal ListView in Kotlin for Android:

Step 1: Create a new project

Start by creating a new Android project in Android Studio. Choose an appropriate name for your project and select Kotlin as the programming language.

Step 2: Add the required dependencies

Open the build.gradle file for your app module and add the following dependency for the RecyclerView:

implementation 'androidx.recyclerview:recyclerview:1.2.1'

Sync your project to download the dependency.

Step 3: Create the layout for the horizontal ListView Open the activity_main.xml file and replace the existing code with the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" />

</LinearLayout>

Step 4: Create the item layout for the ListView

Create a new layout file called item_layout.xml and add the following code:

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item" />

</LinearLayout>

Step 5: Create a data model for the ListView items Create a new Kotlin file called Item.kt and add the following code:

data class Item(val imageResId: Int, val name: String)

Step 6: Create an adapter for the ListView

Create a new Kotlin file called ItemAdapter.kt and add the following code:

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.item_layout.view.*

class ItemAdapter(private val items: List<Item>) :
    RecyclerView.Adapter<ItemAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view =
            LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        holder.itemView.imageView.setImageResource(item.imageResId)
        holder.itemView.textView.text = item.name
    }

    override fun getItemCount(): Int {
        return items.size
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

Step 7: Initialize the ListView in the MainActivity Open the MainActivity.kt file and add the following code:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView
    private lateinit var itemAdapter: ItemAdapter

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

        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager =
            LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)

        val items = listOf(
            Item(R.drawable.image1, "Item 1"),
            Item(R.drawable.image2, "Item 2"),
            Item(R.drawable.image3, "Item 3"),
            Item(R.drawable.image4, "Item 4"),
            Item(R.drawable.image5, "Item 5")
        )

        itemAdapter = ItemAdapter(items)
        recyclerView.adapter = itemAdapter
    }
}

Step 8: Run the app

Build and run the app on an Android device or emulator. You should see a horizontal ListView with the items and their respective images and names.

That's it! You have successfully implemented a horizontal ListView in Kotlin for Android. You can customize the item layout and add more items as needed.