Xamarin.forms: [Bug] Search icon color wrong with 4.4

Created on 21 Jan 2020  路  10Comments  路  Source: xamarin/Xamarin.Forms

Description

After the update to Xamarin.Forms 4.4 the search icon color changes on Android without any option to change it (or at least I cannot find any).

SearchBar with Xamarin.Forms 4.3 and earlier:
qemu-system-i386_2020-01-21_08-37-16

SearchBar with Xamarin.Forms 4.4 and later:
qemu-system-i386_2020-01-21_08-42-31

So far this only happens on Android not on iOS (didn't test anything else).

Steps to Reproduce

  1. Add a SearchBar control to the UI
  2. Update to Xamarin.Forms 4.4

Expected Behavior

The icon should not change it's color or at least use the textcolor or any other property to change it back.

Actual Behavior

Just went black.

Basic Information

  • Version with issue: 4.4
  • Last known good version: 4.3
  • IDE: VS 2019
  • Platform Target Frameworks:

    • Android: 9.0

Screenshots

See description.

4.4.0 searchbar 3 regression high impact mobcat Android bug

Most helpful comment

I have dark icon on Xamarin.Forms 4.5.0.657, using Theme.AppCompat.Light.NoActionBar .. but I would actually consider the white icon a bug, why do you consider it the correct appearance in the first place? Even the sample project shows dark icon, but when you build it, it has white icon on white background, so the icon is not visible at all.. I think it should have the same color as the text.

Anyway, if you need to change the icon color, you can use a custom renderer:

[assembly: ExportRenderer(typeof(Xamarin.Forms.SearchBar), typeof(Your.App.Renderers.CustomIconColorSearchBarRenderer))]
namespace Your.App.Renderers
{
    public class CustomIconColorSearchBarRenderer : SearchBarRenderer
    {
        public CustomIconColorSearchBarRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);
            var icon = Control?.FindViewById(Context.Resources.GetIdentifier("android:id/search_mag_icon", null, null));
            (icon as ImageView)?.SetColorFilter(/*YOUR COLOR*/);
        }
    }
}

All 10 comments

@SebastianKruseWago Are you using Shell?

@samhouts No it's a non Shell project with MvvmCross. It is the default SearchBar control and not the integrated one in the navigation bar (sadly).

I can confirm this Issue. White icon with v4.3.x, dark icon with v4.4.x. Will stay on 4.3 until this issue has been resolved.

@SebastianKruseWago @Daniel-NP Can you identify the exact version where the icon was white? I've downgraded to 4.3.0.908675, and it's still black.

Issue9266.zip

Currently im using Xamarin.Forms v4.3.0.991250, Android-Targetversion 28, debugging on physical Andoid 8.0 device.

EDIT: @samhouts I could identify the problem:

It depends on AndroidProject/Resources/values/styles.xml.

With <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> it shows a dark search icon,
with <style name="MainTheme.Base" parent="Theme.AppCompat"> it shows a bright (not really white) icon.

With Theme.AppCompat.NoActionBar as parent style this issue occurs for me. Any 4.3 Version is fine, every 4.4 and 4.5 is "broken".

Actually, in my app I use Theme.AppCompat.Light.DarkActionBar, and the icon is white (not just bright)!
And I am currently in trouble, as I do need upgrade to 4.5 because of the WebView for iOS, however, can't find the way to work around this search icon color.

I have dark icon on Xamarin.Forms 4.5.0.657, using Theme.AppCompat.Light.NoActionBar .. but I would actually consider the white icon a bug, why do you consider it the correct appearance in the first place? Even the sample project shows dark icon, but when you build it, it has white icon on white background, so the icon is not visible at all.. I think it should have the same color as the text.

Anyway, if you need to change the icon color, you can use a custom renderer:

[assembly: ExportRenderer(typeof(Xamarin.Forms.SearchBar), typeof(Your.App.Renderers.CustomIconColorSearchBarRenderer))]
namespace Your.App.Renderers
{
    public class CustomIconColorSearchBarRenderer : SearchBarRenderer
    {
        public CustomIconColorSearchBarRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);
            var icon = Control?.FindViewById(Context.Resources.GetIdentifier("android:id/search_mag_icon", null, null));
            (icon as ImageView)?.SetColorFilter(/*YOUR COLOR*/);
        }
    }
}

Hey @rihadavid! Thank you for providing workaround! It really helped!

(And not sure who you are talking about "correct appearance". I hope, this is to Xamarin team, as this was pissing me off, for sure! :) )

Thank you for the workaround. Without it, SearchBar does not look right in the Android dark theme. The icon has (almost) black color, so it is nearly invisible on the black background. The same holds also for the line under the text.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jamiewest picture jamiewest  路  3Comments

rmarinho picture rmarinho  路  3Comments

Stensan picture Stensan  路  3Comments

joseluisct picture joseluisct  路  3Comments

EmilAlipiev picture EmilAlipiev  路  3Comments