Skip to main content

How to create a horizontal RecyclerView in Kotlin Android

How to create a horizontal RecyclerView in Kotlin Android.

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

Step 1: Create a new Android project​

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

Step 2: Add RecyclerView dependency​

Open the app-level build.gradle file and add the RecyclerView dependency to the dependencies block:

implementation 'androidx.recyclerview:recyclerview:1.2.1'

Then sync the project to update the dependencies.

Step 3: Create the RecyclerView layout​

In the res/layout folder, create a new XML layout file for the RecyclerView. For this tutorial, let's name it item_horizontal_list.xml. Add a RecyclerView widget to the layout file with the following properties:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

Step 4: Create the RecyclerView item layout​

Create another XML layout file in the res/layout folder for the item layout of the RecyclerView. For this tutorial, let's name it item_horizontal.xml. Customize the layout as per your requirements.

Step 5: Create the RecyclerView adapter​

Create a new Kotlin class for the RecyclerView adapter. Let's name it HorizontalAdapter. Extend the RecyclerView.Adapter class and implement the required methods.

class HorizontalAdapter(private val itemList: List<String>) : RecyclerView.Adapter<HorizontalAdapter.ViewHolder>() {

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = itemList[position]
        holder.bind(item)
    }
    
    override fun getItemCount(): Int {
        return itemList.size
    }

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bind(item: String) {
            // Bind data to views here
        }
    }
}

Step 6: Initialize the RecyclerView​

In your activity or fragment, initialize the RecyclerView and set its adapter:

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
val itemList: List<String> = listOf("Item 1", "Item 2", "Item 3") // Replace with your own data
val adapter = HorizontalAdapter(itemList)
recyclerView.adapter = adapter

Step 7: Set the RecyclerView layout manager​

To display the items horizontally, set the layout manager of the RecyclerView to LinearLayoutManager with horizontal orientation:

recyclerView.layoutManager = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)

Step 8: Customize the RecyclerView item layout​

Open the item_horizontal.xml layout file and customize it according to your needs. Add the necessary views and design elements to represent each item in the RecyclerView.

Step 9: Implement item click listener (optional)​

If you want to handle item click events, you can add a click listener to the views in the ViewHolder class. For example, you can add an OnClickListener to a button:

inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    fun bind(item: String) {
        val button: Button = itemView.findViewById(R.id.button)
        button.setOnClickListener {
            // Handle item click here
        }
    }
}

That's it! You have successfully created a horizontal RecyclerView in Kotlin for Android. You can now run your app to see the RecyclerView in action.