How to change the color of searchbar search icon and cancel button color in xamarin forms

Question

How to change the color of searchbar icon from xaml, I want to change the cancel and search icon color of a search bar in xamarin forms application.How to implement this. Please help on this

Answer 1

As adamm said, you can modify the "cancel button color" via CancelButtonColor.

Similarly, if you want to implement a custom SearchBar in iOS, you can also create a custom renderer for it.

For UISearchBar, you can modify the color of the icon via SearchTextField.LeftView.TintColor.

[assembly: ExportRenderer(typeof(MySearchBar), typeof(MySearchBarRenderer))]
namespace searchbar.iOS
{
    public class MySearchBarRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.BackgroundColor = UIColor.Yellow;
                UISearchBar searchbar = Control as UISearchBar;
                searchbar.SearchTextField.LeftView.TintColor = UIColor.Orange;
                // UPDATE
                var clearButton = searchbar.SearchTextField.ValueForKey((Foundation.NSString)"clearButton") as UIButton;
                //clearButton.SetTitleColor(UIColor.Blue, UIControlState.Normal);
                //clearButton.TintColor = UIColor.Orange;
                clearButton.SetImage(UIImage.FromBundle("CloseIcon.png"), UIControlState.Normal);
            }
        }
    }
}

Answer 2

Cancel button color can be change by setting CancelButtonColor:

        <SearchBar Placeholder="Search items..."
           CancelButtonColor="Orange"
           PlaceholderColor="Orange"
           TextColor="Orange"
           TextTransform="Lowercase"
           HorizontalTextAlignment="Center"
           FontSize="Medium"
           FontAttributes="Italic" />

For the icon color you need to use custom renderers. For example, on Android you can create a new file (something like SearchBar.Droid.cs) and add this in it:

using Android.Content;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xamarin.Forms.SearchBar), typeof(MyApp.Renderers.SearchBarIconColorCustomRenderer))]
namespace MyApp.Renderers
{
    public class SearchBarIconColorCustomRenderer : SearchBarRenderer
    {
        public SearchBarIconColorCustomRenderer(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(Color.Orange.ToAndroid());
        }
    }
}

Edit: For iOS, try something like this (I didn't test it):

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(Xamarin.Forms.SearchBar), typeof(MyApp.iOS.Renderers.iOSSearchBarIconColorCustomRenderer))]
namespace MyApp.iOS.Renderers
{
        public class iOSSearchBarIconColorCustomRenderer : SearchBarRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
            {
                base.OnElementChanged(e);
                
                if (Control != null)
                {
                    var searchbar = (UISearchBar)Control;
                    searchbar.TintColor = UIColor.Orange;
                }
            }
        }    
}