Search code examples
androidmaterial-designandroid-theme

Android MaterialTimePicker custom styling

Im trying to apply a custom style to the MaterialTimePicker. And I still cant change some of the required colors:

  1. Change the selected chip background color
  2. Change the selected chip text color
  3. Remove(or set color) the chip label

enter image description here

This is my code:

val timePicker =
MaterialTimePicker.Builder()
.setTitleText("Select time")
.setTheme(R.style.TimePicker)
.setInputMode(MaterialTimePicker.INPUT_MODE_KEYBOARD)
.build()

<style name="TimePicker" parent="ThemeOverlay.MaterialComponents.TimePicker">
        <item name="colorPrimary">@color/primary_71</item>
        <item name="colorSurface">@color/blue_22</item>
        <item name="colorOnSurface">@color/grey_100</item>
        <item name="materialButtonOutlinedStyle">@style/TimePicker.Button</item>
        <item name="chipStyle">@style/TimePicker.Chip</item>
        <item name="imageButtonStyle">@style/TimePicker.ImageButton</item>
        <item name="borderlessButtonStyle">@style/borderlessButtonStyle</item>
    </style>

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

    <style name="TimePicker.Button" parent="Widget.MaterialComponents.TimePicker.Button">
        <item name="backgroundTint">@color/time_picker_button_background_selector</item>
        <item name="android:layout_height">48dp</item>
        <item name="android:padding">0dp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:textColor">@color/time_picker_button_text_selector</item>
        <item name="android:textAlignment">center</item>
        <item name="strokeColor">@color/blue_37</item>
        <item name="strokeWidth">1dp</item>
    </style>

    <style name="TimePicker.Chip" parent="Widget.MaterialComponents.TimePicker.Display">
        <item name="chipBackgroundColor">@color/time_picker_chip_background_selector</item>
        <item name="rippleColor">@color/yellow_56</item>
        <item name="android:textAlignment">center</item>
        <item name="android:textColor">@color/time_picker_chip_text_selector</item>
    </style>

    <style name="TimePicker.ImageButton" parent="Widget.MaterialComponents.TimePicker.ImageButton">
        <item name="android:visibility">gone</item>
    </style>
Solution

  • Could do it with the following setup:

    <style name="TimePicker" parent="ThemeOverlay.MaterialComponents.TimePicker">
        <item name="colorPrimary">#7585A0</item>
        <item name="colorSurface">@color/blue_22</item>
        <item name="colorOnSurface">@color/grey_100</item>
        <item name="materialButtonOutlinedStyle">@style/TimePicker.Button</item>
        <item name="chipStyle">@style/TimePicker.Chip</item>
        <item name="imageButtonStyle">@style/TimePicker.ImageButton</item>
        <item name="borderlessButtonStyle">@style/borderlessButtonStyle</item>
        <item name="textInputStyle">@style/timePickerTextInputStyle</item>
    </style>

    <style name="timePickerTextInputStyle" parent="Widget.MaterialComponents.TimePicker.Display.TextInputLayout">
        <item name="materialThemeOverlay">@style/timePickerMaterialThemeOverlay</item>
    </style>

    <style name="timePickerMaterialThemeOverlay" parent="ThemeOverlay.MaterialComponents.TimePicker.Display.TextInputEditText">
        <item name="editTextStyle">@style/timePickerTextInputEditText</item>
        <item name="android:textViewStyle">@style/timePickerTextViewStyle</item>
    </style>

    <style name="timePickerTextInputEditText" parent="Widget.MaterialComponents.TimePicker.Display.TextInputEditText">
        <item name="android:textColor">@color/grey_100</item>
    </style>

    <style name="timePickerTextViewStyle" parent="Widget.MaterialComponents.TimePicker.Display.HelperText">
        <item name="android:visibility">gone</item>
    </style>