Unable to change color of SearchBar magnifying glass icon

emorell96 commented 2 years ago

Description

The magnifying glass in SearchBar cannot be changed using Styles in XAML. This feels like a forgotten detail. The cancel button can be changed but not this which means that in Dark Mode you cannot see it.

Steps to Reproduce

Create a MAUI project.
Try to change the color of the magnifying glass.
Not possible.

Version with bug

Release Candidate 1 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

API 30, Android 11

Did you find any workaround?

I can change the background using a handler, but I cannot change the magnifying glass looks through a handler AFAIK.

Relevant log output

No response

jfversluis commented 2 years ago

Correct, this was inherited from Xamarin.Forms. We have an open PR here that makes the icon the same color as the text color. Would that make sense for you, or would you want to set it separately?

emorell96 commented 2 years ago

I think it's fine for me but I'm sure that people would appreciate the freedom of setting the color independently from the text color but defaulting to be the same color.

emorell96 commented 2 years ago

For anyone who might stumble to this issue. I've found a brute force way of setting the color on every Search Bar:

Microsoft.Maui.Handlers.SearchBarHandler.Mapper.AppendToMapping("LightSearch", (h, v) =>
        {

            var children = h.PlatformView.GetChildrenOfType<ImageView>();
            foreach(var child in children)
            {
                child.SetColorFilter(Colors.DarkGray.ToPlatform());
            }

        });

I tried doing it like they do in here: https://github.com/xamarin/Xamarin.Forms/pull/14766 but that didn't work because the imageview wouldn't be found inside the PlatformView. So instead I just iterate through all the imageview inside the search bar and I set its color filter.

ghost commented 2 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

Cybrosys commented 11 months ago

Any update on this?

AlleSchonWeg commented 9 months ago

Hi, do you know how to change the color of the search_plate? Search_plate is the line under the text. In XF this code works:

        var plate = Control.FindViewById(Resources.GetIdentifier("android:id/search_plate", null, null));
        plate.Background.SetColorFilter(new BlendModeColorFilter(Color.YellowGreen, BlendMode.Multiply));

With maui:

                var plate = handler.PlatformView.FindViewById(Platform.AppContext.Resources.GetIdentifier("android:id/search_plate", null, null));
                plate.Background.SetColorFilter(new BlendModeColorFilter(col, BlendMode.Multiply));

FindViewById returns null. Platform.AppContext.Resources.GetIdentifier("android:id/search_plate", null, null) returns 16909479 as identifier.

Edit: I found a solution:

        var icon = handler.PlatformView.FindViewById<ImageView>(ResourceConstant.Id.search_mag_icon);
        icon?.SetColorFilter(col);
        var plate = handler.PlatformView.FindViewById(ResourceConstant.Id.search_plate);
        plate?.Background?.SetColorFilter(new BlendModeColorFilter(col, BlendMode.Multiply));

Equabyte commented 8 months ago

Can anyone please confirm when is this fix planned for release? The magnifying glass icon color should (at least) match text color or (best) have its own bindable property; switching the app theme from light to dark or vice versa makes the magnifying glass become invisible which is not good at all. Also we should not be forced to use handlers for something like this.