Is it possible to overlap two elements in a Surface and for kotlinlang #compose

Is it possible to overlap two elements in a Surface, and for them to both be centred? With my current code, one element pushes the other one to the top left. I was expecting both to be stacked in the centre... I know I can do that with a Box, but I have to use a Surface. More in thread.

I am using the Konfetti library and apparently it only works if the Composable is in a Surface. The problem is that the confetti Composable pushes the Text to the top left of the row. Here is my code:

Row(
            Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
             Surface(Modifier.fillMaxSize(), color = Color.Transparent) {
                        ShowCelebration()
                        Text(text = resultString!!)
                    }
                }
            }

The source of the lib is: https://github.com/DanielMartinus/Konfetti

manju reddy

05/20/2022, 8:31 PM

Box or constraint layout can be used

Nat Strangerweather

05/20/2022, 8:33 PM

Do you mean use a Box inside the Surface?

manju reddy

05/20/2022, 8:33 PM

Yes

Box lays out one on top of other in Z order

Nat Strangerweather

05/20/2022, 8:36 PM

No, it doesn't work because the ShowCelebration Composable only works if it is in a Surface...

Thanks anyway!

manju reddy

05/20/2022, 8:40 PM

Ok for your use case you can still use box on top of ShowCelebration and set box background transparent and place text inside it, make sure box is maxsize

Nat Strangerweather

05/20/2022, 8:45 PM

Thanks, that worked! 😊

Chris Sinco [G]

05/20/2022, 8:56 PM

apparently it only works if the Composable is in a Surface

Could you elaborate on what isn’t working? Surface under the hood is just a Box with MaterialTheme colors passed as CompositionLocals and parameters to set elevation

:today-i-learned: 1

Nat Strangerweather

05/20/2022, 8:58 PM

I only managed to get the animation to show when using a Surface. When I use a Box it doesn't show. Maybe I'm just doing something wrong...

Maybe I needed to use a Transparent Box in the first place

Chris Sinco [G]

05/20/2022, 9:18 PM

Hmm were the Composables still there in the hierarchy and the colors were just not showing?

Nat Strangerweather

05/21/2022, 8:43 AM

That's correct.

5 Views

#compose Join Slack