Develop Reference

Changing card elevation is changing card color in Jetpack compose with Material 3

I am using the Card composable and I want it to be colored white.
But when I add some elevation to it, it changes color to more like the primaryContainer color.
I have seen documentation where they have somehting called as elevationOverlay. But couldn't find an example which says how to use it.
Here is my code:
Card(
modifier = Modifier.padding(top = 16.dp),
colors = CardDefaults.cardColors(containerColor = White),
elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
) {
}
I do know I can use Elevated card instead of card, but there is same problem with elevated card as well.
Also, this is a special case so I am applying the color manually

To resolve the issue of changing card color when modifying the card elevation in Jetpack Compose with Material Design 3, you can use the background modifier and pass it a Color object to set the desired color. Additionally, you can use the elevationOverlay parameter to set the overlay color.
Here's an updated example of your code:
Card(
modifier = Modifier.padding(top = 16. dp)
.background(color = Color.White),
elevation = CardDefaults.cardElevation(defaultElevation = 2. dp),
elevationOverlay = Color.White
) {}

After trying multiple ways found out that there is no way to override this except for to look at the Card.kt file from SDK and create something similar but disable the tonalColor(Thanks for hint #ianhanniballake that it is using tonalelevation)
Following code should do the work, until overriding is officially supported:
#Composable
fun CardWithoutTonalElevation(
modifier: Modifier = Modifier,
shape: Shape = CardDefaults.shape,
colors: Color = White,
border: BorderStroke? = null,
elevation: Dp = 0.dp,
content: #Composable ColumnScope.() -> Unit = {}
) {
Surface(
modifier = modifier,
shape = shape,
color = colors,
tonalElevation = 0.dp,
shadowElevation = elevation,
border = border,
) {
Column(content = content)
}
}

Setting opaque background color on Jetpack Compose Button causes non-uniform coloring (inner rectangle)

I've been having this issue where I need to set an opaque color for the background of a Button in Jetpack Compose.
This is the code which I'm dumbed down and tested with:
<color name="opaque_button_background">#33FFFFFF</color>
Button(
onClick = { },
shape = RoundedCornerShape(8.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = colorResource(R.color.opaque_button_background)
),
) {
Text(
text = "Hello"
)
}
This is what it produces:
I'm having a similar problem in the code I'm working with, but not as pronounced as this. Looks like there's a separate background for the content of the button.
Even removing Text content inside gives you:
Anyone know what's going on? Looks like the implementation of Button doesn't work well with opaque colors?

You can use TextButton instead of Button.
TextButton(
onClick = { },
shape = RoundedCornerShape(8.dp),
colors = ButtonDefaults.textButtonColors(Color(R.color.opaque_button_background),
Color(R.color.opaque_button_background),
Color(R.color.opaque_button_background)),
) {
Text(
text = "Hello", color = Color.Red
)
}

Remove BasicTextField Indicator Bulb in Jetpack Compose?

Im not sure what this is called so I call it a indicator bulb, its the image thats hanging off of the indicator. It appears above my bottom modal and I think that looks funky, how do we remove this?

You can hide the cursor using cursorBrush = SolidColor(Unspecified).
You have also to define a custom TextSelectionColors to override the default color provided by LocalTextSelectionColors.current that it is applied to the text selection and the TextFieldCursorHandle.
val customTextSelectionColors = TextSelectionColors(
handleColor = Color.Transparent,
backgroundColor = Color.Transparent
)
CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
BasicTextField(
value = text,
onValueChange = {text = it},
cursorBrush = SolidColor(Unspecified)
)
}

Jetpack Compose TextField cuts text on scroll

I have a TextField with a fixed height. When the user enters a longer text it will scroll. It will cut off any text within the padding when scrolling:
Basically something like this:
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { value -> text = value },
modifier = modifier
.fillMaxWidth()
.height(100.dp),
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
backgroundColor = Color.Transparent
)
)
It is possible to adjust/remove the padding for a TextField, by using BasicTextField directly, e.g. see this stack overflow question.
However I want to keep the padding, but without the clipping of the text when the user scrolls. A simple Text Composable has this behavior.

You can use BasicTextField and modify its decorationBox parameter.
Simply put innerTextField() inside a scrollable Column and add Spacers at the top and the bottom of it.
var text by remember {
mutableStateOf("Hello Stackoverflow")
}
val paddingSize = remember { 16.dp }
BasicTextField(
modifier = Modifier
.height(100.dp),
value = text,
onValueChange = { text = it },
decorationBox = { innerTextField ->
Column(
modifier = Modifier
.fillMaxWidth()
.verticalScroll(state = rememberScrollState())
) {
Spacer(modifier = Modifier.height(paddingSize))
innerTextField()
Spacer(modifier = Modifier.height(paddingSize))
}
}
)

Just use the maxLines parameter of the TextField to avoid clipping. Set it to 1 or 2, per your case, then adjust the height/font-size so the max lines you specify are accomodated correctly. It will likely start to snap to the visible portion, cutting the extra stuff entirely.

Wrap content to a text with clipped shape in Compose?

I have a text compose and I want to apply a triangle shape on it, I applied the tringle successfully but the text doesn't wrap inside the triangle shape, it seems that the shape doesn't cut the view to be tringle, it only draws above it or thing like that.
here is the code:
Text(
modifier = Modifier
.clip(TriangleShape)
.background(
Brush.horizontalGradient(
listOf(
Color(0xff4F0D37),
Color(0xffD73046)
)
)
),
text = "150",
color = Color.White,
)
Any tip will be appreciated :)

Here's how I did it:
Text(
modifier = Modifier
.clip(TriangleShape)
.background(
Brush.horizontalGradient(
listOf(
Color(0xff4F0D37),
Color(0xffD73046)
)
)
)
.layout { measurable, constraints ->
val placeable = measurable.measure(constraints)
layout(placeable.width * 2, placeable.height * 2) {
placeable.placeRelative(0, 0)
}
},
text = "150",
color = Color.White,
)
I used the layout lambda expression to double the width and the height of the composable, while keeping the everything else the same. Took some messing around with rows and columns but I think this is a fitting solution.
Here's the result:

BoxWithConstraints{
val constraints = size
Text(
modifier = Modifier
.clip(TriangleShape)
.background(
Brush.horizontalGradient(
listOf(
Color(0xff4F0D37),
Color(0xffD73046)
)
)
),
text = "150",
color = Color.White,
fontSize = (constraints.width / 2) // ... Modify if necessary
)
}
Here I am using the size parameter exposed by BoxWithConstraints. This is the size of the box, which I am storing in a variable to later re-use to set the font size of the text accordingly. Text positioning can be done easily. Use Modifier.align(TopStart)