How to properly display DatePickerDialog using MaterialComponents?

Question

I'm using MaterialComponents for Android from material.io.

I have two themes (light and dark). I want to show an DatePickerDialog. But this is the result:

Here is the code how i show my dialog:

private fun selectDeadline() {
    val dialog = DateDialog()
    val bundle = Bundle()
    bundle.putInt("themeId", themeId)
    dialog.arguments = bundle
    dialog.show(supportFragmentManager, "")
}

class DateDialog : DialogFragment(), DatePickerDialog.OnDateSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val date = DateTime.now()
        val themeId = arguments!!.getInt("themeId")
        return DatePickerDialog(activity!!, themeId, this, date.year, date.monthOfYear - 1, date.dayOfMonth)
    }

    override fun onDateSet(view: DatePicker?, year: Int, month: Int, day: Int) {
        deadlineTitle.text = "$year, $month, $day"
    }
}

And last but not least, my themes:

<resources>

<!-- Dark application theme. -->
<style name="AppTheme.Dark" parent="Theme.MaterialComponents.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="toolbarBackground">@color/darkBackground</item>
    <item name="toolbarStyle">@style/AppTheme.Dark.Toolbar</item>
    <item name="iconColor">#fff</item>
    <item name="dividerBackground">@android:drawable/divider_horizontal_dark</item>

    <item name="android:statusBarColor">@android:color/black</item>
</style>

<style name="AppTheme.Dark.Toolbar" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">@color/darkBackground</item>
    <item name="android:elevation">8dp</item>
</style>



<!-- Light application theme. -->
<style name="AppTheme.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="toolbarBackground">@color/lightBackground</item>
    <item name="toolbarStyle">@style/AppTheme.Light.Toolbar</item>
    <item name="iconColor">#000</item>
    <item name="dividerBackground">@android:drawable/divider_horizontal_bright</item>

    <item name="android:datePickerDialogTheme">@style/AppTheme.Light.DatePicker</item>

    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
</style>

<style name="AppTheme.Light.DatePicker" parent="ThemeOverlay.MaterialComponents.Dialog">
    <item name="materialButtonStyle">?android:attr/borderlessButtonStyle</item>
</style>

<style name="AppTheme.Light.Toolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:background">@color/colorPrimary</item>
    <item name="android:elevation">8dp</item>
</style>

If i don't give themeId as parameter it shows properly on light theme but on dark theme it shows just the light version with white text which is invisible for the user to see because of the white background.

What is the proper way to solve this problem?

Answer 1

Thank you for the question. The Material Components library currently doesn't support dark mode for date and time pickers. We plan to add support for this, please stay tuned.