How would you go about building this composable? T...

# compose

[Colton Idle]

How would you go about building this composable? To me, It's two distinct piece (the blue background card) and then the "bottomCard" composable. The tricky thing about the bottom card composable (that I keep iterating on) is that the icons (soccer balls) are supposed to be aligned with their respective score, but they also have to be offset so that they are 40% on the card, but 60% is hanging off the top to create this cool affect.

[Steffen Funke]

I’d have a surrounding larger box layout, or similar, and have the card as a visual backdrop, and not as the actual container of the views, if that makes sense.

[Colton Idle]

How would you create that second inner card though? If the soccer balls were inside of the card then this would be easy, but I'm not sure how best to create that offset.

[Steffen Funke]

• blue box => Box with contentAlignment bottom
◦ yellow card => Just a card, contains no views
◦ Row with the 2 Columns which then contain a Ball and the Text each
So a Box, with 2 contents, the Row visually layered above the yellow card.
Then in the Row, you are free to give it any height you want for the balls to “cut into” the card.

[Colton Idle]

Hm. I feel like that wouldn't really work with accessibility sizes for text? For example, if a user increases text size, then "Madrid 3" would grow larger but the box wouldn't increase in height. So In my eyes, it seems as though I'd want the text to live inside of the yellow box...

Just thinking out loud here... I will give your idea a whirl.

[rudolf.hladik]

there is also modifier drawWithContent which lets you draw before or after the content in a sense of z axis

[Tobias Suchalla]

Maybe put the the rows into the yellow card and use a negative y-offset modifier on the balls. That way, adjustments to the text size should work automagically.

[Colton Idle]

yOffset modifier. Alrighty, that seems legit. if I can just figure out a way to convert like 48.dp or something to pixels, divide it to get 60 percent, and then offset that. Thanks @Tobias Suchalla

[Chris Sinco [G]]

This may be a good use case for ConstraintLayout

[Colton Idle]

Haven't had to touch CL yet in Compose! But yeah, this could be one way to get it done.

[Colton Idle]

I'm not doing KMP, but CL being android only has def pushed me towards trying to accomplish things with just Rows/Cols

[Chris Sinco [G]]

Fair enough. I hope CL is KMP soon. I believe it’s technically possible but just have to put the work in