Fix (Date)Picker Dark Theme Support

[jfversluis]

Description of Change

Fixes the weird visuals of the Picker and DatePicker on Android

Issues Resolved

• fixes [Bug] DatePicker theming issues with Android dark mode #9033

API Changes

None

Platforms Affected

• Android

Behavioral/Visual Changes

TBD

Before/After Screenshots

TBD

Testing Procedure

PR Checklist

• Targets the correct branch
• Tests are passing (or failures are unrelated)

[BurkusCat]

@jfversluis
I tried to use it with a DayNight spinner picker but it looked like this (Android 9):

    ...
    <item name="android:datePickerDialogTheme">@style/SpinnerDatePickerStyle</item>
  </style>

  <style name="SpinnerDatePickerStyle" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/DatePickerButtonStyle</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/DatePickerButtonStyle</item>
  </style>

  <style name="SpinnerDatePicker" parent="android:Widget.Material.DatePicker">
      <item name="android:datePickerMode">spinner</item>
  </style>

  <style name="DatePickerButtonStyle" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:textColor">#FF4081</item>
  </style>

I've experimented with a few different styles including a normal date picker but I couldn't get much success. Something else I noticed is that when you change theme at runtime, pickers don't change their background color until you next restart the app.

Do you have any advice for what styles should be in the app itself?

[jfversluis]

Did you change <style name="SpinnerDatePickerStyle" parent="Theme.AppCompat.DayNight.Dialog"> to <style name="SpinnerDatePickerStyle">? That seems to fix it with this change as well.

Else it would really help if you could pour this in a small reproduction so I can check it :) Just to be sure I don't miss any of the details here.

Did you test without the spinner? That seems OK?

[BurkusCat]

Did you change <style name="SpinnerDatePickerStyle" parent="Theme.AppCompat.DayNight.Dialog"> to <style name="SpinnerDatePickerStyle">? That seems to fix it with this change as well.

Ah that works! :) It takes an app restart before it will switch the background colour. Should it switch instantly or is it expected that it will take an app restart?

Did you test without the spinner? That seems OK?

That works too!

[jfversluis]

Perfect, thanks!

The restart is something I will look into! Don't know from the top of my head. What you could try, is take a stock(-ish, for as much as that is a thing on Android) app with a picker and see how it behaves there?

[BurkusCat]

Created a small repro on a new Xamarin 5 template (with your build's NuGet package): DarkLightPickerRepro.zip

[jfversluis]

@BurkusCat Thank you for your patience! I think I know what you mean. The picker works fine now for me if you set the OS level dark/light theme. But doesn't respond to setting the applications theme. Right?

I think I will merge this as it is for now since this is a blocker for a long time now. The actual theming would definitely be nice to have as well but is separate from this bug I would say.

[mkrnic]

@jfversluis

Our pickers (regular pickers) have gone crazy after updating from SR3 (yes, we lagged) to SR9.

Text color in popup is white. It wasn't white before :)

I have absolutely no idea what to change and where to fix this.

This is what our styles.xml theme derives from:

<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

[jfversluis]

@mkrnic you will probably want to change the parent to something that is Dark Theme aware, e.g.: Theme.AppCompat.DayNight

[mkrnic]

We explicitly don't support dark themes for a reason, at least for now :) And this is an issue when the device is in light mode.

This was fine until our XF upgrade, and I suspect this pull request broke our picker popups. Or maybe it was something else, I don't know, but this one is the only one I could find that has something to do with theming.

After a lot of googling and experiments, I found something that works:

<item name="textColorAlertDialogListItem">@color/textColorPrimary</item>

Here's the full style; I left android:textColorAlertDialogListItem inside, just in case (it's an AppCompat thing, right?):

    <style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Dialog.Alert">
        <item name="colorAccent">@color/dialogsAndSpinner</item>
        <item name="android:textColor">@color/dialogsAndSpinner</item>
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="android:textColorSecondary">@color/textColorPrimary</item>
        <item name="android:textColorTertiary">@color/textColorPrimary</item>
        <item name="android:textColorAlertDialogListItem">@color/textColorPrimary</item>
        <item name="textColorAlertDialogListItem">@color/textColorPrimary</item>
        <item name="android:background">@color/primary</item>
    </style>

If anyone stumbles upon this through google or any other means, hope it helps you...

[jfversluis]

Great, thanks for sharing! This definitely was sort of a breaking change for some people, sorry about that. But in this case the pros outweighed the cons. Glad we got this figured out for you!