185

How exactly can you add Margin in Jetpack Compose?

I can see that there is a Modifier for padding with Modifier.padding(...) but I can't seem to find one for margins or am I blind?

Someone guide me please.

Thank you very much.

4
  • 12
    You can wrap it in container with padding. Yes, I know... Commented Jul 16, 2020 at 16:58
  • Thats also what I though... exactly how it done in Flutter... I though there is something different in compose. Commented Jul 16, 2020 at 17:23
  • And in case you'd like to add specific margins, you can add the padding modifier and pass in a PaddingValues() object. Like Modifier.padding(PaddingValues(bottom = 8.dp)) Commented Apr 1, 2022 at 5:36
  • For those who want to add inside padding around the content, set the the value of contentPadding argument. It's not a part of Modifier methods. Commented Mar 10 at 5:47

9 Answers 9

192

You can consider padding and margin as the same thing (imagine it as "spacing"). A padding can be applied twice (or more) in the same composable and achieve the similar behavior you would get with margin+padding. For example:

val shape = CircleShape
Text(
    text = "Text 1",
    style = TextStyle(
        color = Color.White,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center),
    modifier = Modifier.fillMaxWidth()
        .padding(16.dp)
        .border(2.dp, MaterialTheme.colors.secondary, shape)
        .background(MaterialTheme.colors.primary, shape)
        .padding(16.dp)
)

Will result on this:

enter image description here

As you can see, the first padding is adding a space between the component and its border. Then the background and border are defined. Finally, a new padding is set to add space between the border and the text.

19
  • 13
    I had a long discussion with Adam Powell and Leland Richardson from UI toolkit, and quoting Leland: "realistically, “padding” is actually just “spacing”... So if the guy responsible to the Compose compiler/runtime is saying that, I can say so ;)
    – nglauber
    Commented Jul 17, 2020 at 0:31
  • 121
    This silly argument, because a margin is the space around an element and padding refers to the space between an element and the content inside it. One can contribute to i.e. widget clickable are, the other will not. So yes, visually it can be considered just spacing but different type of hence not functionally equivalent. Commented Jul 17, 2020 at 1:29
  • 8
    As you can see in my answer above, the first padding/spacing is acting like a margin. Then, I'm adding a border and a background. Then I'm adding another padding which acting like a padding that we're familiar with on the current UI framework. If you add a clickable modifier in this same sample, you'll notice that the area outside of the background/border is not clickable. That's why I'm saying that padding and margin are the same thing, depending where you're using it.
    – nglauber
    Commented Jul 17, 2020 at 1:38
  • 11
    @MarcinOrlowski: "because a margin is the space around an element and padding refers to the space between an element and the content inside it" -- in Compose, effectively there is no "element" in the way that you are thinking. FWIW, this post summarizes the Slack thread that nglauber refers to and has a link to that thread, if you are interested in reading the original discussion. Commented Jul 17, 2020 at 11:13
  • 13
    This is insane!
    – ericn
    Commented Nov 28, 2020 at 15:33
87

Thinking in terms of padding and margin you refer to the so-called box model that we are used to. There's no a box model in Compose but a sequence of modifiers which is applied to a given composable. The trick is that you can apply the same modifier like padding or border multiple times and the order of these matters, for example:

@Composable
fun PaddingExample() {
    Text(
        text = "Hello World!",
        color = Color.White,
        modifier = Modifier
            .padding(8.dp) // margin
            .border(2.dp, Color.White) // outer border
            .padding(8.dp) // space between the borders
            .border(2.dp, Color.Green) // inner border
            .padding(8.dp) // padding
    )
}

As the result you'll get this composable:

enter image description here

This design is well explained in the Modifiers documentation:

Note: The explicit order helps you to reason about how different modifiers will interact. Compare this to the view-based system where you had to learn the box model, that margins applied "outside" the element but padding "inside" it, and a background element would be sized accordingly. The modifier design makes this kind of behavior explicit and predictable, and gives you more control to achieve the exact behavior you want.

3
65

In Compose, sequence of modifiers matter.

If you use padding before everything else, it behaves as padding.
If you use padding after everything else, it behaves as margin.

enter image description here

enter image description here

5
  • 2
    This! How can this be not mentioned more often, thanks! +1
    – Talha
    Commented Sep 13, 2023 at 21:34
  • 4
    Damn! This should be the first statement on Jetpack Compose's tutorial page from Google Commented Oct 20, 2023 at 1:49
  • this is such an excellent example to highlight ordering.
    – ataulm
    Commented Dec 11, 2023 at 12:12
  • 1
    For me it is just doing the opposite! is was this changed in Material 3 ?
    – MBH
    Commented Dec 20, 2023 at 13:09
  • 1
    Doing it the opposite way works currently.
    – IODevBlue
    Commented Jun 18 at 7:36
55

You can also use Spacer:

Spacer(modifier = Modifier.width(10.dp))

It represents an empty space layout, whose size can be defined using Modifier.width, Modifier.height and Modifier.size modifiers.

Suppose you want to add margin between 2 composables, then you can achieve it as

Text(
    text = stringResource(id = R.string.share_your_posters),
    fontSize = 16.sp,
    color = Color.Black
)

Spacer(modifier = Modifier.width(10.dp))

Image(painter = painterResource(id = R.drawable.ic_starts), contentDescription = null)
2
  • what if I want to just add top and left spacing? Commented Jul 20, 2022 at 7:59
  • 1
    @MartyMiller In that case u can proceed with regular Modifier.padding(start: Dp= 10.dp,top: Dp = 10.dp) Commented Aug 11, 2022 at 2:59
19

The margin is different than padding, margin is the space outside the widget, where padding is the distance inside the widget, in old XML you could have decided explicitly which one to use, however the new compose way is different.

How compose treat paddings and margins?

There is an object which can be set as Parameter to the composable called Modifier, you can use this to do both margins and paddings.

Example of Padding:

    Text(
    text = "Test",
    modifier = Modifier
        .padding(16.dp)
        .clickable { }
)

Example of Margin

    Text(
    text = "Test",
    modifier = Modifier
        .clickable { }
        .padding(16.dp)
)

As you can see the order makes a difference here in compose, all the modifiers are implemented by order.

4
  • Hi, do you mean the first snippet is for showing Margin behavior and the latest for showing Padding behavior?
    – Izzuddiin
    Commented May 8, 2022 at 10:30
  • 1
    No the opposite, the first is for showing padding, and the second is for showing margin
    – هيثم
    Commented May 15, 2022 at 7:33
  • 2
    The first example is demonstrating margin, not padding. If you apply 'padding' first in the modifiers it affects the outside of the composable, not the inside
    – alfietap
    Commented May 30, 2022 at 13:57
  • No, the first one is for padding, because jetpack compose modifiers work in order. Padding Explanation: 1. padding modifier --> adds a padding to the widget 2. Clickable --> adds padding to the widget area which in this case includes the padding Margin Explanation: 1. Clickable --> Makes the widget clickable, here padding is not included which makes this a margin 2. Padding --> Adds padding to the widget. I hope that things are clear and well explained.
    – هيثم
    Commented Aug 2, 2022 at 6:55
6

So from what I can understand after reading the documentation there is no margin modifier as such as the API designer felt it is redundant to give something different name which essentially does the same thing.

So let's say you want to apply a margin of 8dp before colouring your container with yellow background and you want the container with a padding of 4dp for the content.

Column(modifier = Modifier.padding(all = 8.dp)
                          .background(color = Color.Yellow)
                          .padding(all=4.dp)) {
        Text(text = "Android")
        ...
    }

Here in the above example you can see that I have applied the padding first and after that I have added background colour to the container and finally the last padding. And here's how it looks. Just like we intended. enter image description here

4

I was also looking for something which should give me a direct option to set margin on a View like TextView. But unfortunately we don't have margin support in Jetpack compose. But the good news is we can still achieve it by using layout container like Box, which allows us to add views like TextView, ImageView etc. So you can add margin to any of the child(TextView) by using padding modifier to the parent(Box). Here is the code:

Box(Modifier.padding(10.dp)) {
    Surface(color = Color.LightGray) {
        Text(text = "Hello $text!", color = Color.Blue,
            modifier = Modifier.padding(16.dp))
    }
}

And the result is:

enter image description here

Here I have given 10.dp padding to the box. Hope it is useful.

3

You can achieve the same effect as margin with putting your content, that has padding, inside a different composable like Box and make outer composable clickable. With this approach, inner padded areas will be included in clickable content.

0

You can achieve a margin effect by using nested Surface elements with padding e.g.

@Composable
fun MainScreen() {
    Surface(color=Color.Yellow, modifier=Modifier.padding(10.dp)){
        Surface(color=Color.Magenta, modifier=Modifier.padding(30.dp)) {
            Surface(
               color = Color.Green, 
               modifier = Modifier.padding(10.dp).wrapContentSize()) {
               Text(text = "My Dummy Text", color = Color.Black)
            }
        }
    }
}
1
  • although my solution works, it's probably simpler to just declare the ".padding()" instructions in the correct order to achieve a margin effect (see other answers above) Commented Jun 26, 2023 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.