androidandroid-jetpack-composematerial-designandroid-tabs

Custom swipe-able tabs for android jetpack compose (Material 3)


How can I make or is there any library that I can use to create swipeable custom tabs like in this picture [Songs, Albums, Artists, Genres => Tab],

enter image description here

I know there are already some tabs which is natively built, they are not swipe-able out of the box, but after some work, we can make them swipe-able. But here in this image, the tables look so cool! I need exactly or similar type of tab that I can implement in my jetpack compose app.

Also animate like this would be plus point.

enter image description here


Solution

  • Have a look at the ScrollableTabRow Composable, it might be exactly what you are looking for. You can apply a custom selection indicator in the indicator slot:

    @Composable
    fun MyComposable() {
    
        val tabsList = listOf("Songs", "Albums", "Artists", "Genres", "Dates", "Folders")
        var selectedTabIndex by remember { mutableIntStateOf(0) }
    
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Top
        ) {
    
            ScrollableTabRow(
                selectedTabIndex = selectedTabIndex,
                edgePadding = 0.dp,
                indicator = { tabPositions ->
                    Column(
                        modifier = Modifier
                            .tabIndicatorOffset(tabPositions[selectedTabIndex])
                            .fillMaxSize()
                            .padding(10.dp)
                            .background(
                                MaterialTheme.colorScheme.secondaryContainer,
                                FilterChipDefaults.shape,
                            )
                    ) {}
                }
            ) {
                tabsList.forEachIndexed { tabIndex, tabName ->
                    FilterChip(
                        modifier = Modifier.
                        wrapContentSize()
                            .zIndex(2f),
                        selected = false,
                        border = null,
                        onClick = { selectedTabIndex = tabIndex },
                        label = {
                            Text(text = tabName, textAlign = TextAlign.Center)
                        }
                    )
                }
            }
    
            // TODO add HorizontalPager with Modifier.weight(1f)
        }
    }
    

    Output:

    Now, you need to integrate it with a HorizontalPager.