Cách thay đổi màu DatePicker Dialog trong Android

Giới thiệu

Bài viết này hướng dẫn thay đổi màu nền của DatePicker (chế độ Calendar View) bằng thuộc tính android:background trong XML. Đây là cách đơn giản nhất, tuy nhiên tùy chỉnh sâu (màu header, nút, divider...) cần dùng theme/style hoặc DatePickerDialog tùy chỉnh.

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 và tạo dự án.

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

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

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#6495ED" /> <!-- Màu xanh cornflower blue -->

</RelativeLayout>

Bước 3: Viết code logic (src/MainActivity.java)

import android.annotation.TargetApi;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.DatePicker;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    @TargetApi(Build.VERSION_CODES.O)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        DatePicker datePicker = findViewById(R.id.datePicker);
        datePicker.setOnDateChangedListener((view, year, monthOfYear, dayOfMonth) -> {
            // monthOfYear là 0-based (0=Tháng 1)
            String msg = "Ngày đã chọn: " + dayOfMonth + " - " + (monthOfYear + 1) + " - " + year;
            Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
        });
    }
}

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <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. DatePicker hiển thị với nền màu xanh (#6495ED). Chọn ngày -> Toast hiển thị ngày/tháng/năm.

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

1. Dùng Theme/Style (khuyên dùng cho Material Design)

<!-- res/values/styles.xml -->
<style name="CustomDatePicker" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF5722</item> <!-- Màu header, nút chọn -->
    <item name="colorPrimary">#3F51B5</item>
    <item name="android:colorBackground">#FFFFFF</item> <!-- Màu nền -->
</style>

<!-- Áp dụng cho DatePickerDialog -->
DatePickerDialog dialog = new DatePickerDialog(this, R.style.CustomDatePicker, listener, year, month, day);

2. DatePickerDialog (hộp thoại) thay vì widget inline

DatePickerDialog dialog = new DatePickerDialog(
    this,
    (view, year, month, day) -> { /* xử lý */ },
    2024, 5, 15 // năm, tháng (0-based), ngày mặc định
);
dialog.show();

3. MaterialDatePicker (Thư viện Material Components - hiện đại nhất)

implementation 'com.google.android.material:material:1.10.0'

MaterialDatePicker<Long> picker = MaterialDatePicker.Builder.datePicker()
    .setTitleText("Chọn ngày")
    .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
    .build();

picker.addOnPositiveButtonClickListener(selection -> {
    // selection là timestamp (ms)
});
picker.show(getSupportFragmentManager(), "DATE_PICKER");

Lưu ý

• android:background chỉ đổi màu nền widget DatePicker inline, không ảnh hưởng DatePickerDialog
• Month trong DatePicker là 0-based (0 = Tháng 1), cần +1 khi hiển thị
• API 24+ (Nougat) DatePicker mặc định dùng Calendar View (lịch), API cũ dùng Spinner
• Để đổi màu văn bản, ngày hôm nay, divider... cần custom theme hoặc dùng MaterialDatePicker