DEV Community 👩‍💻👨‍💻

Cover image for Floating Material Search View with Xamarin.Android
Federico Navarrete
Federico Navarrete

Posted on • Updated on

Floating Material Search View with Xamarin.Android

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:

NuGet Badge Xamarin-MaterialSearchBar


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" />
Enter fullscreen mode Exit fullscreen mode

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

        }
    }
}
Enter fullscreen mode Exit fullscreen mode

And there you have it!

example

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 Mansur Nashaev who wrote the base of this library.

Follow me at:

LinkedIn YouTube Instagram Cyber Prophets Sharing Your Stories
LinkedIn YouTube Instagram RedCircle Podcast RedCircle Podcast

sponsor me

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.