As per our requirement I need to set the container color of the BototmNav with 60% opacity. Due to this, when any icon is selected, container colors is displayed as background to the selected icon in the active state. It looks very weird.
I looked into this post https://stackoverflow.com/a/74489290/3440312
I have given same color to both container and indicator. i.e. for ex: Yellow with 60% opacity. But still in the active state, oval shaped yellow background shows behind the selected icon. It works only when the color is given with full opacity. If I try passing any color by reducing it's opacity, it doesn't work.
On looking further, I checked that inside the NavigationBarItem, they are explicitly making the indicator color with 100% opacity in active state.
val animationProgress: Float by animateFloatAsState(
targetValue = if (selected) 1f else 0f,
animationSpec = tween(ItemAnimationDurationMillis)
)
val indicator = @Composable {
Box(
Modifier
.layoutId(IndicatorLayoutIdTag)
.background(
color = colors.indicatorColor.copy(alpha = animationProgress),
shape = NavigationBarTokens.ActiveIndicatorShape.toShape(),
)
)
}
I need to prevent it. How to achieve it? Has anyone faced similar problem?