CODEWITHSUNDEEP
xamarin.forms
chung
chung

Reputation: 1133

How to deal with changes to Search Bar in Xamarin Forms

I have a search bar in Xamarin.Forms, and in version 3.4 it used to look like this: enter image description here

But after I updated to Xamarin.Forms 4.4.0.991477, it looks like this: enter image description here

I think what happened is the searchbar decided to create an outline around it, but didn't get rid of the underline it used to have so now the bottom lines are overlaying. I've seen suggestions of using a custom renderer but that seems overkill + I wouldn't know how to get rid of an element I don't know the keyword of..

Can someone help me either get rid of the border or the underline?? I'd like to know both if possible.

Thanks! (This is the android app, running Android 9)

edit: Forgot to add code

<SearchBar Placeholder="Search"
            FontSize="Medium"
            HeightRequest="50"
            Text="{Binding SearchText}"/>

Upvotes: 0

Views: 1139

Answers (1)

Ricardo Dias Morais
Ricardo Dias Morais

Reputation: 2087

iOS and Android implementations for SearchBar are diferent, in iOS the SearchBar doesn't have the underline, and the underline can't be remove on Android unless you use a Custom Renderer, and it's not that overkill, is quite simple actualy.

1 - Create a folder for your custom controls and create a class and extend it from SearchBar like this:

MyApp.Mobile > Create The Folder Here > SearchBarNoUnderline.cs

public class SearchBarNoUnderline : SearchBar
{

}

After this, you only need the Custom Renderer for Android.

2 - Create a folder for your Android Custom Renderers in your Android Project and create a class that extends from Android SearchBarRenderer, like this:

MyApp.Android > Create The Folder Here > SearchBarNoUnderlineRenderer.cs

using MyApp.Mobile.Controls;
using MyApp.Mobile.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(SearchBarNoUnderline), typeof(SearchBarNoUnderlineRenderer))]
namespace MyApp.Mobile.Droid.CustomRenderers
{
    public class SearchBarNoUnderlineRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var plateId = Resources.GetIdentifier("android:id/search_plate", null, null);
                var plate = Control.FindViewById(plateId);
                plate.SetBackgroundColor(Android.Graphics.Color.Transparent);
            }
        }
    }
}

And that's it! now you can use you custom SearchBar in you XAML like this:

<controls:SearchBarNoUnderline Placeholder="Search"
                               FontSize="Medium"
                               HeightRequest="50"
                               Text="{Binding SearchText}"/>

And don't forget to add the reference for your custom controls folder:

xmlns:controls="clr-namespace:MyApp.Mobile.Controls"

And to remove the Border of the SearchBar, i use this little trick:

<StackLayout Spacing="0" BackgroundColor="Red" Padding="0">
    <controls:SearchBarNoUnderline Placeholder="Search"
                                   FontSize="Medium"
                                   BackgroundColor="Transparent"
                                   HeightRequest="50"
                                   Text="{Binding SearchText}"/>
</StackLayout>

Now your border should disapear, and you can use the parent StackLayout to define the BackgroundColor for your SearchBar

Upvotes: 1

Related Questions