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:
The chips can also wrap onto multiple lines:
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:
Chips become filled chips with a check icon displayed once they have been selected:
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.
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)
}
}
}