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 remove spacing Text is adding in Jetpack Compose

I'm trying to make a bar graph, that has labels on some of them. Image of the bar as is right now.
The labels below each vertical bar is adding unwanted spacing between the bars.
I would like the remove that extra spacing between each bar, but I don't know how.
I made the bars with Jetpack Compose, like this (I removed most of the code. It isn't necessary to show in this case):
Column(
modifier = Modifier
.width(8.dp)
) {
Column(
modifier = modifier
) {
Box(
modifier = Modifier
)
Box(
modifier = Modifier
)
}
vText(
text = "21",
modifier = Modifier,
)
}
I added the bars in a Row().
I need a solution as to how I can make the space between each bar the same, but still be able to show the labels. I tried SpaceEvenly in the Row(), but that just cuts off the label.

I found a solution. I edited the Text() to include the modifier .wrapContentSize(unbounded = true).
Image of the result

In Jetpack compose, what is difference using in BasicTextField for textStyle property LocalTextStyle or MaterialTheme?

I've this question, maybe trivial, setting up BasicTextField textStyle property,for set text color for example, I can use one of this 3:
textStyle = TextStyle(color = Color.White)
textStyle = LocalTextStyle.current.copy(color = Color.White)
textStyle = MaterialTheme.typography.body1.copy(color = Color.White)
someone could explain me the difference pros/cons? Thank you in advance

textStyle = TextStyle(color = Color.White)
This one is just using hardcoded style for composable. Nothing fancy
textStyle = LocalTextStyle.current.copy(color = Color.White)
This one is copying style that is provided by a CompositionLocal via composable higher up in the hierarchy. The advantage is that you do not hardcode anything about the style in your composable. Instead - higher composable is providing the style dynamically for you. Disadvange - the LocalTextStyle might not be set. Although MaterialTheme containers (like Surface, Button or Scaffold) sets that one for you.
As an example usage - when you create a MaterialTheme Button you can do a simple Text(text = "whatever") and so not set the style. The text style will be provided automatically by the Button itself, so all of the buttons have the same text styles. This is using LocalTextStyle under the hood
textStyle = MaterialTheme.typography.body1.copy(color = Color.White)
This is using a style from a theme (MaterialTheme in this example). The advantage is that you stating you want to use particular style of text. Details about the style are provided by a theme. Cannot think of disadvantages here really, other than binding your composable to the given theme

Unbound Ripple/Indication in Jetpack Compose (equivalent to selectableBackgroundBorderless)

In Jetpack Compose the clickable Modifier will by default use LocalIndication.current and show a ripple that is bound to the border. That looks great almost always, but there are some circumstances where a rounded, unbound ripple looks better. Back in View Android we would've used android:background="?attr/selectableItemBackgroundBorderless to achieve this behaviour. How can we do it in compose?
Example [source]:

You can customise the ripple effect as follow:
Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = false), // You can also change the color and radius of the ripple
onClick = {}
)