UI libraries / InstantSearch Android / Widgets
Signature
SortByConnector(
  indexes: Map<Int, IndexName>
  searcher: HitsSearcher
  selected: Int?
)

About this widget

SortBy displays a list of indices, allowing a user to change the way hits are sorted (using replica indices). Another common use case is to let users switch between different indices to show different results.

For this to work, you must define all indices that you pass to SortBy as replicas of the main index.

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class MyActivity : AppCompatActivity() {
  
  val indexTitle = IndexName("mobile_demo_movies")
  val indexYearAsc = IndexName("mobile_demo_movies_year_asc")
  val indexYearDesc = IndexName("mobile_demo_movies_year_desc")
  val searcher = HitsSearcher(
      applicationID = ApplicationID("YourApplicationID"),
      apiKey = APIKey("YourSearchOnlyAPIKey"),
      indexName = indexTitle
  )
  val indexes = mapOf(
      0 to indexTitle,
      1 to indexYearAsc,
      2 to indexYearDesc
  )
  val sortBy = SortByConnector(searcher, indexes, selected = 0)
  val connection = ConnectionHandler(sortBy)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val adapter = ArrayAdapter<String>(this, R.layout.menu_item)
        val view = SortByViewAutocomplete(autoCompleteTextView, adapter)
        connection += sortBy.connectView(view) { indexName ->
            when (indexName) {
                indexTitle -> "Default"
                indexYearAsc -> "Year Asc"
                indexYearDesc -> "Year Desc"
                else -> indexName.raw
            }
        }
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        searcher.cancel()
        connection.disconnect()
    }
}

Low-level API

If you want to fully control the SortBy components and connect them manually, use the following components: To add SortBy to your search experience, use these components:

  • Searcher: The Searcher that handles your searches.
  • SortByViewModel: The logic applied to the index sorting/switching.
  • SortByViewAutocomplete: The concrete view implementing SortByView.
  • IndexPresenter: Optional. The presenter that converts an Index to a String output.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class MyActivity : AppCompatActivity() {
    val indexTitle = IndexName("mobile_demo_movies")
    val indexYearAsc = IndexName("mobile_demo_movies_year_asc")
    val indexYearDesc = IndexName("mobile_demo_movies_year_desc")
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = indexTitle
    )
    val indexes = mapOf(
        0 to indexTitle,
        1 to indexYearAsc,
        2 to indexYearDesc
    )
    val viewModel = SortByViewModel(map = indexes, selected = 0)
    val connection = ConnectionHandler()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val adapter = ArrayAdapter<String>(this, R.layout.menu_item)
        val view = SortByViewAutocomplete(autoCompleteTextView, adapter)

        connection += viewModel.connectSearcher(searcher)
        connection += viewModel.connectView(view){ indexName ->
            when (indexName) {
                indexTitle -> "Default"
                indexYearAsc -> "Year Asc"
                indexYearDesc -> "Year Desc"
                else -> indexName.raw
            }
        }
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        searcher.cancel()
        connection.disconnect()
    }
}

Compose UI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class MyActivity : AppCompatActivity() {
    private val movies = IndexName("mobile_demo_movies")
    private val moviesAsc = IndexName("mobile_demo_movies_year_asc")
    private val moviesDesc = IndexName("mobile_demo_movies_year_desc")
    private val hitsState = HitsState<Movie>()
    private val indexes = mapOf(
        0 to movies,
        1 to moviesAsc,
        2 to moviesDesc
    )
    private val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = indexTitle
    )
    private val sortByState = SortByState()
    private val sortBy = SortByConnector(searcher, indexes, selected = 0)
    private val connections = ConnectionHandler(sortBy)

    init {
        connections += searcher.connectHitsView(hitsState) { it.hits.deserialize(Movie.serializer()) }
        connections += sortBy.connectView(sortByState) { indexName ->
            when (indexName) {
                movies -> "Default"
                moviesAsc -> "Year Asc"
                moviesDesc -> "Year Desc"
                else -> indexName.raw
            }
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MySortByScreen() // your own UI composable to display sorting options
        }
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        searcher.cancel()
        connections.clear()
    }
}

Parameters

indexes
type: Map<Int, IndexName>
Required

The list of indices to search in.

searcher
type: HitsSearcher
Required

The Searcher that handles your searches.

selected
type: Int?
default: null
Optional

The index to select. By default, none is selected.

View

view
type: SortByView
Required

The view that renders the list of indices.
We provide the SortByViewSpinner and SortByViewAutocomplete implementations.

presenter
type: IndexPresenter
default: IndexPresenterImpl
Optional

The presenter that defines the way we want to display an index, taking as input an Index and returning a String.

1
2
3
4
5
6
7
8
9
10
val adapter = ArrayAdapter<String>(this, R.layout.menu_item) // `ArrayAdapter` implementation
val view = SortByViewAutocomplete(autoCompleteTextView, adapter)
sortBy.connectView(view) { index ->
    when (index) {
        indexTitle -> "Default"
        indexYearAsc -> "Year Asc"
        indexYearDesc -> "Year Desc"
        else -> index.indexName.raw
    }
}
Did you find this page helpful?