Return to Video

Padding vs Margin

  • 0:00 - 0:02
    Good job so far.
  • 0:02 - 0:05
    You're well on your way to
    building really great layouts.
  • 0:05 - 0:09
    However, I do see a problem with almost
    all of the layouts that we built so far.
  • 0:09 - 0:13
    The views are right up against
    the edge of the ViewGroup or
  • 0:13 - 0:14
    up against the device.
  • 0:14 - 0:16
    For all of the layouts that
    we've built in this lesson so
  • 0:16 - 0:20
    far, we could add a little
    more visual polish to them, so
  • 0:20 - 0:24
    that they're more beautiful by adding
    a little bit more white space.
  • 0:24 - 0:26
    We'll do this using the concepts
    of padding and margin,
  • 0:26 - 0:29
    which we'll cover in this video.
  • 0:29 - 0:31
    For example, we could add a little
    more white space here, here,
  • 0:31 - 0:34
    or even at the top, so
    that the views aren't crowded
  • 0:34 - 0:38
    up against the edge of the parent and
    up against the edge of the device.
  • 0:38 - 0:39
    It's really a design decision though,
  • 0:39 - 0:42
    because sometimes you do want
    it to go edge to edge, like for
  • 0:42 - 0:45
    the full bleed image effect that
    I was talking about earlier.
  • 0:45 - 0:49
    But in any case, you can use white space
    to add a little more breathing room,
  • 0:49 - 0:53
    so that the content is a little
    bit easier to read and scan.
  • 0:53 - 0:57
    I'll show you the effect of adding
    padding or margin to a view.
  • 0:57 - 0:59
    Let's start with a TextView
    that says Hello.
  • 0:59 - 1:02
    If we add eight dips of
    padding to the view,
  • 1:02 - 1:05
    then it makes it bigger by eight
    dips in every single direction here.
  • 1:05 - 1:08
    If we add layout margin of
    eight dips to the TextView,
  • 1:08 - 1:11
    then this is what it would look like.
  • 1:11 - 1:13
    In order to add a margin, you need
    to put it inside a ViewGroup, so
  • 1:13 - 1:16
    that's why I have it in
    this linear layout here.
  • 1:16 - 1:19
    The linear layout is the one
    that takes original TextView and
  • 1:19 - 1:21
    pushes it by eight dips.
  • 1:21 - 1:23
    From the left and from the top.
  • 1:23 - 1:26
    And also from the sides as well.
  • 1:26 - 1:28
    So even though you declare padding or
  • 1:28 - 1:33
    margin on child TextView, the padding
    gets handled by the TextView itself.
  • 1:33 - 1:36
    Whereas the margin gets handled
    by the parent ViewGroup.
  • 1:36 - 1:40
    If you both of these on a real device,
    and you didn't have a background for
  • 1:40 - 1:43
    the TextView, then technically
    both would look the same.
  • 1:43 - 1:46
    the text would start eight
    dips over from the left, and
  • 1:46 - 1:48
    eight dips below the top of the device.
  • 1:48 - 1:52
    However, if you do have a background
    color for the TextView,
  • 1:52 - 1:55
    then the user would be able to see
    that the TextView is this big.
  • 1:55 - 1:59
    Whereas, on the other device,
    the TextView would only be this big.
  • 1:59 - 2:01
    Here's a code for
    displaying padding on a view.
  • 2:02 - 2:07
    On the TextView XML Element, you would
    declare a new attribute that says,
  • 2:07 - 2:11
    android colon padding equals
    eight dips in quotation marks.
  • 2:11 - 2:12
    You can choose whatever
    size you want for
  • 2:12 - 2:15
    the padding,
    as long as it's a dip value.
  • 2:15 - 2:19
    When we specify eight dips of padding,
    it adds eight dips to the left,
  • 2:19 - 2:21
    top, bottom, and
    right edges of the TextView.
  • 2:22 - 2:25
    Instead of using the general
    android padding attribute,
  • 2:25 - 2:29
    you can also split it out to left,
    right, top, or bottom.
  • 2:29 - 2:33
    Essentially, these four lines of code
    do the same thing as this one line.
  • 2:33 - 2:36
    However, these fine grained controls
    allow you to have different padding
  • 2:36 - 2:39
    values for left or
    right, or top or bottom.
  • 2:39 - 2:43
    You don't have to have an equal
    padding value for all four directions.
  • 2:43 - 2:47
    The default value for padding is zero,
    so if you specify left, right, and
  • 2:47 - 2:52
    top padding, but not bottom, then that
    will be zero dips of bottom padding.
  • 2:52 - 2:56
    To specify margin, you add
    an attribute again to the TextView.
  • 2:56 - 3:00
    The name of the attribute is android
    colon layout underscore margin we can
  • 3:00 - 3:03
    set it equal to, for
    example, eight dips.
  • 3:03 - 3:07
    This moves the child TextView eight
    dips away from the parent on all edges.
  • 3:07 - 3:12
    If there was another child TextView at
    the top here, then having a margin would
  • 3:12 - 3:15
    push this TextView eight dips
    below that first TextView.
  • 3:16 - 3:19
    You can think of having a margin as
    having a little force field around
  • 3:19 - 3:20
    this view.
  • 3:20 - 3:24
    No other view can enter this
    eight dip region around it.
  • 3:24 - 3:28
    Or you can also split out layout margin
    into each of the four directions,
  • 3:28 - 3:32
    layout marginLeft,
    layout marginRight, top, and bottom.
  • 3:32 - 3:36
    If you don't specify any of these
    values, then it will default to zero.
  • 3:36 - 3:39
    To remember that the ViewGroup
    is the one that positions these
  • 3:39 - 3:42
    children based on margin,
    you can look at the attributes.
  • 3:42 - 3:45
    They all start with layout
    underscore for margin.
  • 3:45 - 3:48
    That way, you know that the ViewGroup
    is the one who's handling the position
  • 3:48 - 3:49
    of these views.
  • 3:50 - 3:53
    Padding and
    margin can apply to all views.
  • 3:53 - 3:56
    Let's put the attributes we just
    learned about into practice.
  • 3:56 - 3:58
    Here I have three TextViews
    in a linear layout.
  • 3:58 - 4:01
    They're all squished up against
    the left edge of the screen, so
  • 4:01 - 4:02
    I want to add a little more space.
  • 4:03 - 4:05
    Let's start by trying
    to add some margin.
  • 4:06 - 4:08
    Cool, now there's more
    space around this TextView.
  • 4:09 - 4:11
    I'll do the same for
    the other two TextViews.
  • 4:12 - 4:17
    Interesting, so this is 16 dips up here,
    but this is actually 32 dips because
  • 4:17 - 4:20
    it's getting eight dips of bottom
    margin from the first TextView and
  • 4:20 - 4:23
    eight dips of top margin
    from the second TextView.
  • 4:23 - 4:25
    If we want the spacing to be consistent,
    so
  • 4:25 - 4:30
    it's always 16 dips in between each view
    then we have to change the margin here.
  • 4:30 - 4:33
    I can break it out in to
    individual margin values.
  • 4:33 - 4:38
    With this code, I have a left margin
    of 16 dips and a top margin of 16 dips.
  • 4:38 - 4:41
    There's no bottom margin
    from this first TextView, so
  • 4:41 - 4:43
    this space in between is
    now correct at 16 dips.
  • 4:43 - 4:47
    The same will go for the last TextView.
  • 4:47 - 4:49
    Cool, now all the vertical
    spacing is equal.
  • 4:50 - 4:53
    Earlier when I said we're adding white
    spaces to the edges of these views,
  • 4:53 - 4:56
    technically that space is transparent.
  • 4:56 - 4:59
    You can see through it,
    to what's behind it.
  • 4:59 - 5:02
    In this case we have a gray
    background on the ViewGroup.
  • 5:02 - 5:05
    The layout would look the same on
    the device wether we use margin or
  • 5:05 - 5:09
    padding, because in this case we have
    no background color on the TextView.
  • 5:10 - 5:12
    Let's add it and
    see where the bounds of each view are.
  • 5:13 - 5:16
    Okay, now there's a background
    color on this first TextView.
  • 5:16 - 5:20
    When we added the left and top margin,
    we see that the ViewGroup just pushes
  • 5:20 - 5:23
    the TextView over by eight and
    down by eight.
  • 5:23 - 5:27
    We can change this to padding, and now
    we see that the TextView is larger and
  • 5:27 - 5:30
    takes up that 8 dips of
    space on the left and top.
  • 5:31 - 5:33
    So visually, things would
    look different on the device,
  • 5:33 - 5:35
    whether you have padding or margin.
  • 5:35 - 5:38
    If there is a background
    color on this TextView.
  • 5:38 - 5:41
    We can do the same for the other
    views so you see that it's well.
  • 5:42 - 5:45
    Adding padding and margin values isn't
    just restricted to these children views,
  • 5:45 - 5:48
    you can also add it on the ViewGroup.
  • 5:48 - 5:51
    If I add a padding value for
    the linear layout.
  • 5:51 - 5:56
    Then you can see that it shifts the
    views over by 16 dips in all directions.
  • 5:56 - 5:59
    I mentioned that you could set any
    value for a padding or a margin.
  • 5:59 - 6:01
    But how do you know which value to pick?
  • 6:01 - 6:05
    Well, the material design guidelines
    recommend that you use increments of
  • 6:05 - 6:06
    eight dips.
  • 6:06 - 6:09
    This is a little bit more advanced
    knowledge, but essentially we want our
  • 6:09 - 6:13
    components to line up on the screen
    along this eight dip square grid.
  • 6:13 - 6:16
    Now the squares don't actually
    show up on the screen, but
  • 6:16 - 6:18
    if you want to position text here,
  • 6:18 - 6:21
    you might want to move it over
    like two squares to the left.
  • 6:21 - 6:25
    Two squares on this Grid
    would equal 16 dips.
  • 6:25 - 6:29
    On this email screen,
    all the icons are lined up to this line.
  • 6:29 - 6:33
    They're positioned 16 dips over from
    the left edge of this screen, and
  • 6:33 - 6:38
    all this text here is positioned 72 dips
    over from the left edge of this screen.
  • 6:38 - 6:41
    So you can kind of imagine that the
    content is starting to follow certain
  • 6:41 - 6:42
    lines here.
  • 6:42 - 6:44
    Here's another way to visualize it.
  • 6:44 - 6:47
    In this screenshot from
    the Google I/O app,
  • 6:47 - 6:54
    we have the content lined up to this 16
    dip line, as well as this 72 dip line.
  • 6:54 - 6:57
    It's essentially 72 dips over
    from the left edge of the screen.
  • 6:57 - 6:59
    And on this edge,
  • 6:59 - 7:03
    the content stops 16 dips before
    the right edge of the screen.
  • 7:03 - 7:05
    On the tablet,
    you have more screen real estate, so
  • 7:05 - 7:07
    you can have a little more padding.
  • 7:07 - 7:11
    It can be 24 dips over from the left
    edge of the screen, and so on for
  • 7:11 - 7:12
    the other values.
  • 7:12 - 7:17
    The reason we recommend these values
    is to make your content easier to read.
  • 7:17 - 7:20
    For example, if this title was
    shifted over by a couple pixels, and
  • 7:20 - 7:24
    the Subtext was shifted over to
    the right by a couple pixels,
  • 7:24 - 7:26
    there would be a jagged edge here.
  • 7:26 - 7:30
    And it would distract the user from
    actually reading your actual content.
  • 7:30 - 7:35
    So by lining everything up, it makes
    your app easier to read and use.
  • 7:35 - 7:38
    Here are a couple of real life
    examples of using padding in margin.
  • 7:38 - 7:40
    In this Google Calendar app screenshot,
  • 7:40 - 7:44
    we see some text here that's
    shifted over by a little bit here.
  • 7:44 - 7:47
    There's also a little bit of space
    between these calendar events.
  • 7:47 - 7:48
    If we implement it using padding,
  • 7:48 - 7:52
    then this background image would
    probably extend into that blank space.
  • 7:52 - 7:56
    Instead if we use margin, then it adds
    a little buffer zone around the view, so
  • 7:56 - 7:58
    it's probably margin.
  • 7:58 - 8:02
    Here's another screenshot of
    the detail page for a calendar event.
  • 8:02 - 8:06
    There's a lot of text here and there
    seems to be larger gaps than others.
  • 8:06 - 8:09
    We can create those larger
    gaps by adding padding.
  • 8:09 - 8:13
    To add this gap here, you can either
    add bottom padding to this TextView, or
  • 8:13 - 8:15
    you can add top padding to this view.
  • 8:16 - 8:18
    Either way would work.
  • 8:18 - 8:21
    Or you could even implement
    it using layout margin.
  • 8:21 - 8:24
    You really can't tell the difference
    between using layout margin or padding
  • 8:24 - 8:28
    in this case, because the background
    of the text used is transparent.
  • 8:28 - 8:31
    Now it's your turn to practice
    with setting different padding and
  • 8:31 - 8:32
    margin values.
  • 8:32 - 8:35
    We've provided some initial code for
    you to get started using the link below.
  • 8:35 - 8:39
    Once you're comfortable with padding and
    margin values, go ahead and
  • 8:39 - 8:40
    try to build out this layout.
  • 8:41 - 8:46
    By the way, this text is located
    16 dips from the edges here.
  • 8:46 - 8:49
    But it's ony eight dips in
    between the two TextViews.
  • 8:49 - 8:51
    When you're done, check this box.
Title:
Padding vs Margin
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
08:52

English subtitles

Revisions Compare revisions