Skip to content

The Filter Chip Form Cell

The filter chip form cell allows the user to select either a single value or multiple values from a group of values. The values are displayed using Material Design 3 Chips.

Placement

By default, chips are displayed on a single line that scrolls horizontally:

Filter chips

Filter chips scrolling horizontally

The chips can also wrap onto multiple lines:

Multi-line filter chips

The boolean attribute singleLine determines how the chips are placed.

Appearance

By default, chips are displayed in the outlined style when they are not selected:

Outlined chip

Chips become filled chips with a check icon displayed once they have been selected:

Filled chip with check icon

Chips with leading icons are also supported in this form cell. They are displayed in the outlined style by default and changed to the filled style once selected. The only difference from the regular filter chips is that there is no check icon displayed when chips are selected.

Outlined chip with icon

Filled chip with icon

Selection Mode

The filter chip form cell supports both single selection and multiple selection modes. By default, the form cell is always in multiple selection mode, i.e. multiple values can be selected within a given chip group. To switch to the single selection mode, where only one value can be selected from a given chip group, set the boolean attribute singleSelection to true.

Using Filter Chip Form Cell

The filter chip form cell can be placed within your activity like any traditional Android view:

<com.sap.cloud.mobile.fiori.formcell.FilterChipFormCell
    android:id="@+id/single_line_filter_chip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:error="This is an error message"
    android:entries="@array/filter_chip_form_cell_entries_8"
    app:key="Single Line Chips"/>

Callback Mechanism

The filter chip form cell supports callback listeners, such as OnCellChangeListener<List<Integer>>, to notify the application of changes to the selected choice.

The OnCellChangeListener<List<Integer>> callback is called whenever a chip is selected:

val singleLineChips = findViewById<FilterChipFormCell>(R.id.single_line_filter_chip)
singleLineChips.cellValueChangeListener = object : CellValueChangeListener<List<Int>>()
{
    override fun cellChangeHandler(value: List<Int>?) {
        if (value != null && value.size > 4) {
            singleLineChips.setErrorEnabled(true)
            singleLineChips.setError("This is an error message")
        } else {
            singleLineChips.setErrorEnabled(false)
        }
    }
}

Last update: June 15, 2022