CODEWITHSUNDEEP
androidmaterial-designmaterial-components-androidandroid-datepickerandroid-timepicker
lukas hansen
lukas hansen

Reputation: 83

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.

Upvotes: 1

Views: 1314

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363647

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

Upvotes: 3

Related Questions