Android Studio自定义TimePicker时钟颜色及样式修改问题

• 需求：将TimePicker改为独立布局的自定义组件，方便后续修改；把时钟颜色改为secondary（当前修改无效）；修改“:”和“AM/PM”的背景。

当前使用的样式代码 #

<style name="TimePickerDark" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/secondary</item>
        <item name="colorControlActivated">@color/primary</item>
        <item name="android:headerBackground">@color/primary</item>
        <item name="android:selectableItemBackgroundBorderless">@color/background</item>
        <item name="android:background">@color/background</item>
        <item name="android:windowBackground">@color/background</item>
        <item name="android:numbersBackgroundColor">@color/background</item>
        <item name="android:textColor">#4CAF50</item>
        <item name="android:amPmBackgroundColor">@color/secondary</item>
        <item name="android:color">@color/secondary</item>
        <item name="android:colorForeground">@color/background</item>
        <item name="fontFamily">@font/circular_medium</item>
        <item name="android:fontFamily">@font/circular_regular</item>
        <item name="android:textColorSecondary">@color/primary</item>
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:textColorPrimaryInverse">@color/white</item>
        <item name="android:textColorSecondaryInverse">@color/light</item>
    </style>

TimePickerDialog初始化代码 #

taskTime.setOnTouchListener((view, motionEvent) -> {
            if(motionEvent.getAction() == MotionEvent.ACTION_UP) {
                // 获取当前时间
                final Calendar c = Calendar.getInstance();
                mHour = c.get(Calendar.HOUR_OF_DAY);
                mMinute = c.get(Calendar.MINUTE);

                // 弹出时间选择对话框
                timePickerDialog = new TimePickerDialog(getActivity(), R.style.TimePickerDark, (view12, hourOfDay, minute) -> {
                    taskTime.setText(hourOfDay + ":" + minute);
                    timePickerDialog.dismiss();
                }, mHour, mMinute, false);

                timePickerDialog.show();
            }
            return true;
        });

解决方案 #

1. 解决时钟颜色不生效问题 #

Android自带TimePickerDialog的部分样式属性无法仅通过Dialog主题覆盖，建议改用自定义布局的TimePicker，可控性更强：

• 创建layout/custom_time_picker.xml布局文件：

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

    <TimePicker
        android:id="@+id/custom_time_picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/TimePickerDark"
        android:numbersBackgroundColor="@color/background"
        android:textColor="@color/secondary"/>
</LinearLayout>

• 修改初始化代码，通过AlertDialog加载自定义布局：

taskTime.setOnTouchListener((view, motionEvent) -> {
    if(motionEvent.getAction() == MotionEvent.ACTION_UP) {
        final Calendar c = Calendar.getInstance();
        mHour = c.get(Calendar.HOUR_OF_DAY);
        mMinute = c.get(Calendar.MINUTE);

        // 加载自定义布局
        View customView = LayoutInflater.from(getActivity()).inflate(R.layout.custom_time_picker, null);
        TimePicker timePicker = customView.findViewById(R.id.custom_time_picker);
        timePicker.setHour(mHour);
        timePicker.setMinute(mMinute);

        // 构建对话框
        new AlertDialog.Builder(getActivity(), R.style.TimePickerDark)
                .setView(customView)
                .setPositiveButton("确定", (dialog, which) -> {
                    int hour = timePicker.getHour();
                    int minute = timePicker.getMinute();
                    taskTime.setText(hour + ":" + minute);
                    dialog.dismiss();
                })
                .setNegativeButton("取消", (dialog, which) -> dialog.dismiss())
                .show();
    }
    return true;
});

2. 修改“:”和“AM/PM”的背景 #

推荐使用Material Design风格的TimePicker组件，样式定制更灵活，修改主题样式如下：

<style name="TimePickerDark" parent="Theme.MaterialComponents.Light.Dialog">
        <!-- 分隔符“:”的颜色 -->
        <item name="materialTimePickerTextColor">@color/secondary</item>
        <!-- AM/PM按钮样式 -->
        <item name="materialTimePickerAmPmStyle">@style/AmPmButtonStyle</item>
        <!-- 保留原有其他属性 -->
        <item name="colorAccent">@color/secondary</item>
        <item name="android:headerBackground">@color/primary</item>
        <item name="android:background">@color/background</item>
</style>

<style name="AmPmButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="android:background">@color/secondary</item>
        <item name="android:textColor">@color/white</item>
</style>

内容的提问来源于stack exchange，提问作者Mausica