Return to Video

4 : The Stages SOL

  • 0:01 - 0:05
    Okay, I'm going to answer these
    questions before jumping into the XML.
  • 0:05 - 0:07
    First thing's first,
    is selecting the views.
  • 0:07 - 0:09
    I'll draw boxes around
    the ones that I see.
  • 0:10 - 0:11
    Okay, so there are five different views,
  • 0:11 - 0:14
    not including the view group,
    which is technically considered a view.
  • 0:14 - 0:18
    But anyways, these five views
    are two TextViews up here,
  • 0:18 - 0:19
    followed by three buttons.
  • 0:19 - 0:24
    And there are no ImageViews really here
    anywhere, so I'd say no ImageViews.
  • 0:24 - 0:28
    Now you might be wondering why I decided
    that these were two different TextViews,
  • 0:28 - 0:32
    well in the final product
    the styling of team A and
  • 0:32 - 0:34
    the score look very different.
  • 0:34 - 0:38
    So I've decided to keep these
    as two separate TextViews.
  • 0:38 - 0:40
    Moving on to step two,
    which is positioning the views.
  • 0:40 - 0:43
    I'm going to select which
    ViewGroup I want to use here.
  • 0:43 - 0:47
    And the two that are on my mind
    are linear layouts and relative layouts.
  • 0:47 - 0:49
    Now this is a vertical column of views.
  • 0:49 - 0:53
    So it's pretty clear to me what I want,
    and that is a linear layout.
  • 0:54 - 0:57
    Okay, finally I have step three
    which is style the views.
  • 0:57 - 1:00
    And I'll tackle that one as
    I'm working with the XML.
  • 1:00 - 1:03
    Okay, so let's jump over to the XML.
  • 1:03 - 1:05
    Okay, I want to be
    looking at the Text tab.
  • 1:05 - 1:08
    Okay, so the first thing I'm
    going to do here is just
  • 1:08 - 1:10
    delete some things that I don't need.
  • 1:10 - 1:12
    So I'm going to go ahead and
    start by deleting this TextView.
  • 1:13 - 1:17
    And all of this paddingLeft,
    paddingRight, paddingTop and
  • 1:17 - 1:20
    paddingBottom, I'm also going to delete.
  • 1:20 - 1:23
    Being very careful not to delete
    anything I don't mean to.
  • 1:23 - 1:25
    Okay.
  • 1:25 - 1:28
    Now we had said that the ViewGroup we're
    going to use is not a relative layout
  • 1:28 - 1:30
    but a linear layout, so
    I'll go ahead and change that now.
  • 1:31 - 1:35
    And inside of this linear layout
    I'm going to have two TextViews
  • 1:35 - 1:36
    followed by three buttons.
  • 1:36 - 1:38
    So I'm going to start making those.
  • 1:38 - 1:40
    Now I'm not going to be too specific
    right now about what the width and
  • 1:40 - 1:43
    height of this TextView are going to be.
  • 1:43 - 1:45
    For now I'm going to just
    leave it as wrap_content,
  • 1:45 - 1:48
    which will put the box of
    the TextView right around the text.
  • 1:49 - 1:52
    I'll go ahead and set the text for
    this TextView as well.
  • 1:52 - 1:55
    And this first TextView's
    just going to say Team A.
  • 1:56 - 1:59
    Okay, lets see what this
    looks like in the Preview.
  • 1:59 - 2:02
    Okay, I can see a little
    TextView there that says Team A.
  • 2:02 - 2:04
    Now let's build out a couple more.
  • 2:04 - 2:07
    So the next one below that is the score,
    and that's a TextView as well.
  • 2:07 - 2:10
    So we're going to start typing Text.
  • 2:10 - 2:12
    Okay, I see the word TextView,
    so I press Enter.
  • 2:12 - 2:16
    And I am also going to
    make this wrap_content.
  • 2:16 - 2:18
    And I'm going to add the text.
  • 2:18 - 2:22
    Well the score usually starts at zero,
    so we'll have it start at zero.
  • 2:22 - 2:23
    Okay.
  • 2:23 - 2:23
    Now my Buttons.
  • 2:23 - 2:26
    So I'm going to start
    typing the word Button.
  • 2:26 - 2:28
    Go ahead and wrap_content for
    these as well.
  • 2:28 - 2:32
    Okay, now the first Button
    is going to say +3 Points.
  • 2:32 - 2:35
    I'm going to go ahead and copy this and
  • 2:35 - 2:40
    paste it once,
    paste it twice to get two more Buttons.
  • 2:40 - 2:43
    And we'll have a Button
    that says +2 Points and
  • 2:43 - 2:45
    a Button that says Free Throw.
  • 2:45 - 2:47
    Okay, let's see what that
    looks like in the Preview.
  • 2:48 - 2:51
    Well, I seem to have three Buttons.
  • 2:51 - 2:54
    I can see Team A and zero.
  • 2:54 - 2:56
    So I have all my views,
  • 2:56 - 2:59
    but this doesn't really look like what
    the end goal is supposed to look like.
  • 2:59 - 3:01
    Remember, they're in a vertical column.
  • 3:01 - 3:03
    So I think I have to change
    the orientation of my layout, so
  • 3:03 - 3:05
    I'm going to go ahead and do that.
  • 3:05 - 3:10
    So I'll start typing orientation and
    I want it to be vertical.
  • 3:10 - 3:12
    Okay, that's looking
    a little bit better.
  • 3:12 - 3:17
    Now these Buttons were actually expanded
    to sort of fill the width of the window.
  • 3:17 - 3:20
    So I probably don't actually
    want to do wrap_content for
  • 3:20 - 3:23
    the Buttons,
    instead I'm going to do match_parent.
  • 3:23 - 3:24
    So, let me change that right now.
  • 3:26 - 3:29
    Okay, so the widths of all my
    Buttons are now match_parent.
  • 3:29 - 3:30
    Let's go to Preview.
  • 3:31 - 3:33
    Okay, that's looking better,
    they expanded out.
  • 3:33 - 3:34
    All right.
  • 3:34 - 3:39
    Well, my text is still kind
    of squished into the corner,
  • 3:39 - 3:44
    and to fix that I'm going to
    use something called gravity.
  • 3:44 - 3:46
    Okay, here I am with a Google Drawing,
  • 3:46 - 3:49
    now let's make a text
    box in Google Drawing.
  • 3:50 - 3:52
    Okay, so
    this is a lot like the bounds of a view.
  • 3:52 - 3:54
    I could type the word Team A,
  • 3:54 - 3:58
    and by default it'll be
    in the upper left corner.
  • 3:58 - 4:01
    And this is the same with TextViews,
    when you put text in a TextView,
  • 4:01 - 4:03
    by default it'll be in
    the upper left corner.
  • 4:03 - 4:09
    Now, with Google Drawings, I could
    select this text and use basically
  • 4:09 - 4:14
    the equivalent of an attribute,
    called a line, to get it to be centered
  • 4:14 - 4:19
    horizontally inside the text box and
    centered vertically inside the text box.
  • 4:19 - 4:20
    Pretty cool.
  • 4:20 - 4:24
    Taking the content of the view and
    moving it around inside of the view
  • 4:24 - 4:27
    boundaries is exactly
    what layout gravity does.
  • 4:27 - 4:30
    And if you're thinking this might be
    similar to some of the alignment methods
  • 4:30 - 4:34
    that you can use with relative layouts,
    it is, but you can use the gravity
  • 4:34 - 4:37
    attribute with linear layouts,
    which is what makes this powerful.
  • 4:37 - 4:39
    We'll take a look at it in code.
  • 4:40 - 4:44
    So, I'm going to take my first TextView
    and I'm going to start typing gravity.
  • 4:45 - 4:47
    Okay.
    With gravity, I have two options,
  • 4:47 - 4:49
    layout gravity and gravity.
  • 4:49 - 4:51
    I just told you about
    the gravity attributes.
  • 4:51 - 4:53
    So that's the one we're going to use.
  • 4:53 - 4:56
    Okay.
    And then I have a bunch of options here,
  • 4:56 - 4:58
    and I think I want it to
    be horizontally centered.
  • 4:58 - 5:00
    So, that's what I'm going to use.
  • 5:00 - 5:03
    And I'm going to go ahead and
    see in the Preview what that did.
  • 5:04 - 5:08
    Doesn't look like it did much, but
    actually there is a reason for this.
  • 5:09 - 5:13
    So if I click here, and let's zoom in
    since it might be hard for you to see.
  • 5:15 - 5:16
    Okay, so
  • 5:16 - 5:21
    here we have Team A, and you can kind of
    see the view boundary around it.
  • 5:21 - 5:25
    Well, if I were to tell you that this
    was centered inside of the view,
  • 5:25 - 5:27
    you really couldn't argue with me.
  • 5:27 - 5:32
    It does seem to be centered inside of
    the view, the view's just very small.
  • 5:32 - 5:33
    Going back to our Google Drawing,
  • 5:33 - 5:39
    it's kind of like if I decrease the size
    to be just the size of the text.
  • 5:39 - 5:40
    It's centered, but
  • 5:40 - 5:45
    it doesn't really look very different
    from if it were pushed to the left.
  • 5:45 - 5:47
    Okay, so
    if I wanted to center within the phone,
  • 5:47 - 5:50
    I need to make the view stretch
    the length of the phone.
  • 5:50 - 5:52
    Which is going to require
    us to change the width.
  • 5:54 - 5:56
    Okay, so
    back here I'm going to close my Preview.
  • 5:57 - 5:59
    And I'm going to go to the width here.
  • 6:00 - 6:05
    Instead of doing wrap_content,
    I'm going to do match_parent.
  • 6:05 - 6:06
    Okay, let's look at our Preview again.
  • 6:07 - 6:08
    Zoom out.
  • 6:09 - 6:11
    Okay.
    And that's looking a lot better.
  • 6:11 - 6:12
    It seems to be centered up.
  • 6:12 - 6:14
    So let's do the same thing
    with the score here.
  • 6:16 - 6:19
    Okay, so I'm going to add
    gravity to this as well, and
  • 6:19 - 6:20
    gravity in all the layout gravity.
  • 6:20 - 6:26
    center_horizontal and I'm going to
    change the widths to match_parent.
  • 6:27 - 6:29
    Okay, let's check it out again.
  • 6:29 - 6:31
    Cool!
    So, everything is centered up.
  • 6:31 - 6:32
    It's looking pretty good.
  • 6:32 - 6:34
    Except it's all really
    kind of squished together,
  • 6:34 - 6:37
    there isn't a lot of breathing
    room between these elements.
  • 6:37 - 6:41
    I'm going to give each of
    the TextViews a padding of 4.
  • 6:41 - 6:46
    I'll start typing padding,
    I'm going to do 4dp.
  • 6:47 - 6:48
    Remember the dp?
  • 6:48 - 6:52
    And I'm using just padding, not
    padding bottom or anything like that.
  • 6:52 - 6:54
    And that'll provide 4dp
    around the entire TextView.
  • 6:54 - 6:57
    Let's see what that looks
    like in the Preview.
  • 6:58 - 7:01
    Okay.
    That gives me a little bit more space.
  • 7:01 - 7:04
    I'm going to do the same
    to the Score TextView.
  • 7:08 - 7:11
    Okay, now I'm going to try to
    do the same to the Button.
  • 7:16 - 7:19
    Hmm, well that didn't
    seem to do too much.
  • 7:19 - 7:24
    What if I make it a little bit bigger,
    like 8?
  • 7:24 - 7:26
    20?
  • 7:26 - 7:30
    Hmm, interesting, so it seems to be
    making the Button itself larger.
  • 7:30 - 7:32
    I don't want the Button
    itself to be larger,
  • 7:32 - 7:34
    I want the space around
    the Button to be larger.
  • 7:34 - 7:38
    And actually, that's a better job for
    layout_margin.
  • 7:38 - 7:41
    Remember, padding is actually
    adding padding inside of the view,
  • 7:41 - 7:43
    whereas margin puts
    space around the view.
  • 7:44 - 7:45
    So we're changing this to layout_margin.
  • 7:45 - 7:47
    I'm going to do 8dp.
  • 7:47 - 7:49
    Well that looks better.
  • 7:49 - 7:53
    Now there's space around the view
    in between these two views.
  • 7:53 - 7:55
    So let's go ahead and
    do that with the other buttons.
  • 7:56 - 8:00
    Margin, not padding, layout_margin.
  • 8:00 - 8:01
    Okay, so that's looking pretty good.
  • 8:01 - 8:04
    Now if you chose different
    attributes than I did,
  • 8:04 - 8:08
    like maybe you had the padding
    five instead of four, that's okay.
  • 8:08 - 8:12
    Remember, at this point I'm just
    trying to make things readable.
  • 8:12 - 8:15
    We'll worry about all the font sizing
    and pretty colors at a later stage.
  • 8:17 - 8:18
    Okay.
  • 8:18 - 8:19
    And awesome work.
  • 8:19 - 8:20
    You are done with that step.
タイトル:
4 : The Stages SOL
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

English (United States) subtitles

改訂