FilterChipGroup-Compose-Android

How to Create FilterChipGroup step-by-step:

1. Define the FilterChipGroup function with parameters:
   • items: A list of strings representing the filter chip labels.
   • defaultSelectedItemIndex: Index of the initially selected item.
   • selectedItemIcon: Representing the icon for the selected item (Optional).
   • itemIcon:Representing the icon for unselected items (Optional).
   • onSelectedChanged: A callback function to be called when the selected item changes, passing the selected index.
   Example:@Composable fun FilterChipGroup( items: List<String>, defaultSelectedItemIndex: Int = 0, selectedItemIcon: ImageVector = Icons.Filled.Done, itemIcon: ImageVector = Icons.Filled.Build, onSelectedChanged: (Int) -> Unit = {} )
2. Create a selectedItemIndex mutableState to store the currently selected item index. Initialize it with the defaultSelectedItemIndex.var selectedItemIndex by remember { mutableStateOf(defaultSelectedItemIndex) }
3. Create a LazyRow to display the filter chips horizontally and allow scrolling and create FilterChips for all items in the items list.LazyRow(userScrollEnabled = true) { items(items.size) { index: Int -> } }
4. Inside the loop, create a FilterChip:FilterChip( modifier = Modifier.padding(end = 6.dp), selected = items[selectedItemIndex] == items[index], onClick = { selectedItemIndex = index onSelectedChanged(index) }, label = { Text(items[index]) }, leadingIcon = if (items[selectedItemIndex] == items[index]) { { Icon( imageVector = selectedItemIcon, contentDescription = “Localized Description”, modifier = Modifier.size(FilterChipDefaults.IconSize) ) } } else { { Icon( imageVector = itemIcon, contentDescription = “Localized description”, modifier = Modifier.size(FilterChipDefaults.IconSize) ) } } )

I hope you understand the step-by-step procedure for creating the FilterChipGroup Composable. You can use this function to create a scrollable list of filter chips that can be used as RadioButton with customizable icons and a callback that returns selectedItemIndex for when the selected item changes.

Screenshots

GitHub

View Github