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

Question

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],

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.

Answer 1

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.