如何在Material Design Android中自定义TimePicker？

Question

我无法更改TimePicker选择器的颜色和其他部分。到目前为止，我可以更改标题颜色和背景，但是我无法更改内圆和文字颜色。

更改自定义主题，请参考链接。

我的代码：

<TimePicker
    android:id="@+id/tp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:timePickerMode="clock"
    android:headerBackground="#565466"
    android:amPmBackgroundColor="#500126"
    android:numbersBackgroundColor="#57e326"
    android:numbersTextColor="#995394"
    android:numbersSelectorColor="#675543"
    android:textColorSecondary="#897530"
    android:textColorPrimary="#359875"
/>

- jason

---

我应该在样式资源中添加/编辑哪些字段？ - jason

@Heyyou 抱歉，我没看到它。我把它放回去了！ :) - Rémi F

Answer 1

基本模式

您只需在Activity主题中设置您的强调颜色：

<item name="colorAccent">#3333cc</item>

这将为您设置所有颜色，以免弄乱样式。

(这也意味着您不应该直接在 TimePicker 上设置像 amPmBackgroundColor 这样的值，让 Android 为您完成这些任务。)

高级模式

如果您想单独指定所有可能的值，请执行以下操作：

首先，在您的 Activity 主题中定义如下内容：

<item name="android:timePickerStyle">@style/Theme.MyTheme.TimePicker</item>

然后创建适当的样式：

<style name="Theme.MyTheme.TimePicker" parent="android:Widget.Material.Light.TimePicker">
    <item name="android:timePickerMode">clock</item>
    <item name="android:headerBackground">#ff555555</item>
    <item name="android:numbersTextColor">?android:attr/textColorPrimaryActivated</item>
    <item name="android:numbersInnerTextColor">?android:attr/textColorSecondaryActivated</item>
    <item name="android:numbersSelectorColor">?android:attr/colorControlActivated</item>
    <item name="android:numbersBackgroundColor">#ff555555</item>
    <item name="android:amPmTextColor">?android:attr/textColorSecondary</item>
</style>

请注意，numbersInnerTextColor 仅适用于 API 级别 23 及以上版本，而其他样式（例如 headerTextColor）无法设置（或者至少我无法使其生效）。

我建议不要使用“高级”模式，因为 TimePicker 应该具有与包含 Activity 相同的颜色，否则可能会对您的 UX 产生不良影响。

- Gergely Kőrössy

---

我该如何自定义这些元素中的每一个？ - jason

谢谢Gergely。如果我有更多问题，我会再联系你的。 - jason

我无法更改确定和取消按钮布局的背景颜色。下面的视图中，背景色没有改变布局。我该如何更改颜色？谢谢。 - jason

该样式由Activity的主题处理，具体由AlertDialog和Dialog样式处理。 - Gergely Kőrössy

如何更改 android:timePickerMode="spinner" 的设置？ - Sandeep Manmode

Answer 2

时间选择器的Material风格：

带有自定义颜色的TimePickerDialog Material风格

<style name="MyTimePickerDialogStyle" parent="@style/ThemeOverlay.AppCompat.Dialog.Alert">
<item name="showTitle">false</item>
<item name="colorControlActivated">#ffd600</item>
<item name="colorAccent">#b71c1c</item>
<item name="android:textColorPrimary">#43a047</item>
<item name="android:textColorSecondary">#f44336</item>
</style>

时间选择器部件样式

<style name="MyTimePickerWidgetStyle" parent="@android:style/Widget.Material.TimePicker">
    <item name="android:headerBackground">#ffe082</item>
    <item name="android:numbersTextColor">#b71c1c</item>
    <item name="android:numbersInnerTextColor">#f44336</item>
    <item name="android:numbersSelectorColor">#33691e</item>
    <item name="android:numbersBackgroundColor">#ef9a9a</item>
    <item name="android:amPmTextColor">#9c27b0</item>
</style>

更多关于TimePicker的信息，请查看http://www.zoftino.com/android-timepicker-example

- Arnav Rao

---

对于任何需要的人：为了兼容性，请覆盖“Theme.AppCompat.Light.Dialog”。 - fupduck

Answer 3

对于材料3的设计，您需要使用以下属性来改变颜色和使用。

<style name="ThemeOverlay.PChart.Material3TimePicker" parent="ThemeOverlay.Material3.MaterialTimePicker">
    <item name="colorSurface">@color/white_fade</item>
    <item name="colorOnSurfaceVariant">@color/darkCyan</item>
    <item name="colorOnSurface">@color/gray_faded_AA</item>
    <item name="colorPrimary">@color/darkCyan</item>
    <item name="colorOnPrimaryContainer">@color/white</item>
    <item name="colorPrimaryContainer">@color/darkCyan</item>
</style>

在 Kotlin 代码中

val picker =
        MaterialTimePicker.Builder()
            .setTheme(R.style.ThemeOverlay_PChart_Material3TimePicker)
            .setInputMode(INPUT_MODE_CLOCK)
            .setTimeFormat(TimeFormat.CLOCK_24H)
            .setHour(initialHour)
            .setMinute(initialMinute)
            .setTitleText(title)
            .build()

- Haseeb Hassan Asif