Develop Reference

How to make bottom nav background color lighter with elevation in Compose?

In XML we have material3 bottom navigation bar style. It's color achieved by using surface color with elevation = 3dp. So in XML higher elevation means lighter background color.
I'm trying to implement same behavior in Compose. But it looks like elevation in Compose doesn't change bottom navigation's color but only adding shadow. So can we apply same behavior in Compose somehow or the only way is to add separate bottom nav's color in Color.kt?
BottomNavigation(
modifier = Modifier.heightIn(80.dp),
backgroundColor = MaterialTheme.colorScheme.surface,
elevation = 3.dp
)

You are probably not using material3 library but the old one. There is no BottomNavigation composable in material3, it's called NavigationBar and it has tonalElevation argument instead of elevation that does what you want.

Jetpack Compose: Remove background of Dialog (Android)

i have the following snippet for showing a simple dialog with some text in Jetpack Compose on Android:
Dialog(onDismissRequest = { showDialog.value = false }) {
Text(
text = "Hello",
color = Color.Black,
fontSize = 24.sp,
modifier = Modifier
.background(
color = Color.Green,
shape = RoundedCornerShape(size = 16.dp)
)
.padding(8.dp)
)
}
which is producing the following output:
Now the tricky part starts: As the charming green rounded shape and the black text is defined, the white background at the edges is not. So where is this white background coming from?
The whole composable screen itself is wrapped into a custom theme at some other point. I already replaced every theme color to a different one to check if there is a change in the dialog's background.
I also tried wrapping the dialog itself in a second theme to override all other colors, but also without success.
Note: The white background is also there when i define a raw text composable without any styling, so it seems to be some kind of standard background of the dialog.
The goal is to have the white background color removed or replaced by a transparent color to only have the rounded shape on the dimmed background.

Thanks to everyone providing useful input, in the end the information that my code is working fine in different project setups made me think in a different direction.
So i tried to move my code some layers up and out of the theme definition. No other result.
But then it came to my mind that i have a mixed project with Compose and good old view implementations and therefore also some xml styles.
Digging a little bit deeper into the compose androidx.compose.ui.window.Dialog one can see that there is an invocation of R.style.DialogWindowTheme in the DialogWrapper. I'm not 100% sure, but i assume that my own xml definitions are overriding some properties of this style and affect the appearance of the compose dialog.
So if you also have similar troubles like i had check the following:
Do you use xml styles and compose in the same project?
Did you create a style for dialogs and override dialogTheme in your theme?
<item name="android:dialogTheme">#style/AppTheme.SomeDialogStyles</item>
Then please check if you set a custom background color
<item name="android:background">#color/some_color</item>
The solution for my issue was to remove the android:background attribute. Now i'm smoketesting all existing dialogs if this has some negative impact, but my issue with the white background in the compose dialog is solved!

Try this:
Dialog(
onDismissRequest = {
}
) {
Column(modifier = Modifier.background(color = Color.Transparent)) {
Text(
text = "Hello",
color = Color.Black,
fontSize = 24.sp,
modifier = Modifier
.background(
color = Color.Green,
shape = RoundedCornerShape(size = 16.dp)
)
.padding(8.dp)
)
}
}

I was try with Dialog and no way to clear flag WindowManager.LayoutParams.FLAG_DIM_BEHIND.
You can try to use Popup to replace Dialog, everything work good for me.
Popup(
onDismissRequest = {},
properties = PopupProperties(
focusable = true,
dismissOnBackPress = false,
dismissOnClickOutside = false,
excludeFromSystemGesture = true,
)
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
.background(Color.Transparent)
) {
// Your content code is here
}
}

How to change elevation color in Compose?

Hi I am creating an app with Jetpack Compose I am and using Card composable with elevation. I need to change the elevation color, but I don't know how.

You can use the shadow modifier. For example:
modifier = Modifier
.shadow(ambientColor = Color.Blue, elevation = 15.dp)

Clip in ConstraintLayout in Jetpack Compose not working

I want to make corners of ConstraintLayout rounded without using CardView. My current code is this but not working
ConstraintLayout(
modifier
.fillMaxWidth()
.clip(RoundedCornerShape(100.dp))
)
{...}

It is working guys, I just added background after clip() and it's working fine.

Why are transparent composables in Jetpack Compose not completely transparent?

In a project I am creating, I want to have a transparent floating button button in one of my screens.
The button should be of a color RGB(126,26,71), with 75% alpha channel.
But, when I create said button composable, it looks like this:
As you can see, it has slightly white, transparent background as well
This is how the composable is created:
FloatingActionButton(
onClick = {//TODO},
backgroundColor = MediumOpaquePurple, //the color I specified above
elevation = FloatingActionButtonDefaults.elevation(Space8)
)
{
Icon(
imageVector = Icons.Default.Delete,
contentDescription = "Delete notifications"
)
}
Weird thing is that when I use the same color for ExtendedFloatingActionButton composable, it looks perfectly fine and there's no white background in it.
Any help apprectiated.
Thanks

For FloatingActionButton the solution is to set elevation(0.dp). Just omitting the call is not enough, because it has a default value of 6.dp.
ExtendedFloatingActionButton acts a bit differently and does need this tweaking.