效果图：

目标效果图：

原生效果：

实现：

首先是Dialog样式：

<style name="TimePickerDialogStyle" parent="@style/Theme.AppCompat.DayNight.Dialog.Alert"><item name="android:timePickerStyle">@style/TimePickerStyle</item><item name="android:timePickerMode">clock</item><item name="dialogCornerRadius">12dp</item></style>

声明有圆角，时间选择器的模式是时钟选择模式。原来按钮样式也打算在这里用比如buttonBarPositiveButtonStyle这种来声明的，但是没有效果，所以按钮部分我用的动态代码设置的方式修改。

public void showTimePicker(){TimePickerDialog timePickerDialog = new TimePickerDialog(this, R.style.TimePickerDialogStyle, null, 0, 0, true);Window window = timePickerDialog.getWindow();WindowManager.LayoutParams attributes = window.getAttributes();attributes.gravity = Gravity.BOTTOM;window.setAttributes(attributes);timePickerDialog.setOnShowListener(dialog -> {attributes.width = WindowManager.LayoutParams.MATCH_PARENT;window.setAttributes(attributes);Button buttonPositive = timePickerDialog.getButton(DialogInterface.BUTTON_POSITIVE);buttonPositive.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);buttonPositive.setBackgroundResource(R.drawable.test_shape);buttonPositive.setTextColor(Color.WHITE);buttonPositive.setWidth(320);Button buttonNegative = timePickerDialog.getButton(DialogInterface.BUTTON_NEGATIVE);buttonNegative.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);buttonNegative.setBackgroundResource(R.drawable.test_shape);buttonNegative.setTextColor(Color.WHITE);buttonNegative.setWidth(320);LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) buttonNegative.getLayoutParams();layoutParams.setMarginEnd(40);layoutParams.height = 125;buttonPositive.setLayoutParams(layoutParams);buttonNegative.setLayoutParams(layoutParams);});timePickerDialog.show();}

然后是关键的timepicker样式：

<style name="TimePickerStyle" parent="@android:style/Widget.Material.TimePicker"><item name="android:headerBackground">@color/white</item>  <!--顶部背景颜色，原生绿色部分--><item name="android:numbersTextColor">@drawable/selector_color</item>    <!--外圈的数字颜色--><item name="android:numbersInnerTextColor">@drawable/selector_color_inner</item>  <!--内圈数字颜色--><item name="android:numbersBackgroundColor">@color/white</item>  <!--选择区域时钟背景颜色--><item name="android:numbersSelectorColor">#3c77fc</item>  <!--选中数字背景颜色--></style>

parent用ThemeOverlay.MaterialComponents.TimePicker默认顶部大时钟字体颜色是白色，parent用的@android:style/Widget.Material.TimePicker，默认顶部大时钟字体颜色是黑色。如果要其他颜色的话使用android:headerTextColor属性，但是编译的时候会报错，这个属性是私有的，不允许直接使用：

解决方案也很简单，前面加一个“*”，编译就可以通过了：

<!--顶部数字颜色，可用selector的方式来声明选中和未选中的颜色-->
<item name="*android:headerTextColor">@color/black</item>  

然后是外圈和内圈数字字体颜色，直接设置颜色的话在选中之后颜色是不变的，我们看原生的选中之后是会变成白色的，所以那个颜色我们需要用selector的drawable文件来声明不同激活状态的颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_activated="true" android:color="@color/white" /><item android:state_activated="false" android:color="@color/black" />
</selector>

前面说的headerTextColor的时钟和分钟选择状态的颜色也可以通过这种selector的方式设置不同状态时的颜色。

完。