Thread
#compose
    Colton Idle

    Colton Idle

    10 months ago
    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

    Steffen Funke

    10 months ago
    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

    Colton Idle

    10 months ago
    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

    Steffen Funke

    10 months ago
    • 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

    Colton Idle

    10 months ago
    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

    rudolf.hladik

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

    Tobias Suchalla

    10 months ago
    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

    Colton Idle

    10 months ago
    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]

    Chris Sinco [G]

    10 months ago
    This may be a good use case for ConstraintLayout
    Colton Idle

    Colton Idle

    10 months ago
    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
    Chris Sinco [G]

    Chris Sinco [G]

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