Jetpack compose how to blur text area and line it to the bottom of a card

Question

I want to place text at the bottom of a card and blur the text area with a translucent color.

This is what I have so far.

The design I am trying to achieve is this. (Collection Area with cards specific part)

Here's my code:

@Composable
fun CollectionCardArea(
    collection: Collection,
    cardWidth: Dp
) {
    Card(
        modifier = Modifier
            .width(cardWidth)
            .padding(start = 2.dp, end = 25.dp, bottom = 5.dp, top = 0.dp)
            .clickable { },
        shape = RoundedCornerShape(6),
        elevation = 4.dp
    ) {
        Box(modifier = Modifier
            .fillMaxSize(),
        ) {
            Image(
                painter = rememberImagePainter(
                    data = collection.image
                ),
                contentDescription = collection.name,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxSize()
            )
        }
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(20.dp)
            .background(Color.Transparent)
        ) {
            Text(text = collection.name, color = Color.White)
        }

    }
}

The problem is I cannot find a way to align the text to the bottom of the screen.
Also, I cannot figure out how to blur the text area.

Answer 1

First thing, Card can't position its own child (when there are multiple children). So you need to use something like Column, Row, Box, or else inside the card itself. So instead having a tree like this

- Card
  - Box
    - Image
  - Box
    - Text

You can try it like this

- Card
  - Box
    - Box
      - Image
    - Box
      - Text

Second, as for the blur in Jetpack-Compose you can refer to this answer. But the API itself is only available on Android 12 and up.