Cách thay đổi màu CheckBox trên Android bằng Kotlin

Giới thiệu

Ví dụ đơn giản minh họa cách thay đổi màu chữ (text color) và màu nền (background color) của CheckBox khi nhấn nút bấm, sử dụng Kotlin.

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

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

Android Studio > File > New Project.

Bước 2: 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="#008080"
        android:padding="5dp"
        android:text="TutorialsPoint"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Nhấn vào checkbox"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="16sp"
        android:textStyle="bold" />

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_centerInParent="true"
        android:text="Check box" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/checkbox"
        android:layout_centerInParent="true"
        android:text="Đổi màu" />

</RelativeLayout>

Bước 3: MainActivity.kt

import android.graphics.Color
import android.os.Bundle
import android.widget.Button
import android.widget.CheckBox
import androidx.appcompat.app.AppCompatActivity

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

        val checkBox: CheckBox = findViewById(R.id.checkbox)
        val button: Button = findViewById(R.id.button)

        button.setOnClickListener {
            checkBox.setTextColor(Color.MAGENTA)
            checkBox.setBackgroundColor(Color.parseColor("#cbff75")) // Xanh lá nhạt
        }
    }
}

Bước 4: AndroidManifest.xml

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

    <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

Chạy app, nhấn nút "Đổi màu", CheckBox sẽ đổi chữ thành màu Magenta, nền thành xanh lá nhạt.

Các cách tùy chỉnh CheckBox nâng cao

1. Thay đổi màu nút gạch (tick) - Button Tint (API 21+)

Trong XML: android:buttonTint="@color/your_color" hoặc code: checkBox.buttonTintList = ColorStateList.valueOf(Color.RED).

2. Dùng Drawable tùy chỉnh (Custom Drawable)

Tạo file res/drawable/custom_checkbox.xml (selector):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_checked" android:state_checked="true" />
    <item android:drawable="@drawable/ic_unchecked" android:state_checked="false" />
</selector>

Áp dụng: android:button="@drawable/custom_checkbox" hoặc checkBox.setButtonDrawable(R.drawable.custom_checkbox).

3. MaterialCheckBox (Material Components)

Dùng com.google.android.material.checkbox.MaterialCheckBox trong layout XML, hỗ trợ app:buttonTint, shape, animation mượt mà hơn.

4. Thay đổi màu theo trạng thái (ColorStateList)

val states = arrayOf(
    intArrayOf(android.R.attr.state_checked), // checked
    intArrayOf(-android.R.attr.state_checked) // unchecked
)
val colors = intArrayOf(Color.GREEN, Color.GRAY)
val colorStateList = ColorStateList(states, colors)
checkBox.buttonTintList = colorStateList
checkBox.setTextColor(colorStateList) // Cũng áp dụng cho text nếu muốn