Hey guys, wanted your thoughts on implementing this UI with compose. • Text is 70% of width • Then image takes rest width and is slightly outside of the card. So, whats the best way to implement this? Stack/Box? Constraint Layout? etc.

There are a few ways to do this imo. One way would be to use the

Layout

composable. This video shows a very similar view being created using Layout. You might get some ideas here -

Thanks, I am interested in having the Image going outside of the card, not clipping it, is there any modifier for this functionality?

Compose doesn't clip by default. I use the

clip

modifier explicitly in the above

I think that using a Stack with height equals to image and width equals to the card can solve it. The final touch is using a Z-index logic to create the rest. Compose don't clipping by default is a good news.

@nickbutcher I am using

Surface

here for the card to have all the theming and it is clipping the view according to shape I have mentioned in my theme. So, should I avoid using Surface here for this particular use case?

Yes,

Surface

will clip by default so use another layout or +1 to using the

Layout

composable directly here

I could be wrong ... :- ( most of the time :- ) but I feel the tooling (when it is ready) will use Constraint Layout so I focus all UI to use that ???

Got it @nickbutcher Thanks

What do you mean that the tooling will use ConstraintLayout?

@gildor if Android Studio uses a GUI to build the

@Composable

it will have to codify the layout ... in my mind the best way to codify the layout is with constraint Layout ...

constraint layout dsl doesn’t look as more simple to generate than any other row/column/stack layouts

Today in Android Studio I believe the GUI generates constraints ... right? Both XCode and AS build code from GUI using the constraints ... unless I am thinking wrong ... Pretty sure anything Col/Box/Row can do Constraints can also do ...

I don’t think XCode provides any UI builder for SwiftUI, only for old Interface builder UIs, so not sure how Of course, as was said, eventually AS may have some kind UI builder for compose (though it look as very challenging task), but in this case I wouldn’t expect that only constraint layout would be supported

Pretty sure anything Col/Box/Row can do Constraints can also do

It’s true, but it doesn’t mean that you need only constraints, as I see it’s opposite now, for most cases Row/Column are used in all ofificail examples, and Constraints only for complex layouts, also this fact doesn’t mean that other layouts will not be supported, using row/columns/stack is much more natural and easier for simple use cases, and fallback to constraint layouts by default sounds like a huge overkill (and probably not so good for performance)

Constraints orig came from XCode so it should come to SwiftUI at some point. Android XML builds deep layers which kills performance so to solve the problem Google told everyone to use constrains. They have a button "convert to constrains". And Motion editor runs on constraints.

@Compose

does not have the problem with deep UI performance like XML but don't be surprised if

@Conmpose

UI builder is constraint based as this is the current way it works now. For both SwiftUI and Compose are young and expect both to have a UI builder at some point (?)

my point not that swiftui or compose will never have ui builder, my point that your idea that this ui builder will work only with constraint dsl is not confirmed by anything and sounds like a bad idea in general

But, It's not my idea! it is the current way it is done! ... time will tell 🙂

How so? Currently UI editor in AS supports any layouts, not only constraints

we help companies update Android. We move them to Kotlin, Dagger Hilt, Navigation Components, Room, Kotlin StateFlow, MVI etc .. and we always use this pull down menu item to make the Layout preform better. Don't be surprised if this menu item makes the transition to

@compose

. Nicolas Roard and John Hoford are genius and have built and amazing system. It is also the basis of Motion Layout! It is easy to codify with a UI Builder as each UI item only needs at most 4 attributes. Time will tell ...