Card VS Box render Difference

Question

Is there an explanation for why this

Card(
        modifier =
        Modifier
            .background(
                brush = Brush.horizontalGradient(
                    colors = listOf(
                        OrgFarmTheme.colors.secondary,
                        OrgFarmTheme.colors.onSecondary
                    )
                )
            )
           .clip(RoundedCornerShape(10))
    ) {
...
}

renders ,

while

Box(
        modifier =
        Modifier
            .background(
                brush = Brush.horizontalGradient(
                    colors = listOf(
                        OrgFarmTheme.colors.secondary,
                        OrgFarmTheme.colors.onSecondary
                    )
                )
            )
            .clip(RoundedCornerShape(10))
    ) {
...
}

renders ?

I have tried using the default shape parameter of the Card, but it renders the same.

The `Card` has a default `backgroundColor` defined by `MaterialTheme.colors.surface` — Gabriele Mariotti, Aug 07 '21 at 21:19
For my specific use-case where I have to use a custom `Layout`requiring the index of each child within it — Richard Onslow Roper, Aug 07 '21 at 21:24

Gabriele Mariotti · Accepted Answer · 2021-08-09T14:54:27.940

2

The Card background color is defined by the backgroundColor property and not by the background modifier. This property also has a default value = MaterialTheme.colors.surface which is applied by default to the Card. It is the reason of the difference in your code.

If you want to achieve with the Card the same layout of the Box you have to use:

Card(
    modifier =
    Modifier
        .background(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    MaterialTheme.colors.secondary,
                    MaterialTheme.colors.onSecondary
                )
            )
        )
        ,
    backgroundColor =  Transparent,
    shape = RoundedCornerShape(10),
    elevation = 0.dp //it is important to avoid borders
)

If you want a Box with elevation and a gradient as background you can use the shadow modifier:

Box(
    modifier =
    Modifier
        .shadow(12.dp,RoundedCornerShape(10),true)
        .background(
            brush = Brush.horizontalGradient(
                colors = listOf(
                    MaterialTheme.colors.secondary,
                    MaterialTheme.colors.onSecondary
                )
            )
        )
        .clip(RoundedCornerShape(10))
) {
}

edited Aug 09 '21 at 14:54

answered Aug 07 '21 at 21:30

Gabriele Mariotti

320,139
94
887
841

Thank you sir. It did try to add the elevation = 0.dp, and it works exactly as intended (like a Box). However, my very purpose of using a Card was to elevate it upon focus, giving it a hovering effect. It is alright if the elevation = 0.dp, but upon increasing the value by a slightest bit, the effect starts to deteriorate. – Richard Onslow Roper Aug 09 '21 at 11:08
Is there a way to achieve elevation with gradient? Are you editing this answer if there is one, or shall I start a new question? – Richard Onslow Roper Aug 09 '21 at 13:11
@MARSK I've updated the answer with an example of box, with elevation and gradient. – Gabriele Mariotti Aug 09 '21 at 14:58
1

Excellent solution sir. Thank you! – Richard Onslow Roper Aug 09 '21 at 15:35

Card VS Box render Difference

1 Answers1