1

I want to add background image but if i add only Image(){} inside Box ,is not resizable background image to content and contain more space that i want . I found this but not work for me, https://www.tutorialkart.com/android-jetpack-compose/card-background-image/ because i want Image adjustable to column

 Card() {
                    Image(painter = painterResource(id = R.drawable.flower), contentDescription = null)
                    Column(modifier = Modifier.padding(10.dp)) {
                        Text("AB CDE", fontWeight = FontWeight.W700)
                        Text("+0 12345678")
                        Text("XYZ city", fontWeight = FontWeight.W300)
                    }
                }

1 Answers1

1

You can leverage matchParentSize modifier available in Box scope and scale the image to fit the container.

    Card {
        Box {
            Image(
                painter = painterResource(id = R.drawable.flower),
                contentDescription = "null",
                modifier = Modifier
                    .matchParentSize(),
                contentScale = ContentScale.Crop
            )
            Column(modifier = Modifier.padding(10.dp)) {
                Text("AB CDE", fontWeight = FontWeight.W700)
                Text("+0 12345678")
                Text("XYZ city", fontWeight = FontWeight.W300)
            }
        }
    }
AagitoEx
  • 484
  • 2
  • 8
  • I used this and it works too : 1. Create mutable state with value : var iconBoxHeight by remember { mutableStateOf(0) } 2. Get Height object Modifier.onGloballyPositioned { layoutCoordinates -> iconBoxHeight = layoutCoordinates.size.height } 3. And the last one past this value to heigh image (with(LocalDensity.current) { iconBoxHeight.toDp() }) – Paweł Krzyściak Jul 27 '22 at 10:25
  • @AagitoEx, Thank you so much. I wasted 3 hrs to search the fix. Finally this solution worked for me! – mithil1501 Aug 22 '23 at 11:45