Dialog Search Filter Examples

Searchable Dialog in Android: A Step-by-Step Guide

Have you ever wanted to implement a search functionality in your Android app using a dialog? Searchable dialog is a common feature in many Android apps such as messaging and email apps. In this article, we will take a step-by-step approach to implement searchable dialog in Android using Kotlin.

Prerequisites

Before we dive into the implementation, make sure you have the following:

• Android Studio installed on your machine
• Basic knowledge of Android development using Kotlin
• A basic understanding of RecyclerView and Adapters

Implementation Steps

Step 1: Create a layout for the dialog

In this step, we will create a layout for the searchable dialog. Create a new XML file named search_dialog.xml in your res/layout directory and add the following code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Search"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

The layout contains an EditText for the search input and a RecyclerView to display the search results.

Step 2: Create a custom adapter for the RecyclerView

In this step, we will create a custom adapter for the RecyclerView to display the search results. Create a new Kotlin file named SearchAdapter.kt and add the following code:

class SearchAdapter(private val items: List<String>) : RecyclerView.Adapter<SearchAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_search, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(items[position])
    }

    override fun getItemCount() = items.size

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        fun bind(item: String) {
            itemView.findViewById<TextView>(R.id.item_text).text = item
        }
    }
}

The adapter takes a list of strings as input and binds each string to a view holder. We also create a view holder to hold the view for each search result.

Step 3: Create a layout for the search result item

In this step, we will create a layout for the search result item that will be displayed in the RecyclerView. Create a new XML file named item_search.xml in your res/layout directory and add the following code:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"/>

The layout contains a TextView to display the search result item.

Step 4: Create a SearchableDialogFragment

In this step, we will create a SearchableDialogFragment that will display the searchable dialog. Create a new Kotlin file named SearchableDialogFragment.kt and add the following code:

class SearchableDialogFragment : DialogFragment() {

    private lateinit var searchEditText: EditText
    private lateinit var recyclerView: RecyclerView

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val view = LayoutInflater.from(context).inflate(R.layout.search_dialog, null)
        searchEditText = view.findViewById(R.id.search)
        recyclerView = view.findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(context)

        val adapter = SearchAdapter(listOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5"))
        recyclerView.adapter = adapter

        searchEditText.addTextChangedListener(object : TextWatcher {

            override fun afterTextChanged(s: Editable?) {}

            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                adapter.filter.filter(s)
            }
        })

        return AlertDialog.Builder(requireContext())
            .setView(view)
            .create()
    }
}

The SearchableDialogFragment inflates the search_dialog layout and sets up the RecyclerView with a custom adapter. We also add a TextWatcher to the EditText to filter the search results based on the user input.

Step 5: Display the SearchableDialogFragment

In this step, we will display the SearchableDialogFragment when the user clicks a button. Create a new Kotlin file named MainActivity.kt and add the following code:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val searchButton = findViewById<Button>(R.id.search_button)
        searchButton.setOnClickListener {
            SearchableDialogFragment().show(supportFragmentManager, "SearchableDialogFragment")
        }
    }
}

The MainActivity sets up a button that, when clicked, displays the SearchableDialogFragment.

More Examples

Users can easily invoke the dialog via a button click, then search data and close the dialog.

In this section we will look at solutions regarding how to implement this type of configuration in our app. We will look at the best android dialog search libraries and look at examples of how to use them be it in Kotlin or java.

(a). Search-Dialog

This is an easy to use, yet very customizable search dialog.

It provides you with an awesome and customizable search dialog with built-in search options.

Here is a demo:

Let's look at how to use it.

Step 1: Install it

The first step is to install. In your root-level build.gradle specify jitpack as a maven repository:

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

Then in the app-level build.gradle specify the dependency as follows:

implementation 'com.github.mirrajabi:search-dialog:1.2.4'

Now sync to download the library.

Step 2: Write Code

The second step is to write your code. The first thing here is to implement the Searchable interface in your model class:

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;
    }
}

You then prepare the data that will be searched:

    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 create and show the search dialog as follows:

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) {
                                // If filtering is enabled, [position] is the index of the item in the filtered result, not in the unfiltered source
                                Toast.makeText(MainActivity.this, item.getTitle(),
                                        Toast.LENGTH_SHORT).show();
                                dialog.dismiss();
                            }
                        }).show();

Example

If you want a full example that includes usage of a customadapter then find it here

Reference

Here is the reference:

No.	Link
1.	Reference
2.	Example

(b). Search Dialog

Android Search Dialog Library.

Here is the demo image:

Let's see how to create a search dialog with this solution.

Step 1: Install it

The first step is to install it. Add jitapck as follows:

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

Then add the implementation statement in your build.gradle file:

implementation 'com.github.ajithvgiri:search-dialog:v1.5'

Now sync it.

Step 2: Write Code

The second step is to initialize the search dialog. Here is how you do it in kotlin:

 val searchableDialog = SearchableDialog(this, searchListItems, getString(R.string.country))
    searchableDialog.setOnItemSelected(this) // implement 'OnSearchItemSelected'in your Activity

And in java:

      List<SearchListItem> searchListItems = new ArrayList<>();
      SearchableDialog  searchableDialog = new SearchableDialog(this, searchListItems, "Title");

In both cases we are assuming that your model contains id and title.

Now to show the dialog simply invoke the show() method:

        searchableDialog.show();

To get the selected item from the dialog in Kotlin:

         @Override
         public void onClick(int position, SearchListItem searchListItem) {
                searchableDialog.dismiss();
               // searchListItem.getId(); returns id
              // searchListItem.getTitle(); returns title
         }

And in java:

         @Override
         public void onClick(int position, SearchListItem searchListItem) {
                searchableDialog.dismiss();
               // searchListItem.getId(); returns id
              // searchListItem.getTitle(); returns title
         }

Example

Let's now look at a full search dialog example in kotlin using this solution.

Start by following the installation steps we'd covered.

Then replace your main activity with the following code:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.ajithvgiri.searchdialog.OnSearchItemSelected
import com.ajithvgiri.searchdialog.SearchListItem
import com.ajithvgiri.searchdialog.SearchableDialog
import com.google.android.material.textfield.TextInputEditText
import kotlinx.android.synthetic.main.country_details.*

class MainActivity : AppCompatActivity(), OnSearchItemSelected {

    lateinit var searchableDialog: SearchableDialog
    var searchListItems: ArrayList<SearchListItem> = ArrayList()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        for (i in 0..9) {
            val searchListItem = SearchListItem(i, "Country $i")
            searchListItems.add(searchListItem)
        }

        searchableDialog = SearchableDialog(this, searchListItems, getString(R.string.country))
        searchableDialog.setOnItemSelected(this)

        val countryTextInputEditText = findViewById<TextInputEditText>(R.id.countryTextInputEditText)
        countryTextInputEditText.setOnClickListener { searchableDialog.show() }

    }

    override fun onClick(position: Int, searchListItem: SearchListItem) {
        searchableDialog.dismiss()
        countryCodeTextView.text = searchListItem.id.toString()
        countryNameTextView.text = searchListItem.title
    }
}

That's it. You can find the code here.

Reference

Find complete reference below:

No.	Link
1.	Example
2.	Reference

(c). Android-Multi-Select-Dialog

A multi choice select dialog with Search and Text highlighting.

The solutions we've looked so far allows you to search and only click a single item. However sometimes you may need to search and select multiple search results. This is what this solution offers you.

Here are its features:

• Provides Multi selection Dialog
• Search through list
• Highlighted the search text

Here is a demo:

Step 1: Install it

1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

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

2. Add the dependency

    dependencies {
             compile 'com.github.abumoallim:Android-Multi-Select-Dialog:v1.9'
    }

Then sync.

Step 2: Write Code

Then you instantiate the multichoice dialog and set its properties:

 //MultiSelectModel
        MultiSelectDialog multiSelectDialog = new MultiSelectDialog()
                .title(getResources().getString(R.string.multi_select_dialog_title)) //setting title for dialog
                .titleSize(25)
                .positiveText("Done")
                .negativeText("Cancel")
        .setMinSelectionLimit(1) //you can set minimum checkbox selection limit (Optional)
        .setMaxSelectionLimit(listOfCountries.size()) //you can set maximum checkbox selection limit (Optional)
                .preSelectIDsList(alreadySelectedCountries) //List of ids that you need to be selected
                .multiSelectList(listOfCountries) // the multi select model list with ids and name
                .onSubmit(new MultiSelectDialog.SubmitCallbackListener() {
                    @Override
                    public void onSelected(ArrayList<Integer> selectedIds, ArrayList<String> selectedNames, String dataString) {
                        //will return list of selected IDS
                        for (int i = 0; i < selectedIds.size(); i++) {
                            Toast.makeText(MainActivity.this, "Selected Ids : " + selectedIds.get(i) + "\n" +
                                    "Selected Names : " + selectedNames.get(i) + "\n" +
                                    "DataString : " + dataString, Toast.LENGTH_SHORT).show();
                        }

                    }

                    @Override
                    public void onCancel() {
                        Log.d(TAG,"Dialog cancelled");
                    }

                });

Finally you show it:

multiSelectDialog.show(getSupportFragmentManager(), "multiSelectDialog");

Example

Let's look at a search dialog with multichoice option using this library:

Install the library as we had discussed:

Then replace you main activity with the following code:

MainActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.abdeveloper.library.MultiSelectDialog;
import com.abdeveloper.library.MultiSelectModel;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private String TAG = "Cancel";

    Button show_dialog_btn;

    MultiSelectDialog multiSelectDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        show_dialog_btn = findViewById(R.id.show_dialog);
        show_dialog_btn.setOnClickListener(this);

        //preselected Ids of Country List
        final ArrayList<Integer> alreadySelectedCountries = new ArrayList<>();
        alreadySelectedCountries.add(1);
        alreadySelectedCountries.add(3);
        alreadySelectedCountries.add(4);
        alreadySelectedCountries.add(7);

        //List of Countries with Name and Id
        ArrayList<MultiSelectModel> listOfCountries= new ArrayList<>();
        listOfCountries.add(new MultiSelectModel(1,"INDIA"));
        listOfCountries.add(new MultiSelectModel(2,"USA"));
        listOfCountries.add(new MultiSelectModel(3,"UK"));
        listOfCountries.add(new MultiSelectModel(4,"UAE"));
        listOfCountries.add(new MultiSelectModel(5,"JAPAN"));
        listOfCountries.add(new MultiSelectModel(6,"SINGAPORE"));
        listOfCountries.add(new MultiSelectModel(7,"CHINA"));
        listOfCountries.add(new MultiSelectModel(8,"RUSSIA"));
        listOfCountries.add(new MultiSelectModel(9,"BANGLADESH"));
        listOfCountries.add(new MultiSelectModel(10,"BELGIUM"));
        listOfCountries.add(new MultiSelectModel(11,"DENMARK"));
        listOfCountries.add(new MultiSelectModel(12,"GERMANY"));
        listOfCountries.add(new MultiSelectModel(13,"HONG KONG"));
        listOfCountries.add(new MultiSelectModel(14,"INDONESIA"));
        listOfCountries.add(new MultiSelectModel(15,"NETHERLAND"));
        listOfCountries.add(new MultiSelectModel(16,"NEW ZEALAND"));
        listOfCountries.add(new MultiSelectModel(17,"PORTUGAL"));
        listOfCountries.add(new MultiSelectModel(18,"KUWAIT"));
        listOfCountries.add(new MultiSelectModel(19,"QATAR"));
        listOfCountries.add(new MultiSelectModel(20,"SAUDI ARABIA"));
        listOfCountries.add(new MultiSelectModel(21,"SRI LANKA"));
        listOfCountries.add(new MultiSelectModel(130,"CANADA"));

        //MultiSelectModel
        multiSelectDialog = new MultiSelectDialog()
                .title(getResources().getString(R.string.multi_select_dialog_title)) //setting title for dialog
                .titleSize(25)
                .positiveText("Done")
                .negativeText("Cancel")
                .setMinSelectionLimit(0)
                .setMaxSelectionLimit(listOfCountries.size())
                .preSelectIDsList(alreadySelectedCountries) //List of ids that you need to be selected
                .multiSelectList(listOfCountries) // the multi select model list with ids and name
                .onSubmit(new MultiSelectDialog.SubmitCallbackListener() {
                    @Override
                    public void onSelected(ArrayList<Integer> selectedIds, ArrayList<String> selectedNames, String dataString) {
                        //will return list of selected IDS
                        for (int i = 0; i < selectedIds.size(); i++) {
                            Toast.makeText(MainActivity.this, "Selected Ids : " + selectedIds.get(i) + "\n" +
                                    "Selected Names : " + selectedNames.get(i) + "\n" +
                                    "DataString : " + dataString, Toast.LENGTH_SHORT).show();
                        }

                    }

                    @Override
                    public void onCancel() {
                        Log.d(TAG,"Dialog cancelled");

                    }
                });

    }

    @Override
    public void onClick(View view) {
        multiSelectDialog.show(getSupportFragmentManager(), "multiSelectDialog");
    }
}

Reference

Here is the reference:

No.	Link
1.	Example
2.	Reference

Conclusion

In this article, we learned how to implement searchable dialog in Android using Kotlin. We created a layout for the dialog, a custom adapter for the RecyclerView, a layout for the search result item, and a SearchableDialogFragment to display the dialog. We also learned how to display the dialog when the user clicks a button. You can now use this knowledge to implement a searchable dialog in your own Android app.