How to add an image background to a Card object in Android Jetpack Compose?

Question

I'm working on a Jetpack Compose app that uses LazyColumn to display a list of players and I'm trying to add an image background to each Card (in composable function ProfileCard) that represents a player.

I'm using a Box object to hold the contents of each entry and have declared an Image object as its first element. From my understanding, all elements within a Box object are "stacked" so that elements declared later(further down) appear visually on top of elements declared earlier (further up), so I'm not sure why the image background - which is declared first - is rendered on top of my Text element declared further down inside the ProfileContent composable at Line#93:

Here is a screenshot with the dark honeycomb Image element disabled:

and here, with the dark honeycomb Image element enabled:

Somehow, the background image is being correctly rendered behind the player icon yet it is rendered on top of the Text element - although both the icon and text are declared within the same Row object. Anybody have any ideas how to fix this issue and force the background image to be rendered behind both elements instead?

z.g.y · Accepted Answer · 2022-10-11T06:13:39.393

It doesn't render on top of the TextField, it looks like its on top of it because of the TextField's background blending with the Image behind it, so it looks like its overlapping them.

I tried implementing your code and changed the the TextField backgroundColor to Color.LightGray.

 Card(
        modifier = Modifier
            .fillMaxWidth()
            .size(90.dp)
            .padding(top = 6.dp)
            .wrapContentHeight(align = Alignment.Top),
        shape = CutCornerShape(topEnd = 20.dp),
        elevation = 8.dp
    ) {

        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {

            Image(
                painter = painterResource(id = R.drawable.honeycomb),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.matchParentSize()
            )

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ) {
                // ProfilePicture() composable
                Box(
                    modifier = Modifier
                        .size(80.dp)
                        .clip(CircleShape)
                        .background(Color.Red)
                )

                Spacer(modifier = Modifier.size(size = 16.dp))

                // ProfileContent() composable
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(end = 16.dp)
                ) {
                    TextField(
                        value = "Text",
                        onValueChange = {},
                        label = { Text("Player Name")},
                        colors = TextFieldDefaults.textFieldColors(
                            backgroundColor = Color.LightGray
                        )
                    )
                }
            }
        }
    }

Edit: Refactored and corrected posted solution description from Text to TextField

Thanks. Now what about the (grey) background of the Text component? Shouldn't that have also been displayed on top of the image ? (It seems that the image is still displayed above the Text object's background.) — Oke Uwechue, Oct 11 '22 at 03:48
ok. seems that the initial grey background is actually no background at all. Had to explicitly set it using "colors = TextFieldDefaults.textFieldColors( backgroundColor = Color.DarkGray)" — Oke Uwechue, Oct 11 '22 at 04:15
@OkeUwechue, I didn't realize it was a `TextField` issue until you mentioned it, apologies, I updated my answer and Glad you figured it out!. — z.g.y, Oct 11 '22 at 05:18

How to add an image background to a Card object in Android Jetpack Compose?

1 Answers1