Cover image for Floating Material Search View with Xamarin.Android

Floating Material Search View with Xamarin.Android

fanmixco profile image Federico Navarrete Updated on ・3 min read

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 some of my apps like a cookbook; 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:

Figure 1. Screenshot of an application's search dialog by Google.

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

And many others, but in Xamarin, your options are pretty limited; technically, the best option is quite old 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 and technically, VS didn't like it because I faced several issues. 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 it will like it and help you build the next generation of Apps!

Step 1. Download the package from NuGet:

NuGet Badge Xamarin-MaterialSearchBar

Step 2. Define your control in your XML

    app:mt_hint="Custom hint"
    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:

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

    protected override void OnCreate(Bundle savedInstanceState)

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


        MSearchBar.AddTextChangeListener(new MaterialSearchBarListener());

    void MaterialSearchBar.IOnSearchActionListener.OnButtonClicked(int p0)
        switch (p0)
            case MaterialSearchBar.ButtonNavigation:
            case MaterialSearchBar.ButtonSpeech:
            case MaterialSearchBar.ButtonBack:

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!

I have more complex examples like how to create your Custom Adapter in my Wiki or style it. Feel free to visit it and provide your own ideas!

I want to personally thanks to Mansur Nashaev who wrote the base of this library.

Posted on by:

fanmixco profile

Federico Navarrete


I'm an IT Consultant and Orator πŸ‡¬πŸ‡§/πŸ‡ͺπŸ‡Έ from El Salvador, who is helping companies and individuals solve IT challenges in an innovative and creative manner πŸ’‘πŸ’‘πŸ’‘.


Editor guide