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

Hitanshu Dhawan

10/13/2020, 4:08 PM
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.
👍 1
v

Vinay Gaba

10/13/2020, 4:13 PM
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 -

https://youtu.be/DDd6IOlH3io?t=862

This is the example in the video
h

Hitanshu Dhawan

10/13/2020, 4:20 PM
Thanks, I am interested in having the Image going outside of the card, not clipping it, is there any modifier for this functionality?
n

nickbutcher

10/13/2020, 4:22 PM
Compose doesn't clip by default. I use the
clip
modifier explicitly in the above
t

Thiago

10/13/2020, 4:26 PM
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.
h

Hitanshu Dhawan

10/13/2020, 4:29 PM
@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?
n

nickbutcher

10/13/2020, 4:31 PM
Yes,
Surface
will clip by default so use another layout or +1 to using the
Layout
composable directly here
a

Ash

10/13/2020, 4:34 PM
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 ???
🤔 1
h

Hitanshu Dhawan

10/13/2020, 4:39 PM
Got it @nickbutcher Thanks
g

gildor

10/14/2020, 12:25 AM
What do you mean that the tooling will use ConstraintLayout?
a

Ash

10/14/2020, 2:12 AM
@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 ...
g

gildor

10/14/2020, 2:13 AM
constraint layout dsl doesn’t look as more simple to generate than any other row/column/stack layouts
also such generation limited by constraint layout would cover too narrow use case, so I’m very doubt that it would be the case
a

Ash

10/14/2020, 2:16 AM
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 ...
g

gildor

10/14/2020, 3:45 AM
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)
a

Ash

10/14/2020, 7:05 AM
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 (?)
g

gildor

10/14/2020, 7:09 AM
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
a

Ash

10/14/2020, 2:57 PM
But, It's not my idea! it is the current way it is done! ... time will tell 🙂
g

gildor

10/14/2020, 11:31 PM
How so? Currently UI editor in AS supports any layouts, not only constraints
a

Ash

10/15/2020, 4:07 AM
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 ...

https://www.youtube.com/watch?v=29gLA90m6Gk

Very nice article explaining how custom layout works https://jorgecastillo.dev/jetpack-compose-withconstraints
2 Views