How to disabled ripple effect in TabRow or Tab in Jetpack Compose?


I would like to use the TabRow, but when I click the background has a ripple effect that I do not want. Is there a way to change this? I have the Tab’s selectedContectColor equal to the same background color of the page, but I still see a white ripple effect.

   modifier = Modifier.height(20.dp),
   selectedTabIndex = selectedIndex,
   indicator = { tabPositions ->
       modifier = Modifier.customTabIndicatorOffset(
         currentTabPosition = tabPositions[lazyListState.firstVisibleItemIndex]
         color = RED
   backgroundColor = BLACK
) {
    tabList.forEachIndexed{ index, tab ->
     val selected = (selectedIndex == index)
      modifier = Modifier
// Have tried different solutions here where there is a .clickable
// and the indication = null, and set interactionSource = remember{  
      selected = selected,
      selectedContentColor = BLACK,
      onClick = { 
      text = {
        Text("Text Code")



You can see in these docs that the selectedContentColor affects the ripple

Tab Docs

 More docs

More docs


The ripple is implemented in a selectable modifier defined inside the Tab.

You can’t disable it but you can change the appearance of the ripple that is based on a RippleTheme. You can define a custom RippleTheme and apply to your composable with the LocalRippleTheme.

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {

private object NoRippleTheme : RippleTheme {
    override fun defaultColor() = Color.Unspecified

    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f,0.0f,0.0f,0.0f)

Answered By – Gabriele Mariotti

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published