Looking at design documentation of <NavigationBar>...

# compose

[Guilherme Delgado]

Looking at design documentation of NavigationBar from material3, the secondaryContainer is the property used to change active item color. But, apparently, it completely ignores the alpha channel. Any Idea why?

@Composable
fun NavigationBarTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = lightColorScheme(
            secondaryContainer = orange.copy(alpha = 0.3f) //val orange = Color(0xFFFF5704)
        ),
        ...
    )
}

[Landry Norris]

It seems common for material containers to ignore alpha. I asked about this when I needed to apply alpha to a DropdownMenu, and the Google team said it wasn’t in the material spec.

[Filip Wiesner]

I believe containers ignore alpha channel because items with elevation - shadow (usually containers) don't play nicely with transparency. That's just my interpretation tho

[Landry Norris]

If you really want to apply an alpha, you can often go into the source code and copy the source for the Composable you are using, then modify it to fit your needs. I did that with the DropdownMenu popup.

[Guilherme Delgado]

@Filip Wiesner But you can always “hack” ARGB into the RGB, so they can’t prevent it 😅 But makes sense your point of view

[Guilherme Delgado]

@Landry Norris it was easier to convert ARGB to RGB in this case. The IDE color picker helped 😊

[Guilherme Delgado]

message has been deleted

[Filip Wiesner]

Just saying that you can't really have elevation and transparency at the same time and containers do usually have elevation. That's all

[Landry Norris]

That will work as long as you are placing it above a solid white background.

[Guilherme Delgado]

true! And that’s the case fortunatly

[Guilherme Delgado]

Well pointed 👍

[Giang]

If you want the code to have more clarity of which color was used, you can use compositeColor to place it on top of a solid color

orange.copy(alpha = 0.3f).compositeOver(Color.WHITE)