Floating Material Search View with Xamarin.Android
Tags: xamarin, android, csharp, material
Published: 2019-07-05 08:18:32

Developing apps is a new trend in the programming world, but designing nice and stylish ones with **Material Design** can be a bit complicated if you don't have any background in graphic design.

Recently, I started to [re-design](https://www.behance.net/gallery/81946027/Tipicos-Salvadorenos-Material-Design) some of my apps like a [cookbook](https://play.google.com/store/apps/details?id=tk.supernova.tipsal&hl=nl); however, I have faced many issues because I wanted to implement some of the newest trends in Material Design like a **Floating Search View**, for example:

<img src="https://developer.android.com/images/search/search-ui.png" width="300px" />

Figure 1. Screenshot of an application's search dialog by [Google](https://developer.android.com/guide/topics/search/search-dialog).

I can agree that there are multiple solutions, especially if you're building Apps with Android Studio, for example:

- [Floating Search View](https://github.com/arimorty/floatingsearchview).
- [Material Search Bar](https://github.com/mancj/MaterialSearchBar).

And many others, but in Xamarin, your options are pretty limited; technically, the best option is quite old [FloatingSearchView](https://github.com/xamarin/XamarinComponents/tree/master/Android/FloatingSearchView). I even ran the examples and the first thing that I got is a *nice warning* that this control is designed for older versions of Android (6-7) and when I tried to use it, I couldn't because I got many errors.

My next idea was to bind a library and I decided to go for this one [Material Search Bar](https://github.com/mancj/MaterialSearchBar) and technically, VS didn't like it because I faced several [issues](https://stackoverflow.com/questions/56725489/error-cs0115-onbindviewholderobject-int-no-suitable-method-found-to-ove/). I felt between a hard place and stone because I didn't know what to do, but because I have some Java background and knowledge of Android Studio, I decided to go wild, *reverse engineering* the library and re-write it from scratch! 

Now, this is my result, I hope you will like it and help you build the next generation of Apps!

***

### **Step 1. Download the package from NuGet:**

[![NuGet Badge Xamarin-MaterialSearchBar](https://buildstats.info/nuget/Xamarin-MaterialSearchBar)](https://www.nuget.org/packages/Xamarin-MaterialSearchBar/)

***

### **Step 2. Define your control in your XML**

```xml
<tk.supernovaic.MaterialSearchBar.MaterialSearchBar
	style="@style/MaterialSearchBarLight"
	app:mt_speechMode="true"
	app:mt_hint="Custom hint"
	app:mt_maxSuggestionsCount="10"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:id="@+id/searchBar" />
```

***

### **Step 3. Define your Activity**

Edit the Activity (**AppCompatActivity**) where you are working and add the following parts:

* `MaterialSearchBar.IOnSearchActionListener` **interface** for reading the buttons actions in the Bar.
* Create an object of the type `MaterialSearchBar`.
* Create a listener for listening to your Bar.

*Example code:*

```csharp
public partial class YourClassActivity : AppCompatActivity, MaterialSearchBar.IOnSearchActionListener
{    
	private MaterialSearchBar MSearchBar { get; set; }

	protected override void OnCreate(Bundle savedInstanceState)
	{
		base.OnCreate(savedInstanceState);

		MSearchBar = FindViewById<MaterialSearchBar>(Resource.Id.searchBar);

		MSearchBar.SetOnSearchActionListener(this);

		MSearchBar.AddTextChangeListener(new MaterialSearchBarListener());
	}

	void MaterialSearchBar.IOnSearchActionListener.OnButtonClicked(int p0)
	{
		switch (p0)
		{
			case MaterialSearchBar.ButtonNavigation:
				Drawer.OpenDrawer((int)GravityFlags.Left);
				break;
			case MaterialSearchBar.ButtonSpeech:
				break;
			case MaterialSearchBar.ButtonBack:
				MSearchBar.DisableSearch();
				break;
		}
	}
}

public partial class YourClassActivity
{
	private class MaterialSearchBarListener : Java.Lang.Object, ITextWatcher
	{
		public void AfterTextChanged(IEditable s)
		{

		}

		public void BeforeTextChanged(ICharSequence s, int start, int count, int after)
		{

		}

		public void OnTextChanged(ICharSequence s, int start, int before, int count)
		{

		}
	}
}
```

And there you have it!

![example](https://raw.githubusercontent.com/mancj/MaterialSearchBar/master/art/preview.gif)

I have more complex examples like how to create your **Custom Adapter** in my [Wiki](https://github.com/FANMixco/Xamarin-SearchBar/wiki) or style it. Feel free to visit it and provide your own ideas!

**I want to personally thanks [Mansur Nashaev](https://github.com/mancj) who wrote the base of this library.**

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)