Skip to main content
Signature
FilterToggleConnector(
    filterState: FilterState,
    filter: Filter,
    isSelected: Boolean,
    groupID: FilterGroupID
)
Explore example code

​
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

Kotlin
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.
Kotlin
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.
Kotlin
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

​
filterState
FilterState
required
The FilterState that will hold your filters.
​
filter
Filter
required
The filter to apply.
​
isSelected
Boolean
If true, the filter is active when created.
​
groupID
FilterGroupID
default: FilterGroupID(filter.attribute, FilterOperator.And)
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

​
view
FilterToggleView
required
The view that renders the filter toggle.
​
presenter
FilterPresenter
default:"FilterPresenterImpl()"
A presenter describing how to display a filter.
Kotlin
val view = FilterToggleViewCompoundButton(compoundButton) // with your own `CompoundButton` view
val presenter = object : FilterPresenter {
    // Implement the interface here
}
filterToggle.connectView(view, presenter)
⌘I