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

ciscorucinski

11/19/2020, 11:22 AM
Is it correct in saying that the current alpha version of Compose suffers from where you put certain code, even though it shouldn't? Take a look at
padding(...)
. This works with padding towards the end.
Copy code
Image(
                modifier = Modifier
                    .width(70.dp).height(70.dp)
                    .border(
                        border = BorderStroke(2.dp, color = Color.White),
                        shape = CircleShape)
                    .clip(shape = CircleShape)
                    .padding(8.dp),  // * * HERE near bottom - works * * //
                asset = Icons.Filled.Person,
                colorFilter = ColorFilter.tint(color = Color.White)
            )
However, move it towards the top, and no padding is added at all.
Copy code
Image(
                modifier = Modifier
                    .width(70.dp).height(70.dp)
                    .padding(8.dp)  // * * HERE near top - fails * * //
                    .border(
                        border = BorderStroke(2.dp, color = Color.White),
                        shape = CircleShape)
                    .clip(shape = CircleShape),
                asset = Icons.Filled.Person,
                colorFilter = ColorFilter.tint(color = Color.White)
            )
j

Joost Klitsie

11/19/2020, 11:50 AM
This is wanted behavior. The order of modifiers specifies the behavior. So if you put padding first and background later, you will see
Copy code
|<padding><background><content><background><padding>|
however, if you put background first, you see:
Copy code
|<background><padding><content><padding><background>|
So here the padding essentially replaces margin as well, depending on in what order you put it. You can also add padding first, then a background, and then a padding again. In that case you will see an object with margin around it, then the object itself also has padding
Copy code
|<padding><background><padding><content><padding><background><padding>|
I think this is a "getting used to" but to me after a while it feels very intuitive
the modifiers are stacking up nicely
c

ciscorucinski

11/19/2020, 12:01 PM
oh, interesting. Is there some documentation or examples elsewhere that go over this more?
a

annsofi

11/19/2020, 12:33 PM
There’s a collection of articles, videos and codelabs on https://developer.android.com/courses/pathways/compose For more on modifiers it’s probably this one: https://developer.android.com/codelabs/jetpack-compose-layouts#0