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

How do i apply a default font to all Text() elements in the app using Jetpack Compose?

I need to apply a common font to all the Text() used in my entire app. Currently i am applying it manually to each text using a style or font as follows. How can i specify this as a global theme for the app? In normal xml layouts, i was using a custom TextView widget to achieve this.
Text(
text = stringResource(id = R.string.userName),
style = typography.h2,
fontSize = 20.sp,
)

Jetpack Compose supports theming and a uniform font can be applied by specifying a custom font in app theme. Steps to do this are as follows.
Copy your custom font to res/font directory ex: helvetica_nue.ttf
Create a Kotlin file (Type.kt) and add your Font family object here. Specify the defaultFontFamily as your custom font. If you wish to perform some additional customization you may add your styles to body1 typography, as this is the default typography used for all Text() unless specified.
private val myCustomFont = FontFamily(
Font(R.font.helvetica_nue),
)
val Typography = Typography(
defaultFontFamily = myCustomFont,
)
Create a Kotiln file (Theme.kt or any name) and declare you app theme
#Composable
fun MyApplicationTheme(content: #Composable () -> Unit) {
MaterialTheme(
typography = Typography,
)
}
In your activity/fragment, wrap your apps main Composable within this theme
MyApplicationTheme {
NewsDetailScreen()
}
Now your app will display text in the specified font wherever the theme is applied.
Reference: https://developer.android.com/jetpack/compose/themes/material#typography
If you want to use the same typeface throughout, specify the defaultFontFamily parameter and omit the fontFamily of any TextStyle elements:

One similar approach would be to first create custom implementation over Text composable, lets call it CustomText.
Then for your use case, you can write wrappers over most used text styles, for eg
#Composable
TextH2(text : String) {
//call your own wrapper over framework Text composable
CustomText(text = text, typography = h2)
}
To make things simpler you can wrap font resource, weight and size together and then create specific implementation of this class
for e.g
val h2 = CustomTypography(font = R.font.your-ttf-file, fontSize = 20.sp, fontWeight = Medium)
Above styling data is handled inside one single composable, which in our case is CustomText.

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 can I change keyboard backdrop color with jetpack compose?

I am using jetpack compose for Android development.
In dark mode, the background of the TextField is Color.Black.
However, after tapping on the TextField, when the keyboard is displayed, the background color changes to white for a moment.
This seems to be due to the use of adjustResize. However, without it, some parts of the text will be off the screen and cannot be edited while typing.
Therefore, I believe either of the following is an improvement.
Change the color to black while maintaining adjustResize.
Solve the above problem of text sticking out in a different way than adjustResize
This is very ugly.
How can I change this white background to black?
Thank you in advance.
class EditorActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TextField(
value = "",
onValueChange = {},
modifier = Modifier.background(Color.Black).fillMaxSize()
)
}
}
}
my activity setting in AndroidManifest.xml
<activity
android:name=".ui.screen.episodeEdit.EditorActivity"
android:exported="false"
android:theme="#style/Theme.Nobel_editor"
android:windowSoftInputMode="adjustResize"></activity>

I used jetpack compose 1.1.1.
After change version to 1.2.0-alpha07, fullsize TextField doesn't hide text without adjustResize option.
so I could remove adjustResize. and Keyboard backdrop changed to black.

Jetpack compose to fix key board backdrop white color issues, you can add background color to Parent activity of composable. This will give custom background color when keyboard opens.
class SigninActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
//Added to fix keyboard backdrop issue in screen, You can even add theme specific color
window.decorView.setBackgroundResource(R.color.background)
AppTheme {
Surface(
color = MaterialTheme.colorScheme.surface,
modifier = Modifier.fillMaxSize(),
) {
Text(
text = stringResource(id = R.string.your_text_resource_id),
color = MaterialTheme.colorScheme.onSurfaceVariant,
style = MaterialTheme.typography.bodyMedium,
)
}
}
}
}
}

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