https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
c

Colton Idle

02/26/2021, 9:34 PM
Can't get left/right shadow on my card to show up in a simple Surface + Column. I'm missing something simple I assume? Short code snippet in 🧵
Copy code
Surface(
    color = MaterialTheme.colors.surface,
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
) {
    Column(
        Modifier            .verticalScroll(rememberScrollState())
    ) {
        Card(elevation = 8.dp, backgroundColor = MaterialTheme.colors.surface) {
            Text(text = "My card")
        }
a

Andrey Kulikov

02/27/2021, 3:16 PM
the upper surface is also clipping. and it clips the shadow in your case. you probably want to re-arrange it a bit to achieve the look you want
c

Colton Idle

02/27/2021, 6:20 PM
@Andrey Kulikov hm. I thought compose didn't clip. I've tried rearranging as I figured it was part of the problem, but still no dice. I'm probably missing something simple here.
a

Andrey Kulikov

02/27/2021, 6:32 PM
Compose is not clipping. Surface from Material is clipping, because it represents something like a new layer - piece of material. if you don’t need this behaviour you can not use it and apply a background with just a modifier
Copy code
Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
        .background(MaterialTheme.colors.surface)
)
c

Colton Idle

02/27/2021, 6:34 PM
Interesting. Trying to wrap my head around "Surface is clipping". I guess I'm just used to seeing a Scaffold with a TopAppBar and a Surface and I don't even know why I used a Surface in the first place?
a

Andrey Kulikov

02/27/2021, 6:36 PM
please read the documentation for Surface, it explains the purpose of the component
c

Colton Idle

02/27/2021, 6:36 PM
@Andrey Kulikov I'm going to do that. Thank you. Sorry for the stupid mistake
a

Andrey Kulikov

02/27/2021, 6:40 PM
don’t worry, it is not stupid at all!
c

Colton Idle

02/27/2021, 6:56 PM
Okay. So I changed to a box, and that still didn't help my issue unfortunately. I had to move padding inside the column, below the scroll modifiers.
Copy code
Box(
    modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colors.surface)
) {
    Column(
        Modifier
            .verticalScroll(rememberScrollState())
            .padding(16.dp)
I'm going to try to simplify at this point and just have my scaffold hold a Column directly. I think that should work too, and it'll cut out the Box being needed.
a

Andrey Kulikov

02/27/2021, 7:11 PM
right. it wasn’t only Surface who is clipping. Modifier.verticalScroll() is also clipping. otherwise we would see the parts of the item which is scrolled out. so your solutions is correct. now you add a padding for a content after clipping
c

Colton Idle

02/28/2021, 12:13 AM
@Andrey Kulikov this is all making a lot more sense. Thank you so much for your time
Powered by