How to make Surface background transparent (Jetpack Compose)

Question

I have such an implemenation

Surface(
                    modifier = Modifier.background(Color.Transparent),
                    shape = RoundedCornerShape(corner = CornerSize(2.dp)),
                    border = BorderStroke(width = 1.dp, color = showpageColorAgvotBoarder)
                ) {
                    Text(
                        modifier = Modifier.padding(2.dp),
                        text = item,
                        style = ShowpageAgvotStyle
                    )
                }

the result I get is

Like entire background is black, however, surface backgroudn is white...

I need just a boarder and background of surface should be transparent (in this case black as entire background is black)

What am I doing wrong?

score 7 · Accepted Answer · answered Sep 01 '22 at 05:33

You need to use color = Color.Transparent parameter instead of Modifier.background(Color.Transparent)

Surface(
    modifier = Modifier,
    shape = RoundedCornerShape(corner = CornerSize(2.dp)),
    border = BorderStroke(width = 1.dp, color = Color.Red),
    color = Color.Transparent // This is what you're missing
) {
   Text(
        modifier = Modifier.padding(2.dp),
        text = "item",
        color = Color.Gray
   )
}

Gabriele Mariotti · Answer 2 · 2022-09-01T06:58:27.693

3

The background color of the Surface is based on the color attribute.
By default is:

MaterialTheme.colors.surface (M2)
MaterialTheme.colorScheme.surface (M3).

Use:

Surface(
    color = Color.Transparent,
    //..
) {
     //...
}

edited Sep 01 '22 at 06:58

answered Sep 01 '22 at 06:10

Gabriele Mariotti

320,139
94
887
841

score 1 · Answer 3 · answered Aug 31 '22 at 22:39

1

Surface has a new color parameter that dictates the color instead of the modifier.

answered Aug 31 '22 at 22:39

Richard Onslow Roper

5,477
2
11
42

How to make Surface background transparent (Jetpack Compose)

3 Answers3