UI libraries / InstantSearch Android / Widgets

Filter Toggle

Signature 
FilterToggleConnector(
  filterState: FilterState,
  filter: Filter,
  isSelected: Boolean,
  groupID: FilterGroupID
)
See code examples
See demo

About this widget

Filter Toggle is a filtering view that displays any kind of filter, and lets users refine the search results by toggling it on or off.

Examples

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
25

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val filterState = FilterState()
    val attributeSize = Attribute("size")
    val filterSize = Filter.Numeric(attributeSize, NumericOperator.Greater, 40)
    val filterToggle = FilterToggleConnector(filterState, filterSize)
    val connection = ConnectionHandler(filterToggle, searcher.connectFilterState(filterState))

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val viewSize = FilterToggleViewCompoundButton(checkBoxSize)
        connection += filterToggle.connectView(viewSize)
        searcher.searchAsync()
    }

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

Low-level API

If you want to fully control the Filter Toggle components and connect them manually, use the following components:

  • Searcher: The Searcher that handles your searches.
  • FilterState: The current state of the filters.
  • FilterToggleViewModel: The logic applied to the filter.
  • FilterToggleView: The view that renders the filter toggle.
  • FilterPresenter: Optional. The presenter to customize the display of the filters.
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
25
26
27
28

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val filterState = FilterState()
    val attribute = Attribute("facetName")
    val filter = Filter.Facet(attribute, "facetValue")
    val viewModel = FilterToggleViewModel(filter)
    val connection = ConnectionHandler()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val view: FilterToggleView = FilterToggleViewCompoundButton(checkBox) // with your `CompoundButton` view
        connection += searcher.connectFilterState(filterState)
        connection += viewModel.connectFilterState(filterState)
        connection += viewModel.connectView(view)

        searcher.searchAsync()
    }

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

Compose UI

InstantSearch provides the FilterToggleState as a state model, which is an implementation of the FilterToggleView interface. You need to connect FilterToggleState to the FilterToggleConnector or FilterToggleViewModel like any other FilterToggleView implementation.

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
25
26
27
28
29
30
31
32

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val filterState = FilterState()
    val attributeSize = Attribute("size")
    val filterSize = Filter.Numeric(attributeSize, NumericOperator.Greater, 40)
    val filterToggleState = FilterToggleState()
    val filterToggle = FilterToggleConnector(filterState, filterSize)
    val connections = ConnectionHandler(filterToggle)

    init {
        connections += searcher.connectFilterState(filterState)
        connections += filterToggle.connectView(filterToggleState)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyFilterToggle(filterToggleState) // your own UI composable to display filter toggle
        }
        searcher.searchAsync()
    }

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

Parameters

Parameter Description
filterState
type: FilterState
Required

The FilterState that will hold your filters.
filter
type: Filter
Required

The filter to apply.
isSelected
type: Boolean
default: false
Optional

If true, the filter is active when created.
groupID
type: FilterGroupID
default: FilterGroupID(filter.attribute, FilterOperator.And)
Optional

When specified, the filter is grouped under this ID and composed with this operator. Defaults to the used attribute, applying FilterOperator.And with any other filters of this group.

View

Parameter Description
view
type: FilterToggleView
Required

The view that renders the filter toggle.
presenter
type: FilterPresenter
default: FilterPresenterImpl()
Optional

A presenter describing how to display a filter.
Copy 
1
2
3
4
5

val view = FilterToggleViewCompoundButton(compoundButton) // with your own `CompoundButton` view
val presenter = object : FilterPresenter {
    // Implement the interface here
}
filterToggle.connectView(view, presenter)
Did you find this page helpful?
InstantSearch Android v3