CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-tabs
Mark Delphi
Mark Delphi

Reputation: 1765

How do I remove undeline of TabRow in Jetpack Compose?

I am tiring to remove the underline of TabRow, but did not succeed. Here is the code:

@ExperimentalPagerApi
@Composable
fun Tabs(pagerState: PagerState) {
    val tabs = listOf(R.string.add, R.string.add)
    val scope = rememberCoroutineScope()
    val currentPage = pagerState.currentPage
    TabRow(
        modifier = Modifier
            .padding(start = 36.dp, top = 16.dp, end = 36.dp)
            .clip(shape = RoundedCornerShape(16.dp)),
        selectedTabIndex = currentPage,
        backgroundColor = Color.Transparent,
        tabs = {
            tabs.forEachIndexed { index, tab ->
                Tab(
                    modifier = Modifier.clip(RoundedCornerShape(16.dp)),
                    text = {
                        Text(text = stringResource(id = tab))
                    },
                    selected = currentPage == index,
                    onClick = {
                        scope.launch {
                            pagerState.animateScrollToPage(index)
                        }
                    }
                )
            }
        }
    )
}

enter image description here

I only want to have the selected color.

Upvotes: 13

Views: 5082

Answers (4)

CoolMind
CoolMind

Reputation: 28875

From Using primary tabs using jetpack compose.

var tabIndex by remember { mutableIntStateOf(0) }
ScrollableTabRow(
    selectedTabIndex = tabIndex,
    divider = {},
    indicator = { tabPositions ->
        if (tabIndex < tabPositions.size) {
            TabRowDefaults.SecondaryIndicator(
                modifier = Modifier
                    .tabIndicatorOffset(tabPositions[tabIndex]),
                color = ...,
            )
        }
    },
) {

enter image description here

Upvotes: 2

Felix Kariuki
Felix Kariuki

Reputation: 684

When using a Scrollable tabRow in material 3 you can remove the underline below the entire scrollable tab row and the indicator for individual selected tabs like this

ScrollableTabRow(
        selectedTabIndex = tabIndex, edgePadding = 16.dp,
        indicator = {

        }, divider = {

        }
    ) { }

removing the tab indicator only

ScrollableTabRow(
        selectedTabIndex = tabIndex, edgePadding = 16.dp,
        indicator = {

        }
    ) { }

and to remove the underline below the entire scrollable tab row

ScrollableTabRow(
        selectedTabIndex = tabIndex, edgePadding = 16.dp,
        divider = {

        }
    ) { }

Upvotes: 7

Brian Roper
Brian Roper

Reputation: 538

The divider answer no no longer works if you upgrade to material 3. Changing the indicator the same way worked for me.

TabRow(
       selectedTabIndex = selectedTab.ordinal,
       containerColor = Color.White,
       indicator = {

       }
) { }

Upvotes: 0

Thracian
Thracian

Reputation: 67443

set divider param of TabRow as divider={}. Default one is

divider: @Composable () -> Unit = @Composable {
    Divider()
}

Upvotes: 21

Related Questions