Style date picker like the google calendar app in compose

2k views Asked by At

I'm having some trouble styling a date picker in the way the google calendar app does. This is the code for showing the picker in a compose project using material you.

@Composable
fun rememberDatePicker(): DatePickerDialog {
    val context = LocalContext.current
    val datePickerDialog = DatePickerDialog(
        context,
        R.style.DatePickerDialogTheme,
        { _, year: Int, month: Int, dayOfMonth: Int ->
        println("$year, $month, $dayOfMonth")
        },
        2022, 5, 1
    )
    return remember { datePickerDialog }
}

val datePicker = rememberDatePicker()
// onClick
datePicker.show()
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="DatePickerDialogTheme" parent="android:Theme.DeviceDefault.Dialog" />
</resources>

The dialog looks like this (top) and not exactly like the google app (bottom). I'm not sure which theme to use and if it's even possible to achieve that look with compose. Also is it possible to switch automatically from light and dark theme or should I create two themes and apply them conditionally?

Keep in mind that I'm new to android and compose and learning a bunch at the momentet :)

My dialog Google calendar dialog

0

There are 0 answers