How to implement and customize android search dialog

In this tutorial, we are going to learn how to implement and customize android search dialog in our android application. Search functionality is one of the major features most android applications have.

In my most of projects we needed a search dialog which had to pop up and perform searches based on input and show results. And i found a great library which help to make my work easy. Android Search dialog library is an awesome and customizable search dialog with built-in search options.

You can check this another cool tutorial:

Top 10 Android Libraries — May 2017

How to implement and customize Android Search Dialog?

First add jitpack to your projects build.gradle file

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
   	}
}

Then add the dependency in modules build.gradle file

dependencies {
    compile 'com.github.mirrajabi:search-dialog:1.0'
}

Simple usage

If you just want to use the simple search dialog first you need to provide searchable items. to achieve this you should implement Searchable in your model.

You can see the SampleSearchModel for example :

public class SampleSearchModel implements Searchable {
    private String mTitle;

    public SampleSearchModel(String title) {
        mTitle = title;
    }

    @Override
    public String getTitle() {
        return mTitle;
    }

    public SampleSearchModel setTitle(String title) {
        mTitle = title;
        return this;
    }
}

Now generate some search options in your activity :

private ArrayList<SampleSearchModel> createSampleData(){
        ArrayList<SampleSearchModel> items = new ArrayList<>();
        items.add(new SampleSearchModel("First item"));
        items.add(new SampleSearchModel("Second item"));
        items.add(new SampleSearchModel("Third item"));
        items.add(new SampleSearchModel("The ultimate item"));
        items.add(new SampleSearchModel("Last item"));
        items.add(new SampleSearchModel("Lorem ipsum"));
        items.add(new SampleSearchModel("Dolor sit"));
        items.add(new SampleSearchModel("Some random word"));
        items.add(new SampleSearchModel("guess who's back"));
        return items;
    }

Then you just need to add the below lines where you want to show the dialog :

new SimpleSearchDialogCompat(MainActivity.this, "Search...",
                        "What are you looking for...?", null, createSampleData(),
                        new SearchResultListener<SampleSearchModel>() {
                            @Override
                            public void onSelected(BaseSearchDialogCompat dialog,
                                                   SampleSearchModel item, int position) {
                                Toast.makeText(MainActivity.this, item.getTitle(),
                                        Toast.LENGTH_SHORT).show();
                                dialog.dismiss();
                            }
                        }).show();

The constructor parameters are

SimpleSearchDialogCompat(Context context, String title, String searchHint,
                                    @Nullable Filter filter, ArrayList<T> items,
                                    SearchResultListener<T> searchResultListener)

Advanced usage

The layout

We used simple layout for simple search dialog but you can use anything else and in other word you can do it own way. Of course your layout should have these two views :

  • An EditText to use as search key input
  • A RecyclerView for showing the results in it

The search dialog

You can use your custom layouts, adapters and search options by creating a class inheriting the BaseSearchDialogCompat take a look at SimpleSearchDialogCompat to see an example of how it can be done You should implement the BaseSearchDialogCompat methods :

// handle your view with this one
   protected abstract void getView(View view);
   // Id of your custom layout
   @LayoutRes protected abstract int getLayoutResId();
   // Id of the search edittext you used in your custom layout
   @IdRes protected abstract int getSearchBoxId();
   // Id of the recyclerview you used in your custom layout
   @IdRes protected abstract int getRecyclerViewId();

The search filter

You can use your custom filters for text searching. The one used in SimpleSearchDialogCompat is SimpleSearchFilter. It checks the search key and if an item and the key had partially exact same letters it will add that item to results and also if the CheckLCS was set to true, it will check if the amount of matching letters was bigger than the given AccuracyPercentage the item will be added to results

The adapter

the one used in SimpleSearchDialogCompat is so simple despite its too long. the main functionality is in initializeViews method. you can create your custom adapters and use it instead of this one

The StringsHelper

it has two methods which you can use for highlighting the results.

/*
 * Returns a SpannableString with 
 * highlighted LCS(Longest Common Subsequence)
 * of two strings with the givven color
 */
SpannableStringBuilder highlightLCS(String text1, String text2, int highlightColor);

// Returns the LCS(Longest Common Subsequence) of two strings
String lcs(String text1, String text2)

Hope you enjoy this tutorial isn’t it? Please comment us with your suggestion.

 

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...