Guides
/
Building Search UI
/
Widgets
Jan. 20, 2022
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:
Copy
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
Copy
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?
