Title colour on Android Picker, initially appears grey.

[AllieMash]

Description

I think there is a possible bug with Android Picker control where the Picker title colour, initially appears grey when the Picker.TitleColor property is set to same colour value as Picker.TextColor property.

The following screenshot shows the issue:

Two Picker controls were added to the MainPage.xaml of the default MAUI project that is created when selecting a new MAUI project:

The 1st Picker control has the TitleColor property set to the same color value as the TextColor property, which in this case, is Green.
When the program is run for the Android platform, the 1st Picker control's Title is grey and not green as you would expect.

The 2nd Picker control has the TitleColor property set to a different color value than the TextColor property, which in this case, is Green for the TitleColor property and Red for the TextColor property.
When the program is run for the Android platform, the 2nd Picker control's Title is green as you would expect.

Steps to Reproduce

1. Create a new MAUI project using the default project template.
2. Add two Picker controls to MainPage.xaml.
3. On the 1st Picker control, explicitly set both TitleColor and TextColor to the same color value. I selected Green for this demo.
4. On the 2ndPicker control, explicitly set the TitleColor to a different color value than the value of the TextColor. I selected Green for the TitleColor property and Red for the TextColor property for this demo.
5. Select an Android Emulator. I selected one for API 26.
6. Run the application and you should see the1st Picker control's Title is grey and not green!. Whereas, the 2nd Picker control's Title is green as you would expect.

Link to public reproduction project repository

https://github.com/AllieMash/MauiPickerColorBugDemo

Version with bug

7.0.92

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

7.0.86

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 7.0 API 24 and above

Did you find any workaround?

If you need both TitleColor and TextColor to visually appear the same colour, you could change the value of one of these colour properties, by a very small amount so the visual difference in colour is hardly perceptible.

For example you could set the TitleColor and TextColor properties to the following values so the Picker title will appear green as required:
TitleColor="#8000" TextColor="#8001"

However this can become a hassle in some projects where you have a colour already pre-set for a specific purpose (i.e. Themes) since you my need to define and extra color specifically for use with the Picker control on the Android platform.

It would be nice to have this issue corrected.

Relevant log output

No log output

[AllieMash]

Sorry, I made mistake with the entry for "Last version that worked well"
Somehow i entered 7.0.86 which is incorrect as i have not been able to find a version on which it worked.

[AllieMash]

Just seen another mistake that i have made when submitting this issue.
It is in the section for "Did you find any workaround?" and the example of a fix should be setting properties as TitleColor="#8000" TextColor="#8001"

Again I must apologise. This is my first attempt to submit a bug report and I'm still learning the ropes!

[AllieMash]

OK the hex values that i'm submitting are being automatically changed by GitHub so the "00" prefix is being removed.
Is there some syntax that i should be using the allow hex values to appear, exactly as i originally entered them?

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[AllieMash]

I have found an alternative fix for this issue by implementing the following handler customization in the MainPage constructor.:

public MainPage()
{
InitializeComponent();

#if ANDROID
// Temporary fix for the known issue (#16737) on the Android platform, where the Picker title colour, initially
// appears grey when the Picker.TitleColor property is set to same colour value as Picker.TextColor property.
Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping("AppendPickerHandler", (handler, view) =>
{
Microsoft.Maui.Handlers.PickerHandler.MapTitleColor(handler, view);
});
#endif

}

Of course, you could implement this handler customization in other places as well.

[Quaybe]

+1, just came across this myself. Thanks for bringing up this issue.

[homeyf]

Verified this issue with Visual Studio Enterprise 17.9.0 Preview 2. Can repro on android platform with sample project.
https://github.com/AllieMash/MauiPickerColorBugDemo

[dartasen]

Used this handler as a workaround for annoying issues with TitleColor being inconsistent on Android

        PickerHandler.Mapper.AppendToMapping("RealTitleColor", (handler, view) =>
        {
            Color titleColor = view.TitleColor;

            if (titleColor is not null)
            {
                handler.PlatformView.SetHintTextColor(titleColor.ToPlatform());
            }
        });

[RedZone908]

I would also add this additional observation: forced dark/light mode is not respected when the TextColor and the TitleColor are the same. For example, if the system is in dark mode but the app is forced to light mode via UserAppTheme = AppTheme.Light, the title color will be very light in accordance with the system dark mode and thus essentially invisible. But if the TextColor and TitleColor are different values, then forced dark/light mode is respected.

System Dark Mode, App Light Mode, TextColor and TitleColor are the same

System Dark Mode, App Light Mode, TextColor and TitleColor are different

Repro project: https://github.com/RedZone908/AndroidForcedLightModePickerRepro

Didn't seem to make sense to report this as a different bug since it seems like it's probably an extension of the same one.

[sajadshafi]

Hi all,

I encountered this same issue while running my .NET MAUI app. While testing the app, I thought this issue might differ from android version to version and I found:

• Android 10 (API 29): The issue appears.
• Android 14 (API 34): This issue didn't appear.

From my understanding, this seems to be related to Android rendering rather than a problem with MAUI itself. While I’m not a .NET MAUI expert, it appears Android 10 handles rendering differently in this case.

Here's a visual comparison while the app was running in Android 10:

• Different colors:
  

• Same color:
  

For now, I just used two different colors with one character changed in HEX, as in the above first image.