CODEWITHSUNDEEP
xamarin.iosxamarin.formsxamarin.android
cheran
cheran

Reputation: 483

Search Bar style changes in Xamarin Forms

I need to use Search Bar in my application for both Xamarin Android and Xamarin iOS.

I have to achieve below search bar in my application.

enter image description here enter image description here

Please find code used in xaml,

<Frame Padding="0" OutlineColor="DarkGray" HasShadow="True" HorizontalOptions="FillAndExpand"  VerticalOptions="Center">
                    <SearchBar x:Name="searchBar" Placeholder="Search" PlaceholderColor="LightGray" TextColor="#000000" HorizontalOptions="FillAndExpand" VerticalOptions="Center" TextChanged="SearchBar_TextChanged"/>
                </Frame>

My search bar look like below, Need to remove the highlighted line from xamarin android. enter image description here Also find search bar renderer code,

protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);
            var color = global::Xamarin.Forms.Color.LightGray;
            var searchView = (Control as SearchView);
            var searchIconId = searchView.Resources.GetIdentifier("android:id/search_mag_icon", null, null);
            if (searchIconId > 0)
            {
                var searchPlateIcon = searchView.FindViewById(searchIconId);
                (searchPlateIcon as ImageView).SetColorFilter(color.ToAndroid(), PorterDuff.Mode.SrcIn);
            }
            var symbolView = (Control as SearchView);
            var symbolIconId = symbolView.Resources.GetIdentifier("android:id/search_close_btn", null, null);
            if(symbolIconId>0)
            {
                var symbolPlateIcon = symbolView.FindViewById(symbolIconId);
                (symbolPlateIcon as ImageView).SetColorFilter(color.ToAndroid(), PorterDuff.Mode.SrcIn);
            }
        }

Xamarin Android: I have used frame control to show border in Search Bar. I have to remove search bar border bottom line or border color in it.

Xamarin iOS: I have to acheive search bar control as seems in picture. I have to remove cancel word shown in search bar while searching in it. Also need to remove radius around in it.

Anyone suggest on this?

Upvotes: 2

Views: 7053

Answers (1)

Kevin Li
Kevin Li

Reputation: 2258

In Android, you could find the search_plate via id and set it to Transparent, like this:

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);
}

In iOS, you could find the Textfield of UISearchBar, then customize the border style of it. And remove the "Cancel" button via setting ShowsCancelButton to false. For example, like this:

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (Control != null)
    {
        Control.ShowsCancelButton = false;

        UITextField txSearchField = (UITextField)Control.ValueForKey(new Foundation.NSString("searchField"));
        txSearchField.BackgroundColor = UIColor.White;
        txSearchField.BorderStyle = UITextBorderStyle.None;
        txSearchField.Layer.BorderWidth = 1.0f;
        txSearchField.Layer.CornerRadius = 2.0f;
        txSearchField.Layer.BorderColor = UIColor.LightGray.CGColor;

    }
}

Upvotes: 5

Related Questions