CODEWITHSUNDEEP
androidandroid-layoutandroid-jetpack-compose
user9408023
user9408023

Reputation: 119

how to place a card to the bottom with jetpack compose？

I am trying to place a card on top of a map view. And I want the card to locate close to the bottom.

I used a box layout and put the map and card into it. But I only know contentAlignment to arrange the inside components. Now I have the card dispalyed above the map centrally. How can I fix it? What kind of layout setup is required?

what I want

1

what I get

2

My code.

Box(
    contentAlignment = Alignment.Center
) {
    MapScreen()
    Card(
        modifier = Modifier
            .width(380.dp)
            .height(350.dp),
        elevation = 10.dp,
        shape = RoundedCornerShape(15.dp)
    )
    {
        Column(
            Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally
        )
        {
            Spacer(modifier = Modifier.height(10.dp))
            Recomendationm(indicatorValue = value)
            Text("Here")
        }
    }
}

Upvotes: 1

Views: 4370

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363825

In your Card you can use the align modifier to override the contentAlignment defined by the parent Box:

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    //..
    Card(
        modifier = Modifier
            .width(380.dp)
            .height(350.dp)
            .align(BottomCenter),
    //...
}

As described in the doc:

Pull the content element to a specific Alignment within the Box. This alignment will have priority over the Box's alignment parameter.

enter image description here

Upvotes: 1

Related Questions