Develop Reference

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
}
}

Customization of Material 3 LargeTopAppBar

I'm currently working on a Header in Compose that uses LargeTopAppBar from Material 3. The issue is, that the title is not very customizable and neither is the scrolling animation(that uses nestedScroll). I would like to add a subtitle underneath the title that will not be shown in the smallTitle once the AppBar is collapsed. I would also like to know if there was a way to customize the actual animation of the title.
I know Material 3 is still in an Alpha but I would be very curious to see if there was some solution or workaround.
Thanks in advance!

LargeTopAppBar is a material3 composable which has its limitations in terms of customizability, but is easy to use.
If you need something different you can simply create a composable function for the topBar parameter in your screen scaffold which will implement all of the features you need.
Scaffold (
topBar = { customTopBar() }
) { innerPadding ->
YourScreen(modifier = modifier.padding(innerPadding))
}
In case you've already used a Scaffold in your code, you can simply use a when() statement and pass the appropriate composable for each screen!
For the subtitle you could use a simple column with two Texts,
Column {
Text(text = "Title")
if ( /* topBar state condition */ )
Text(text = "Subtitle")
}
and for the rest of the app bar you can have a Row that includes all elements (depending on your bar), like so:
Row(
verticalAlignment = Alignment.CenterVertically
horizontalArrangement = Arrangement.SpaceBetween
) {
Row {
IconButton(...) // For the back button
// Your title and subtitle Column()
Column {
Text(text = "Title")
if ( /* topBar state condition */ )
Text(text = "Subtitle")
}
}
// Rest of the IconButtons if needed
Row {
IconButton(...)
IconButton(...)
}
}
Apologies as I am not well versed in Jetpack Compose animation, but it should be easy enough to implement as their library is very simple to use, and you can always check the docs on their website.
Material3 elements are still in alpha but using simple surface/box/etc... elements you can make most custom designs that are needed.
Hope I was able to help!

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

How to change Text's contentDescription on JetpackCompose

How can I change the default Text content description to be read on TalkBack on Jetpack Compose to any text that I want ?

As described in the accessibility documentation you can use the semantics modifier.
You can use the contentDescription semantic property to set a custom content description:
Text("First text", modifier = Modifier.semantics {
this.contentDescription = "Custom content description" }
)

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 = {}
)