Xamarin.Forms – CustomSearchBar

This project, you can find at: https://github.com/officialdoniald/Xamarin.Forms.CustomControls

We have to create some platforms specific code (custom NavigationPage Renderer), because in the base Xamarin.Forms code, we can’t find this implementation. So first step, we have to create a class in the .NET Standard/PCL project: CustomSearchBar ( https://github.com/officialdoniald/Xamarin.Forms.CustomControls/blob/master/XamarinForms.CustomControls/XamarinForms.CustomControls/SearchBar/CustomSearchBar.cs ).

using Xamarin.Forms;

namespace XamarinForms.CustomControls.SearchBar

{

public class CustomSearchBar : Xamarin.Forms.SearchBar

{

public static readonly BindableProperty BorderColorProperty =

BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(CustomSearchBar));

public static readonly BindableProperty BorderWidthProperty =

BindableProperty.Create(nameof(BorderWidth), typeof(int), typeof(CustomSearchBar));

/// <summary>

/// Set the Border Color of the SearchBar.

/// </summary>

public Color BorderColor

{

set { SetValue(BorderColorProperty, value); }

get { return (Color)GetValue(BorderColorProperty); }

}

/// <summary>

/// Set the Border Width of the SearchBar.

/// </summary>

public int BorderWidth

{

set { SetValue(BorderWidthProperty, value); }

get { return (int)GetValue(BorderWidthProperty); }

}

}

}

Now, we have to implement to the various platforms. Let’s try with the Android part: https://github.com/officialdoniald/Xamarin.Forms.CustomControls/blob/master/XamarinForms.CustomControls/XamarinForms.CustomControls.Android/CustomRenderer/CustomSearchBarRenderer.cs

With this code, you can change the search icon of the searchbar:

int searchIconId = Context.Resources.GetIdentifier(“android:id/search_mag_icon”, null, null); var icon = searchView.FindViewById(searchIconId); (icon as ImageView).SetImageResource(Resource.Drawable.searchbaricon);

You have to create an image in the Resources/Drawable folder with this name: searchbaricon.png (you can change it, but don’t forget to rename Resource.Drawable.your_drawable).

iOS part:

using UIKit; using Xamarin.Forms;

using Xamarin.Forms.Platform.iOS;

using XamarinForms.CustomControls.iOS.CustomRenderer;

using XamarinForms.CustomControls.SearchBar;

[assembly: ExportRenderer(typeof(CustomSearchBar), typeof(CustomSearchBarRenderer))]

namespace XamarinForms.CustomControls.iOS.CustomRenderer

{

public class CustomSearchBarRenderer : SearchBarRenderer

{

#region Properties

private UIColor BorderColor = UIColor.Black;

private int BorderWidth = 1;

#endregion

protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)

{

base.OnElementChanged(e);

var newElement = ((CustomSearchBar)e.NewElement);

BorderColor = newElement.BorderColor.ToUIColor();

if (newElement.BorderWidth != 0)

{

BorderWidth = newElement.BorderWidth;

}

var searchbar = (UISearchBar)Control;

if (e.NewElement != null)

{

//Foundation.NSString _searchField = new Foundation.NSString(“searchField”);

//var textFieldInsideSearchBar = (UITextField)searchbar.ValueForKey(_searchField);

//textFieldInsideSearchBar.BackgroundColor = UIColor.FromRGB(0, 0, 12);

//textFieldInsideSearchBar.TextColor = UIColor.White;

// searchbar.Layer.BackgroundColor = UIColor.Blue.CGColor;

//searchbar.TintColor = UIColor.White;

//searchbar.BarTintColor = UIColor.White;

searchbar.Layer.CornerRadius = 0;

searchbar.Layer.BorderWidth = BorderWidth;

searchbar.Layer.BorderColor = BorderColor.CGColor;

//searchbar.ShowsCancelButton = false;

}

}

}

}