Home > Back-end >  Why can't Icons.Filled.PlayArrow with tint property change color when IconButton is disabled in
Why can't Icons.Filled.PlayArrow with tint property change color when IconButton is disabled in

Time:08-17

The Code A displays a preset Play icon with default black color when IconButton is enabled, and it change gray color automatically when IconButton is disabled.

In Code B, I fill in the Play icon with blue color, but I find the Play icon always displays blue color no matter IconButton is enabled or disabled.

How can I make the Play icon to display blue color when IconButton is enabled, and gray color ( other color ) when IconButton is disabled ?

Code A

IconButton(
        enabled = (mViewMode.playState == EPlayState.PAUSED),
        onClick = {  }
    ) {
        Icon(Icons.Filled.PlayArrow , null, modifier = iconModifier )
    }
  

Code B

IconButton(
        enabled = (mViewMode.playState == EPlayState.PAUSED),
        onClick = {  }
    ) {
        Icon(Icons.Filled.PlayArrow , null, modifier = iconModifier, tint = Color.Blue )
    }

Added Content:

To Gabriele Mariotti: Thanks!

The Code D works well based your way, I don't know why Icon always displays blue color in Code C, could you tell me? and how does LocalContentAlpha.current launch ?

Code C

    val iconBasedEnabled = Color.Blue.copy(alpha = LocalContentAlpha.current)

    IconButton(
        enabled = (mViewMode.playState == EPlayState.PLAYING) || (mViewMode.playState == EPlayState.PAUSED),
        onClick = { mViewMode.stopRecord()  }
    ) {
        Icon(Icons.Filled.StopCircle , null,  tint = iconBasedEnabled )
    }

Code D

   IconButton(
        enabled = (mViewMode.playState == EPlayState.PLAYING) || (mViewMode.playState == EPlayState.PAUSED),
        onClick = { mViewMode.stopRecord()  }
    ) {
        Icon(Icons.Filled.StopCircle , null,  tint = Color.Blue.copy(alpha = LocalContentAlpha.current) )
    }

CodePudding user response:

Apply alpha = LocalContentAlpha.current to the color used in the tint attribute:

Icon(
     Icons.Filled.PlayArrow, null,
     tint = Color.Blue.copy(alpha = LocalContentAlpha.current)
)

enter image description here

CodePudding user response:

Another option for setting disabled alpha is using ContentAlpha.disabled for setting tint. Or gray color you can simply use Color.LightGray instead of Color.Blue.copy(ContentAlpha.disabled)

var enabled by remember { mutableStateOf(true) }

IconButton(
    enabled = enabled,
    onClick = {}
) {
    Icon(
        Icons.Filled.PlayArrow,
        null,
        tint = if(enabled) Color.Blue else Color.Blue.copy(ContentAlpha.disabled)
    )
}
    

 
  • Related