Cách thay đổi màu sắc và font chữ của ListView Android bằng Kotlin

Giới thiệu

Ví dụ này minh họa cách tùy chỉnh màu sắc và kiểu font cho các mục trong ListView trên Android bằng ngôn ngữ Kotlin. Chúng ta sẽ tạo một layout tùy chỉnh cho từng item và áp dụng nó thông qua ArrayAdapter.

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 các thông tin cần thiết và tạo dự án mới.

Bước 2: Cấu hình layout chính (activity_main.xml)

Thêm mã sau vào res/layout/activity_main.xml. Lưu ý: File này chỉ chứa tiêu đề minh họa, ListView thực tế sẽ được định nghĩa ở bước sau.

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-condensed"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="24sp"
        android:textStyle="italic|bold" />

</LinearLayout>

Bước 3: Viết code Kotlin (MainActivity.kt)

Cập nhật src/MainActivity.kt để thiết lập ListView với adapter tùy chỉnh:

import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.ListView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private val operatingSystem = arrayOf(
        "Android", "iPhone", "WindowsMobile", "Blackberry",
        "WebOS", "Ubuntu", "Windows7", "Mac OS X"
    )

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

        val listView: ListView = findViewById(R.id.listView)
        val adapter = object : ArrayAdapter<String>(
            this, R.layout.list_item, R.id.textView, operatingSystem
        ) {}
        listView.adapter = adapter
    }
}

Bước 4: Tạo layout cho item (list_item.xml)

Tạo file layout resource mới tên list_item.xml trong thư mục res/layout với nội dung sau. Đây là nơi định nghĩa màu sắc, font chữ cho từng dòng:

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-condensed"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="24sp"
        android:textStyle="italic|bold" />

</LinearLayout>

Bước 5: Cấu hình AndroidManifest.xml

Đảm bảo file manifest khai báo activity chính:

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

    <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ị Android thật hoặc sử dụng emulator. Trong Android Studio, nhấn biểu tượng Run (mũi tên xanh) trên thanh công cụ, chọn thiết bị và quan sát kết quả. ListView sẽ hiển thị các hệ điều hành với font chữ nghiêng in đậm, màu cam đậm và cỡ 24sp.

Lưu ý quan trọng

• ID của TextView trong list_item.xml (@+id/textView) phải khớp với tham số R.id.textView truyền vào ArrayAdapter.
• Có thể thay thế android:fontFamily bằng font tùy chỉnh đặt trong thư mục res/font.
• Để thay đổi màu nền item, thêm android:background vào LinearLayout cha.