API Reference / InstantSearch Android / Filter Toggle

Filter Toggle

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

About this widget # A

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

Examples # A

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("AJ0P3S7DWQ"),
        apiKey = APIKey("90dfaaf5755e694f341fe68f6e41a6d4"),
        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("AJ0P3S7DWQ"),
        apiKey = APIKey("90dfaaf5755e694f341fe68f6e41a6d4"),
        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("AJ0P3S7DWQ"),
        apiKey = APIKey("90dfaaf5755e694f341fe68f6e41a6d4"),
        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 # A

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 # A

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