Filter Toggle

Lets users toggle a specific filter.

Signature

FilterToggleConnector(
    filterState: FilterState,
    filter: Filter,
    isSelected: Boolean,
    groupID: FilterGroupID
)

Explore example code

Browse the Filter Toggle example code on GitHub.

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

import com.algolia.instantsearch.filter.Filter

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val filterState = FilterState()
    val attributeSize = "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

import com.algolia.instantsearch.filter.Filter

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val filterState = FilterState()
    val 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

import com.algolia.instantsearch.filter.Filter

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val filterState = FilterState()
    val attributeSize = "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)