I have such an implemenation
Surface(
modifier = Modifier.background(Color.Transparent),
shape = RoundedCornerShape(corner = CornerSize(2.dp)),
border = BorderStroke(width = 1.dp, color = showpageColorAgvotBoarder)
) {
Text(
modifier = Modifier.padding(2.dp),
text = item,
style = ShowpageAgvotStyle
)
}
the result I get is
Like entire background is black, however, surface backgroudn is white...
I need just a boarder and background of surface should be transparent (in this case black as entire background is black)
What am I doing wrong?
You need to use color = Color.Transparent parameter instead of Modifier.background(Color.Transparent)
Surface(
modifier = Modifier,
shape = RoundedCornerShape(corner = CornerSize(2.dp)),
border = BorderStroke(width = 1.dp, color = Color.Red),
color = Color.Transparent // This is what you're missing
) {
Text(
modifier = Modifier.padding(2.dp),
text = "item",
color = Color.Gray
)
}
Surface has a new color parameter that dictates the color instead of the modifier.
The background color of the Surface is based on the color attribute.
By default is:
MaterialTheme.colors.surface (M2)
MaterialTheme.colorScheme.surface (M3).
Use:
Surface(
color = Color.Transparent,
//..
) {
//...
}
Related
Hey guys I am using RoundedCornerShape(4.dp) to my Surface which looks fine. When I tried to click on the item it not showing me 4dp corner in Surface. I tried this stack overflow 1 and stack overflow 2 but nothing works.
binding.itemComposable.setContent {
Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
val options = getOptions()
options.forEachIndexed { _, optionText ->
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
val textColor = if (isPressed) TealBlue else Slate
val borderWidth = if (isPressed) 1.dp else 0.dp
val borderColor = if (isPressed) Aqua else OffWhite
val clickable = Modifier.clickable(
interactionSource = interactionSource,
indication = rememberRipple(true)
) {
println("Item Click")
}
Surface(
modifier = Modifier
.then(clickable)
.border(borderWidth, borderColor),
shape = RoundedCornerShape(4.dp)
) {
Text(
modifier = Modifier
.fillMaxWidth()
.background(backgroundColor)
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
}
}
}
Without click on item corner is 4 dp
When I click it's not changing corner
If you want to handle the click on a Surface you have to use the function that accepts an onClick():
Surface(
onClick = {},
shape = RoundedCornerShape(4.dp),
border = BorderStroke(borderWidth,borderColor),
interactionSource = interactionSource
)
Create a variable for shape
val shape = RoundedCornerShape(4.dp)
Use it in Modifier.clip() and Modifier.border() like this,
Surface(
modifier = Modifier
.clip(shape)
.border(
width = borderWidth,
color = borderColor,
shape = shape,
)
.then(clickable),
// shape = shape,
)
shape in border() specifies the shape of the border which by default is RectangleShape. Hence, you are seeing the rectangle border.
shape in clip() changes the shape of the composable before the click action is added. This is to make the ripple effect appear only on the given shape.
Note: Order of modifiers are important.
The shape in the Surface may not be needed after these changes.
If youre using Surface to wrapping the content, try to add a container inside the content for example Box or Column. Then use your Surface only as a shape mask, the background and other content will be flexible as you want.
This is the example
Surface(
modifier = Modifier
.then(clickable)
.border(borderWidth, borderColor),
shape = RoundedCornerShape(4.dp)
) {
Box(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.background(Color.Green)){
Text(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
}
This is not a duplicate of Modify ripple color of IconButton in Jetpack Compose This question was diverted in a different way...
I am trying to change the IconButton ripple colour as follows
IconButton(
modifier = modifier
.indication(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(
bounded = false,
radius = 30.dp,
color = colorResource(id = R.color.error_red)
)
)
.background(colorResource(id = R.color.white), shape = CircleShape),
onClick = { onButtonPressed() }
) {
Icon(
painter = painterResource(R.drawable.ic_busy_small_busy),
contentDescription = buttonContentDesc,
)
}
The ripple colour does not change. It stays dark Grey.
Also, Is there a way to change the alpha of the ripple??
In compose, I have an Image which can be either
not tinted
tinted with a color on top
have a background tint
I know how to do each of the state, what I don't know is how to combine 2+3 together: Have the background green color and the tint purple color.
My code (just the image), I omitted the label:
#Preview
#Composable
private fun imageWithTint(){
Image(
painterResource(id = R.drawable.oval),
contentDescription = "tint",
modifier = Modifier.size(30.dp).clip(CircleShape),
colorFilter = getColorFilter(Color.Green, Color.Blue)
)
}
private fun getColorFilter(backgroundIconColor: Color?, selectionColor: Color): ColorFilter {
// todo couldn't apply selectionColor together with backgroundIconColor, so gave backgroundIconColor priority
return when {
backgroundIconColor != null -> {
ColorFilter.tint(backgroundIconColor, blendMode = BlendMode.DstOver)
}
else -> ColorFilter.tint(selectionColor, blendMode = BlendMode.SrcIn)
}
}
You can create a backgroud color with a shape using Modifier.background(color, shape)
Image(
painter = painterResource(id = R.drawable.ic_baseline_check_circle_outline_24),
contentDescription = null,
modifier = Modifier.background(Color.Green, CircleShape).size(30.dp),
colorFilter = ColorFilter.tint(Color.Magenta)
)
This will create a green circle background with magenta tint
I have a Row that contains a circle Image. A Column with 2 BasicText in there and a Spacer between Column and Image. I want to have a way to "highlight" this row by giving it a blue tint with some opacity overlay. The closest I can get is by giving the Row a background color, but it doesn't give all the children blue-ish tint. I know background will not work because the color isn't drawn overlay but instead behind all other elements. Is there a way to achieve this? Thanks!
The best way I can think of is the following:
YourActivityTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.wrapContentSize(),
color = MaterialTheme.colors.background
) {
Card(
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)
.padding(8.dp),
shape = RoundedCornerShape(12.dp),
border = BorderStroke(2.dp, Color.Black)
) {
Row(Modifier.padding(8.dp)) {
Surface(
modifier = Modifier.size(50.dp),
shape = CircleShape,
border = BorderStroke(2.dp, Color.Black),
color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
) {
// Image goes here
}
Column(
modifier = Modifier
.padding(start = 8.dp)
.align(Alignment.CenterVertically)
) {
Text("Text1", fontWeight = FontWeight.Bold)
Text("Text2", style = MaterialTheme.typography.body2)
}
}
Box(modifier = Modifier
.fillMaxSize()
.alpha(0.2f)
.background(Color.Blue))
}
}
}
There are endless ways you can create your example. That one is the best that comes to my mind. If you have any question please fill free to ask me!
Android Jetpack compose Card draws a border around the card when background color has some transparency. This is how it looks in AS:
But this is how it looks in the app:
If I set background to a solid color it works, but by default backgroundColor is a surface color from material (in my app val white850 = Color(0xD9FFFFFF)) and it looks like on the picture above.
#Composable
fun TraitCard(trait: Trait) {
Card(
shape = MaterialTheme.shapes.small,
modifier = Modifier.size(width = 192.dp, height = 56.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start
) {
Icon(
imageVector = Icons.Rounded.ChildFriendly,
contentDescription = "",
modifier = Modifier
.fillMaxHeight()
.background(color = MaterialTheme.colors.background)
.aspectRatio(1f)
.padding(8.dp),
tint = MaterialTheme.colors.onBackground
)
Text(
text = trait.name,
style = MaterialTheme.typography.h3,
modifier = Modifier.padding(horizontal = 16.dp),
)
}
}
}
Does anyone have a clue why it's happening?
This is because of the elevation that Card has by default (and how shadows are drawn), if you remove the elevation this won't happen.
You can try to convert the semitransparent color to the non transparent one with something like:
backgroundColor = Color(0xD9FFFFFF).compositeOver(Color.White),