Is it correct in saying that the current alpha ver...

# compose

[ciscorucinski]

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.

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.

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)
            )

[Joost Klitsie]

This is wanted behavior. The order of modifiers specifies the behavior. So if you put padding first and background later, you will see

|<padding><background><content><background><padding>|

however, if you put background first, you see:

|<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

|<padding><background><padding><content><padding><background><padding>|

[Joost Klitsie]

I think this is a "getting used to" but to me after a while it feels very intuitive

[Joost Klitsie]

the modifiers are stacking up nicely

[ciscorucinski]

oh, interesting. Is there some documentation or examples elsewhere that go over this more?

[annsofi]

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