Change the width of Tab in Jetpack Compose ScrollableTabRow

Question

I want to modify the width of each Tab, but I can't do it. I know it can be customized, but I just want to modify the width, is there any way?

@OptIn(ExperimentalPagerApi::class)
@Preview
@Composable
fun TabPreviewTest() {

    val scope = rememberCoroutineScope()
    val colorScheme = MaterialTheme.colorScheme
    val pagerState = rememberPagerState(initialPage = 1)
    val titleList = rememberSaveable { mutableListOf("关注", "推荐", "美食", "护肤", "穿搭", "健身塑形", "数码") }

    ScrollableTabRow(
        selectedTabIndex = pagerState.currentPage,
        containerColor = colorScheme.surface.copy(0.94f),
        contentColor = colorScheme.primary,
        divider = { DividerView(start = 0) }) {
        titleList.forEachIndexed { index, title ->
            Tab(text = { Text(text = title) },
                selected = pagerState.currentPage == index,
                selectedContentColor = colorScheme.primary,
                unselectedContentColor = colorScheme.gray,
                onClick = {
                    scope.launch { pagerState.scrollToPage(index) }
                    //onClick(index)
                },
                modifier = Modifier.padding(0.dp).width(0.dp)
            )
        }
    }
}

Answer 1

You can change Tab width when it's above 90.dp since in source code it's measured with Constraints with minimum 90.dp

private val ScrollableTabRowMinimumTabWidth = 90.dp

Unfortunately they added this as a fixed value so you need to copy source code and do the change indicated below.

@Composable
@UiComposable
fun ScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    edgePadding: Dp = TabRowDefaults.ScrollableTabRowPadding,
    indicator: @Composable @UiComposable
        (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
            TabRowDefaults.Indicator(
                Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
            )
        },
    divider: @Composable @UiComposable () -> Unit =
        @Composable {
            TabRowDefaults.Divider()
        },
    tabs: @Composable @UiComposable () -> Unit
) {
    Surface(
        modifier = modifier,
        color = backgroundColor,
        contentColor = contentColor
    ) {
        val scrollState = rememberScrollState()
        val coroutineScope = rememberCoroutineScope()
        val scrollableTabData = remember(scrollState, coroutineScope) {
            ScrollableTabData(
                scrollState = scrollState,
                coroutineScope = coroutineScope
            )
        }
        SubcomposeLayout(
            Modifier.fillMaxWidth()
                .wrapContentSize(align = Alignment.CenterStart)
                .horizontalScroll(scrollState)
                .selectableGroup()
                .clipToBounds()
        ) { constraints ->
            val minTabWidth = ScrollableTabRowMinimumTabWidth.roundToPx()
            val padding = edgePadding.roundToPx()

           //  This is the minimum size it's measured with
            val tabConstraints = constraints.copy(minWidth = minTabWidth)

         // Rest of the code
}

If you copy-paste source code and change minimumTabWidth to 0 you will be able to assign any width modifier.

I posted similar answer here with demo here how to change and the value and use it

Reduce Spacing between Scrollable tabs in compose