CODEWITHSUNDEEP
androidstylesmaterial-designtimepicker
Oleh Liskovych
Oleh Liskovych

Reputation: 1061

How to change MaterialTimePicker's buttons text color independently?

I am changing color of MaterialTimePicker buttons text by changing colorPrimary of my time picker style. But when I change colorPrimary - chip in selected state also changes it's color. What I want to achive is to make Ok and Cancel buttons text white, and selected chip leave Blue. On the screen my colorPrimary is Blue.

Is there a way to change buttons text color independently?

<style name="TimePicker" parent="@style/ThemeOverlay.MaterialComponents.TimePicker">
    <item name="colorPrimary">@color/blue</item>
    <item name="colorSurface">@color/dark_grey</item>
    <item name="colorOnSurface">@color/light_grey</item>
    <item name="colorOnPrimary">@color/white</item>
    <item name="colorOnSecondary">@color/colorAccent</item>
    <item name="chipStyle">@style/chipStyle</item>
    <item name="materialClockStyle">@style/clockStyle</item>
    <item name="imageButtonStyle">@style/Widget.MaterialComponents.TimePicker.ToggleButton</item>
</style>

<style name="chipStyle" parent="Widget.MaterialComponents.TimePicker.Display">
    <item name="android:textColor">@color/selector_time_picker_chip_text_color</item>
</style>

enter image description here

Upvotes: 3

Views: 1447

Answers (1)

DrHowdyDoo
DrHowdyDoo

Reputation: 2797

I think i found a method. From the source code we can see that these two buttons (OK and CANCEL) are using borderlessButtonStyle :

<Button
android:id="@+id/material_timepicker_cancel_button"
style="?attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginEnd="8dp"
android:minWidth="72dp"
android:text="@android:string/cancel"
app:layout_constraintEnd_toStartOf="@id/material_timepicker_ok_button"
app:layout_constraintTop_toTopOf="@id/material_timepicker_mode_button" />

So we can simply override the borderlessButtonStyle style in the TimePicker style to change the colors. Like this :

themes.xml :

<style name="ThemeOverlay.App.TimePicker" parent="ThemeOverlay.MaterialComponents.TimePicker">
   <item name="borderlessButtonStyle">@style/borderlessButtonStyle</item>
</style>

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

then in the end add this line in your main app's theme :

<style name="Theme.StackOverflow" parent="Theme.MaterialComponents.Light.NoActionBar">
    ...
    <item name="materialTimePickerTheme">@style/ThemeOverlay.App.TimePicker</item>
    ...
</style>

This will work. Please feel free to improve my answer .

Upvotes: 4

Related Questions