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 .NET for Android or Xamarin.Android, 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)
{
}
}
}
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 Mansur Nashaev who wrote the base of this library.
Top comments (0)