https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

11/04/2021, 6:34 AM
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.
s

Steffen Funke

11/04/2021, 7:08 AM
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.
c

Colton Idle

11/04/2021, 7:29 AM
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.
s

Steffen Funke

11/04/2021, 7:34 AM
• 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.
c

Colton Idle

11/04/2021, 7:43 AM
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.
r

rudolf.hladik

11/04/2021, 8:13 AM
there is also modifier
drawWithContent
which lets you draw before or after the content in a sense of z axis
t

Tobias Suchalla

11/04/2021, 8:49 AM
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.
c

Colton Idle

11/04/2021, 4:10 PM
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
c

Chris Sinco [G]

11/04/2021, 8:32 PM
This may be a good use case for ConstraintLayout
c

Colton Idle

11/04/2021, 11:06 PM
Haven't had to touch CL yet in Compose! But yeah, this could be one way to get it done.
I'm not doing KMP, but CL being android only has def pushed me towards trying to accomplish things with just Rows/Cols
c

Chris Sinco [G]

11/05/2021, 1:49 AM
Fair enough. I hope CL is KMP soon. I believe it’s technically possible but just have to put the work in
2 Views