CODEWITHSUNDEEP
xamlsearchxamarin.formssearchbar
user3452
user3452

Reputation: 359

How to hide the search icon in the search bar in xamarin forms

I want to hide the search icon in the search bar in Xamarin Forms. This is the UI I require.

This is the custom renderer I'm using

[assembly: ExportRenderer(typeof(searchTab), typeof(StyledSearchBarRenderer))]
namespace RestaurantApp.Droid.Renderers
{
    class StyledSearchBarRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var color = global::Xamarin.Forms.Color.LightGray;
                var searchView = Control as SearchView;

                int searchPlateId = searchView.Context.Resources.GetIdentifier("android:id/search_plate", null, null);
                Android.Views.View searchPlateView = searchView.FindViewById(searchPlateId);
                searchPlateView.SetBackgroundColor(Android.Graphics.Color.Transparent);

            }
        }
    }
}

This is my XAML code

  <Frame Padding="0" OutlineColor="DarkGray" HasShadow="True" HorizontalOptions="FillAndExpand"  VerticalOptions="Center">
                <local:searchTab x:Name="searchBar" Placeholder="Please search for a vendor or product name" PlaceholderColor="Black" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />

            </Frame>

This is what I have to hide

I'm not getting any examples or any code to accomplish this in Xamarin Forms. any suggestions?

Upvotes: 4

Views: 3067

Answers (1)

FreakyAli
FreakyAli

Reputation: 16449

How I would do it is something like this in my Android Renderer:

var searchView = base.Control as SearchView;
int searchIconId = Context.Resources.GetIdentifier("android:id/search_mag_icon", null, null);
ImageView searchViewIcon = (ImageView)searchView.FindViewById<ImageView>(searchIconId);
searchViewIcon.setImageDrawable(null);

This should clear the search icon

In case of queries feel free to revert.

Upvotes: 6

Related Questions