Guides / Building Search UI / Widgets

Customize an InstantSearch Android Widget

With InstantSearch Android, you are in control of every widget’s UI. Each widget is represented by an interface, for which Algolia provides default implementations. If these implementations don’t fit your purpose, you can either customize the existing implementation, or create your own.

Customize the existing implementation

All InstantSearch widgets are built through composition. This enables you to adapt the underlying View and add the behavior you want on top of the existing implementation.

For example, here’s how you can have a SearchBoxViewImpl that always displays its content uppercase:

1
2
  val searchBoxView = SearchBoxViewImpl(SearchView(context))
  searchBoxView.searchView.inputType = InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS

Implement your own View

When you want to replace the existing behavior of a default implementation, you should implement your own View.

Example

Here is a custom SearchBoxView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class SearchBoxViewEditText(
  public val editText: EditText
) : SearchBoxView {

  override var onQueryChanged: ((String?) -> Unit)? = null
  override var onQuerySubmitted: ((String?) -> Unit)? = null

  init {
      editText.addTextChangedListener(object : TextWatcher {

          override fun afterTextChanged(s: Editable?) = Unit

          override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit

          override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
              onQueryChanged?.invoke(s?.toString())
          }
      })
  }

  override fun setItem(item: String?) {
      editText.setText(item)
  }
}
Did you find this page helpful?