Develop Reference

How to overlay texts on an Image using jetpack compose

I am trying to make something that uses the same concept as the image below;
An image like background with text overlaying it.
I tried to make a card and give it a backgroundColor of the image, but I got an error;
What I want to do is overlay some texts on an image, like the image above.
So please how do I arrange this code. I need everything to be in a single composable because I need to populate it.
Thanks for your understanding and assistance, In advance.
Please, I'd happily provide any more info needed.

Use a Box to overlay composables.
Something like:
#Composable
fun ImageAndText(
modifier: Modifier = Modifier,
painter: Painter,
contentDescription: String,
text: String
) {
val shape = RoundedCornerShape(8.dp)
val height = 100.dp
Box(
modifier = modifier
.height(height)
.fillMaxWidth()
.background(White, shape = shape),
contentAlignment = Alignment.Center
) {
Image(
painter = painter,
contentDescription = contentDescription,
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxSize()
.clip(shape)
)
Text(
text = text,
color = White
)
}
}

You can use Box as a direct Child of your Card and put the Image and Text in it and set its contentAlignment to Alignment.Center.
Use the Image composable to host your desired image instead of card's backgroundColor since it only accepts Color.
#Composable
fun ImageWithTextInMiddle() {
Card {
Box(
modifier = Modifier
.height(100.dp)
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
Image(
// painterResource(successInfo.successInfoImageId)
painterResource(R.drawable.img),
contentDescription = "",
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
// will display in the middle of the image
Text("Some Text In the middle")
}
}
}

Android Jetpack Compose - make an image fill max size with a border just around the image

I'm new to android compose. I want to put an image with borders that look like this code.
preview image
Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(36.dp)
.fillMaxSize()
) {
Image(
painter = painterResource(id = R.drawable.dice),
contentDescription = null,
modifier = Modifier
.border(
BorderStroke(2.dp, Color.Black)
)
.padding(36.dp)
.border(
BorderStroke(2.dp, Color.Green)
)
)
}
I want to move an image to the center and fill it to max size using this code.
preview image
Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(36.dp)
.fillMaxSize()
) {
Image(
painter = painterResource(id = R.drawable.dice),
contentDescription = null,
modifier = Modifier
.weight(1f)
.fillMaxSize()
.border(
BorderStroke(2.dp, Color.Black)
)
.padding(36.dp)
.border(
BorderStroke(2.dp, Color.Green)
)
)
}
And the border stretches until it fills the column size, but I don't want it. How to make the border still like in the first code but use fillMaxSize modifier? I need fillMaxSize modifier because the image can change dynamically. Thank you all.

If I understood correctly you want the border to wrap around the possibly expanding/shrinking image, in that case 'Modifier.wrapContentSize()' should do the trick!

modifier = Modifier
.weight(1f)
.wrapContentSize()
.border(
BorderStroke(2.dp, Color.Black)
)
.fillMaxSize()
.padding(36.dp)
.border(
BorderStroke(2.dp, Color.Green)
)

How to handle border and background in compose shape?

In the code the image border only on the sides, not on the corners.
for the button, the background goes out of the shape/border.
I only managed to "fix" the button by using a fixed height but I don't understand why a fixed height help and I wonder if there is another way to do this.
#Composable
fun Test(){
Column(modifier = Modifier.padding(5.dp)) {
Image(
painter = painterResource(id = R.drawable.ic_close),
contentDescription = null,
modifier = Modifier
.clip(CircleShape)
.border(1.dp, Color.Red)
.size(20.dp)
)
OutlinedButton(
onClick = { },
border = BorderStroke(1.dp, Color.Red),
shape = RoundedCornerShape(5.dp),
modifier = Modifier
.clip(RoundedCornerShape(5.dp))
.fillMaxWidth()
.background(Color.Green)
) {}
}
}

For the Image, remove the clip modifier and use the shape inside the border parameter:
Image(
painter = painterResource(id = R.drawable.ic_xxx),
contentDescription = null,
modifier = Modifier
//.clip(CircleShape)
.border(1.dp, Color.Red, CircleShape)
.size(20.dp)
)
For the OutlinedButton use the colors attribute to assign the background color instead of the Modifier.background
OutlinedButton(
onClick = { },
border = BorderStroke(1.dp, Color.Red),
shape = RoundedCornerShape(5.dp),
modifier = Modifier
//.clip(RoundedCornerShape(5.dp))
.fillMaxWidth(),
//.background(Color.Green),
colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Green),
)

How we can margin a image to left or right in jetpack composer?

I am trying to learn jetpack compose and I've learnt to use spacer for items, but I still do not know how to add margin to an image on the left or right, any idea?
Screen:
code:
Column(
modifier = Modifier.fillMaxSize()
) {
Spacer(modifier = Modifier
.padding(50.dp)
)
Image(
painter = painterResource(id = R.drawable.image),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(80.dp)
.clip(CircleShape)
)
}

There is actually almost uncountable different ways to achieve this , I would using a Row() instead of a Column() in your case and simply add a spacer with your needed space as follows
Spacer(modifier = Modifier.width(50.dp))
or if you want to align the image to the left with the same approach your function would look like that
Row(
modifier = Modifier.fillMaxSize()
) {
Spacer(modifier = Modifier.weight(1f))
Image(
painter = painterResource(id = R.drawable.ic_image),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(80.dp)
.clip(CircleShape)
)
}

How to remove border of card view with jetpack compose

I am facing the issue of border remove from card view in jetpack compose.
Kindly guide me on how to do achieve border removal from card view functionality.
My code is below but not working correctly.
Code
Card(
shape = RoundedCornerShape(0.dp),
border = BorderStroke(0.dp, Transparent),
modifier = Modifier
.height(100.dp)
.padding(start = 10.dp, top = 40.dp, end = 10.dp)
.border(0.dp, Transparent),
) {
Column(
modifier = Modifier
.fillMaxWidth()
.clickable {
submit()
},
) {
Text(
modifier = Modifier
.weight(1f)
.padding(start = 20.dp, top = 20.dp, bottom = 20.dp)
.wrapContentWidth(Alignment.Start),
text = "Submit",
style = typography.h4,
)
}
}

Actually, By default, there is no border in Card. What you are seeing is 1.dp elevation. So if you don't want any elevation make it 0.dp like the following.
Card(
modifier = Modifier
.height(100.dp)
.padding(start = 10.dp, top = 40.dp, end = 10.dp),
elevation = 0.dp
) {
Your content..
}