Custom FilterChip Group using Jetpack Compose in Android

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

    %[github.com/Rhythamtech/FilterChipGroup-Comp..

     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()
        }
    }
)