remove indicator color from NavigationBarItem in BottomMenu android compose

579 Views Asked by At

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?

0

There are 0 best solutions below