Floating Material Search View with Xamarin.Android

#xamarin #android #csharp #material

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 you will like it and help you build the next generation of Apps!

Step 1. Download the package from NuGet:

Step 2. Define your control in your 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:

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)
        {

        }
    }
}