How can I change the Android Spinner Date Picker background color to match light/dark mode in Xamarin.Forms?

Viewed 41

Summary

I would like to use the spinner mode for the Android DatePicker in Xamarin.Forms. This can be set in styles.xlm, but doing so always results in the date picker appearing as dark rather than light. How can I both assign the date picker to be spinner as well as use the default light/dark backgrounds.

If it matters, I am using Xamarin.Forms version 5.0.0.2515 (the latest at the time of this writing).

Details

By default, Xamarin.Forms uses a calendar style popup for the date picker:

enter image description here

This picker also seems to respect the light/dark theme as set in Android settings:

enter image description here

I would like to use the spinner style instead of calendar style. This can be done with the following styles.xml:

<?xml version="1.0" encoding="utf-8" ?>
<resources>

    <style name="MainTheme" parent="MainTheme.Base">
        <item name="android:datePickerDialogTheme">@style/Theme.picker</item>
    </style>

    <style name="Theme.picker" parent="android:Theme.Material.Dialog">
        <item name="android:datePickerStyle">@style/MyDatePicker</item>
    </style>
    <style name="MyDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>
</resources>

However, doing so results in the spinner popup always appearing with a dark background whether the Android phone is in light or dark mode, as shown in the following image:

enter image description here

I suppose this is happening because the parent styles I am using are controlling the color (parent="android:Theme.Material.Dialog" and parent="android:Widget.Material.DatePicker"), but if I remove the parent assignment on the styles, I get the following error:

resource style/Theme (aka com.xxxxx.android:style/Theme) not found. xxxxx.Android           

I also directly tried setting the android.datePickerMode in the main style as shown here:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="MainTheme" parent="MainTheme.Base">
        <item name="android:datePickerMode">spinner</item>
    </style>
</resources>

Unfortunately that seems to make the spinner still show up in calendar mode rather than as a spinner (although the styling works okay).

Is there a way to achieve a spinner which respects light/dark mode the same way the calendar view does?

Edit

I have used Xamarin.Forms Renderers to modify how standard controls look, but I only know how to modify the Date object (which looks like a text box) through the renderer. I don't know if a way to modify the picker which appears as a popup when tapping on the Date object.

1 Answers

I have tested the code you provided. Yes, this can change the datepicker form.

<?xml version="1.0" encoding="utf-8" ?>
<resources>

    <style name="MainTheme" parent="MainTheme.Base">
        <item name="android:datePickerDialogTheme">@style/Theme.picker</item>
    </style>

    <style name="Theme.picker" parent="android:Theme.Material.Dialog">
        <item name="android:datePickerStyle">@style/MyDatePicker</item>
    </style>
    <style name="MyDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>
</resources>

and do not forget change this code.

<application android:label="App25.Android"  android:theme="@style/MainTheme"></application>

But I think this form of the Datepicker may not support the dark theme. But you can use the custom render to change the color of it.

Related