Custom FilterChip Group using Jetpack Compose in Android

In this tutorial, we learn 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 = {}
    )

1. Create a selectedItemIndex mutableStateOf to store the currently selected item index. Initialize it with the defaultSelectedItemIndex.

    var selectedItemIndex by remember { mutableStateOf(defaultSelectedItemIndex) }
   

2. 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 ->
    }
    }
   

3. Inside the items(), create a FilterChip

   %[https://github.com/Rhythamtech/FilterChipGroup-Compose-Android]

    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.

Example:

val dateRanges = listOf("Today", "This Week", "This Month", "Custom")

FilterChipGroup(
    items = dateRanges,
    onSelectedChanged = { selectedIndex ->
        // Filter the list of events based on the selected date range
        when (dateRanges[selectedIndex]) {
            "Today" -> filterEventsByDateRange("Today")
            "This Week" -> filterEventsByDateRange("This Week")
            "This Month" -> filterEventsByDateRange("This Month")
            "Custom" -> showCustomDateRangeDialog()
        }
    }
)