Cách thay đổi kích thước và màu chữ Spinner trên Android bằng Kotlin

Giới thiệu

Hướng dẫn này trình bày cách tùy chỉnh giao diện item của Spinner (kích thước chữ, màu chữ, style) trên Android bằng cách tạo layout tùy chỉnh cho adapter, sử dụng Kotlin.

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

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

Tạo project: File → New Project.

Bước 2: Thiết kế giao diện chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Bước 3: Tạo layout item tùy chỉnh (res/layout/spinner_item.xml)

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="@android:color/holo_red_light"
    android:textSize="16sp"
    android:textStyle="bold|italic" />

Bước 4: Xử lý logic (src/MainActivity.kt)

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

class MainActivity : AppCompatActivity() {
    private lateinit var spinner: Spinner

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

        spinner = findViewById(R.id.spinner)

        val superHero = arrayOf("Batman", "SuperMan", "Flash", "AquaMan", "Shazam")

        // Tạo adapter với layout tùy chỉnh
        val arrayAdapter = ArrayAdapter(
            this,
            R.layout.spinner_item, // Layout cho item hiển thị khi spinner đóng
            superHero
        )

        // Layout cho dropdown item (khi spinner mở)
        arrayAdapter.setDropDownViewResource(R.layout.spinner_item)

        spinner.adapter = arrayAdapter
    }
}

Bước 5: Cấu hình Manifest (androidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.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. Spinner sẽ hiển thị danh sách siêu anh hùng với chữ đỏ, size 16sp, bold italic.

Giải thích

• ArrayAdapter(context, layout, data): Constructor nhận layout resource ID cho item.
• setDropDownViewResource(): Đặt layout cho danh sách thả xuống (dropdown). Nếu không set, dùng layout mặc định.
• Có thể dùng 2 layout khác nhau cho selected view và dropdown view.

Tùy chỉnh nâng cao: Custom Adapter

Để kiểm soát hoàn toàn (hình ảnh, nhiều text, logic phức tạp), tạo custom adapter:

class CustomSpinnerAdapter(
    context: Context,
    private val items: List
) : ArrayAdapter(context, 0, items) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createView(position, convertView, parent)
    }

    override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createView(position, convertView, parent)
    }

    private fun createView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.spinner_item_custom, parent, false)
        val hero = items[position]
        view.findViewById(R.id.tvName).text = hero.name
        view.findViewById(R.id.ivIcon).setImageResource(hero.iconRes)
        return view
    }
}

// Data class
data class Hero(val name: String, val iconRes: Int)

Layout item tùy chỉnh nâng cao (res/layout/spinner_item_custom.xml)

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="12dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/ivIcon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginEnd="12dp" />

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="@android:color/black"
        android:textStyle="bold" />

</LinearLayout>

Lưu ý

• Spinner sử dụng AdapterView pattern cũ. Khuyến nghị dùng MaterialAutoCompleteTextBox (Material Components) hoặc ExposedDropdownMenu cho UI hiện đại hơn.
• Trên Android 11+, dropdown menu có thể bị giới hạn chiều cao.