androidmaterial-designmaterial-components-androidandroid-datepickerandroid-timepicker

MaterialDatePicker and TimePickerDialog are styled differently when using dark theme


I currently use MaterialDatePicker, and because the material team isn't working on the corresponding TimePicker, I've chosen to use TimePickerDialog.

val calendarConstraints = CalendarConstraints.Builder().setOpenAt(datetimeAsUTC)
val datePicker: MaterialDatePicker<Long> = MaterialDatePicker
       .Builder
       .datePicker()
       .setSelection(datetimeAsUTC)
       .setCalendarConstraints(calendarConstraints.build())
       .setTitleText(label)
       .build()

datePicker.show(requireFragmentManager(), datePicker.toString())
val timePicker : TimePickerDialog = TimePickerDialog(requireContext(), { _, hour, minute ->
        vm.process(event(hour, minute))
    },
    datetime.value?.hourOfDay ?: 0,
    datetime.value?.minuteOfHour ?: 0,
    DateFormat.is24HourFormat(requireContext())
)           
timePicker.show()

They work great, but their styling doesn't match under dark theme

enter image description here

This seems like an issue a lot of people would have run into, so hopefully there's an easy solution. I could try to change the colors myself, but I don't have a lot of experience with this, and considering I'm not looking for a custom look, but a standard one that would match other apps, I think there's a better solution.


Solution

  • Use the MaterialTimePicker in the Material Compoments Library:

    val materialTimePicker = MaterialTimePicker.Builder()
        .setTimeFormat(TimeFormat.CLOCK_24H)
        .setHour(22)
        .setMinute(10)
        .build()
    
    materialTimePicker.show(supportFragmentManager, "fragment_tag")
    

    Note: this code requires at least the version 1.3.0-alpha03.

    enter image description here