Theming android native timepicker popup

IeuanWalker commented 3 months ago

Description

I'm trying to theme Androids native TimePicker, but the 'Ok' and 'Cancel' buttons are the same colour as the background.

I copied over the android color.xml from the XF project and it doesn't work the same in MAUI.

Steps to Reproduce

See linked repo, -

Android specific styles - https://github.com/IeuanWalker/maui-android-timepicker-issue/blob/master/src/App/Platforms/Android/Resources/values/colors.xml
Setting Android styles based on users theme - https://github.com/IeuanWalker/maui-android-timepicker-issue/blob/bbab03cf35746aa43a8a6052985de7e792e999c8/src/App/Settings/AppSettings.cs#L52

Link to public reproduction project repository

https://github.com/IeuanWalker/maui-android-timepicker-issue

Version with bug

8.0.70 SR7

Is this a regression from previous behaviour?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

github-actions[bot] commented 3 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Picker text colour not changing with theme (#23760), similarity score: 0.79
OS system components ignore app theme (#22058), similarity score: 0.76
Unable to customize the Datepicker calendar, TImepicker view and picker drop down view (#20277), similarity score: 0.74

Closed similar issues:

Android Picker (Theme Change BackgroundColor wont Update) Bug (#8437), similarity score: 0.77
Android: text color in buttons in alert dialog and picker dialog for default theme has very low contrast in dark mode (#15088), similarity score: 0.74

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

Zhanglirong-Winnie commented 3 months ago

This issue has been verified using Visual Studio 17.11.0 Preview 7.0(8.0.61 & 8.0.70). Can repro on android platform.

jfversluis commented 3 months ago

In your repro I see color.xml shouldn't that be colors.xml? afaik this should work the same as it did with Forms

IeuanWalker commented 3 months ago

@jfversluis in my repo it is colors.xml - https://github.com/IeuanWalker/maui-android-timepicker-issue/tree/master/src/App/Platforms/Android/Resources/values

There is a folder called color, that has unrelated stuff in it (workaround for this issue - https://github.com/dotnet/maui/issues/18897#issuecomment-1902130253)

All other native dialogs are being themed correctly based on the colors.xml file (picker, datepicker, alert, actionSheet, etc). Only issue is the with time picker action buttons

jfversluis commented 3 months ago

I'm not convinced this is a bug in .NET MAUI (yet). It seems like all mechanisms for picking up the Android styling work. It almost seems that we didn't find the right combination here yet? But might as well be that we're overriding something that we shouldn't for these pickers.

While poking around I did find this working:

Created a Platforms/Android/values/styles.xml, I don't think this is strictly necessary, but I guess styles should be there.

Added the below to styles.xml, together with everything else that was not a color that was in colors.xml

<!-- Custom AlertDialog theme for DatePicker and TimePicker dialogs -->
<style name="CustomAlertDialogTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
    <item name="android:buttonBarPositiveButtonStyle">@style/CustomDialogButton</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/CustomDialogButton</item>
</style>

<!-- Custom style for the dialog buttons -->
<style name="CustomDialogButton" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#FF5722</item> <!-- Custom button text color -->
</style>

Then added this to MainActivity.cs

protected override void OnCreate(Bundle? savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    // Apply the custom alert dialog theme
    //this.SetTheme(Resource.Style.CustomAlertDialogTheme);
}

For some reason that does make it work although I'm not really sure why its needed. But hopefully this will give some clue as to why its not just working out of the box 😄

IeuanWalker commented 3 months ago

@jfversluis I've created a new branch called Basic and made a styles.xml with barebones styling and the issue appears on all the dialogs - https://github.com/IeuanWalker/maui-android-timepicker-issue/blob/basic/src/App/Platforms/Android/Resources/values/styles.xml

On the app I've added -

TimePicker
Picker
DatePicker
Alert
ActionSheet

And all have an issue with the "Ok" and "Cancel" button being invisible

kubaflo commented 3 months ago

@leal-alvaro It is not a MAUI issue so @jfversluis is right. Try with the following styles:

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

  <!--Splashscreen overrides - https://stackoverflow.com/a/78168169-->
  <style name="Maui.MainTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="android:statusBarColor">#053C3D</item>
    <item name="android:navigationBarColor">#053C3D</item>

    <item name="alertDialogTheme">@style/CustomDialogTheme</item> <!-- For dialogs -->
    <item name="buttonBarButtonStyle">@style/DialogButtonStyle</item> <!-- For time/date picker -->
  </style>

  <!-- Custom Dialog Theme -->
  <style name="CustomDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="buttonBarPositiveButtonStyle">@style/CustomDialogButton</item>
    <item name="buttonBarNegativeButtonStyle">@style/CustomDialogButton</item>
    <item name="buttonBarNeutralButtonStyle">@style/CustomDialogButton</item>
  </style>

  <!-- Custom Dialog Button Style -->
  <style name="CustomDialogButton" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#FF0000</item>
  </style>

  <style name="DialogButtonStyle" parent="@style/Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">#FF0000</item>              
  </style>
</resources>

You don't even have to modify the MainActivity

Basically what I did was:

changed android:buttonBarNeutralButtonStyle to buttonBarNeutralButtonStyle etc.
added to Maui.MainTheme
@style/CustomDialogTheme @style/DialogButtonStyle Hope it will help you and others! Cheers!

jfversluis commented 3 months ago

You don't even have to modify the MainActivity

Yeah I though that shouldn't be needed, but I couldn't figure out the right style 😄 Thanks!

Can you let us know if this works for you @IeuanWalker ?

IeuanWalker commented 3 months ago

Thanks @jfversluis @kubaflo

Is there any docs on how to style the dialogs? All the docs I find on android show more kotlin code than the .xml attributes stuff.

Feel so close to finishing the styling just cant find the attributes needed to style them

Current issues are -

Text colour of the action sheet items
Text colour of the selected time
Text colour of the manual time option
And a few colour of the date picker (text color, selected date color, selected date text color, the background of the action buttons bar at the bottom)

jfversluis commented 3 months ago

Yeah this is kind of a mixed territory I guess, although I don't think MAUI interferes that much with the styling here. So this really just uses whatever works on Android.

Ideally we would have MAUI APIs to do all the styling but we don't at least not at this point in time. I don't think we have any documentation on it on our side and there probably won't be. That is kind of a slippery slop I guess, where do we stop documenting also all the native APIs? 😅

IeuanWalker commented 3 months ago

@jfversluis Ye makes sense, i just cant get the android docs to work with maui.

F.e. this is the Android docs that lists all the attributes for the date picker - https://developer.android.com/reference/android/widget/DatePicker

Im basically setting all the available properties -

  <style name="CustomDatePickerTheme" parent="@android:style/Widget.Material.DatePicker">
    <item name="android:background">#075556</item>
    <item name="android:calendarTextColor">#FFFFFF</item>
    <item name="android:datePickerMode">calendar</item>
    <item name="android:dayOfWeekTextAppearance">@style/CustomDayOfWeekTextAppearance</item>
    <item name="android:headerBackground">#053C3D</item>
    <item name="android:headerMonthTextAppearance">@style/CustomHeaderTextAppearance</item>
    <item name="android:headerDayOfMonthTextAppearance">@style/CustomHeaderTextAppearance</item>
    <item name="android:headerYearTextAppearance">@style/CustomHeaderTextAppearance</item>
  </style>

  <!-- Custom Day of Week Text Appearance -->
  <style name="CustomDayOfWeekTextAppearance" parent="@android:style/TextAppearance.Material">
    <item name="android:textColor">#FF0000</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
  </style>

  <!-- Custom Header Text Appearance -->
  <style name="CustomHeaderTextAppearance" parent="@android:style/TextAppearance.Material">
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:textSize">18sp</item>
    <item name="android:textStyle">italic</item>
  </style>

But that doesn't get reflected in the dialog in Maui -

Based on the above XML the day of the week text colour should be red, all other text should be white.

This 'Fixed' branch has been updated with this - https://github.com/IeuanWalker/maui-android-timepicker-issue/tree/Fixed/src/App

jfversluis commented 3 months ago

To be honest I don't know how this all exactly works on the Android side. I do see that that blue bubble color is also used on the switch for instance and the underline for the picker entries. So that seems to be some common theming accent color and maybe that is coming from the .NET MAUI XAML styling side?

IeuanWalker commented 3 months ago

thanks, ye just fixed that, colorAccent is a base property -

  <style name="Maui.MainTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="android:statusBarColor">#053C3D</item>
    <item name="android:navigationBarColor">#053C3D</item>

    <item name="colorAccent">#053C3D</item>

jfversluis commented 3 months ago

OK so I think its safe to conclude that this is not so much an issue with MAUI but something that is a bit unclear to work with unfortunately 😅

Closing this one as such. If you have any more questions the Discussions tab might be a good place or Microsoft Q&A or a third-party forum like Stack Overflow. Good luck!

IeuanWalker commented 3 months ago

If someone else runs into this issue, a mostly working version added to the discussion - https://github.com/dotnet/maui/discussions/24211#discussioncomment-10338622

Still unsure why our XF .xml file didn't work the same in MAUI

dotnet / maui