Tạo Horizontal ListView (RecyclerView ngang) trong Android bằng Kotlin

Giới thiệu

Ví dụ này minh họa cách tạo danh sách cuộn ngang (Horizontal ListView) sử dụng RecyclerView với LinearLayoutManager.HORIZONTAL trong Android Kotlin.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project, điền thông tin để tạo dự án.

Bước 2: Giao diện chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/rlMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical">

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

</LinearLayout>

Bước 3: Model dữ liệu (MovieModel.kt)

data class MovieModel(
    val title: String,
    val genre: String,
    val year: String
)

Sử dụng data class để code gọn nhẹ hơn.

Bước 4: Adapter (MoviesAdapter.kt)

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.annotation.NonNull
import androidx.recyclerview.widget.RecyclerView

class MoviesAdapter(private val moviesList: List<MovieModel>) :
    RecyclerView.Adapter<MoviesAdapter.MyViewHolder>() {

    inner class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val title: TextView = view.findViewById(R.id.title)
        val year: TextView = view.findViewById(R.id.year)
        val genre: TextView = view.findViewById(R.id.genre)
    }

    @NonNull
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val itemView = LayoutInflater.from(parent.context)
            .inflate(R.layout.movie_list, parent, false)
        return MyViewHolder(itemView)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val movie = moviesList[position]
        holder.title.text = movie.title
        holder.genre.text = movie.genre
        holder.year.text = movie.year
    }

    override fun getItemCount(): Int = moviesList.size
}

Bước 5: Layout item (res/layout/movie_list.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="150dp"
    android:layout_margin="8dp"
    app:cardBackgroundColor="@android:color/holo_red_dark"
    app:cardCornerRadius="8dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="8dp">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_toStartOf="@id/year"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/year"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/genre"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:textColor="@android:color/white" />

    </RelativeLayout>
</androidx.cardview.widget.CardView>

Bước 6: MainActivity.kt

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

class MainActivity : AppCompatActivity() {
    private val movieList = mutableListOf<MovieModel>()
    private lateinit var moviesAdapter: MoviesAdapter

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

        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
        moviesAdapter = MoviesAdapter(movieList)

        val layoutManager = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)
        recyclerView.layoutManager = layoutManager
        recyclerView.itemAnimator = DefaultItemAnimator()
        recyclerView.adapter = moviesAdapter

        prepareMovieData()
    }

    private fun prepareMovieData() {
        movieList.addAll(listOf(
            MovieModel("Mad Max: Fury Road", "Action & Adventure", "2015"),
            MovieModel("Inside Out", "Animation, Kids & Family", "2015"),
            MovieModel("Star Wars: Episode VII - The Force Awakens", "Action", "2015"),
            MovieModel("Shaun the Sheep", "Animation", "2015"),
            MovieModel("The Martian", "Science Fiction & Fantasy", "2015"),
            MovieModel("Mission: Impossible Rogue Nation", "Action", "2015"),
            MovieModel("Up", "Animation", "2009"),
            MovieModel("Star Trek", "Science Fiction", "2009"),
            MovieModel("The LEGO Movie", "Animation", "2014"),
            MovieModel("Iron Man", "Action & Adventure", "2008"),
            MovieModel("Aliens", "Science Fiction", "1986"),
            MovieModel("Chicken Run", "Animation", "2000"),
            MovieModel("Back to the Future", "Science Fiction", "1985"),
            MovieModel("Raiders of the Lost Ark", "Action & Adventure", "1981"),
            MovieModel("Goldfinger", "Action & Adventure", "1965"),
            MovieModel("Guardians of the Galaxy", "Science Fiction & Fantasy", "2014")
        ))
        moviesAdapter.notifyDataSetChanged()
    }
}

Bước 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run, chọn thiết bị. Màn hình sẽ hiển thị danh sách phim cuộn ngang.