Return to Video

Add the Reset Button

  • 0:00 - 0:04
    Okay, so here is our picture
    of our court counter app, or
  • 0:04 - 0:06
    at least how we want it to look.
  • 0:06 - 0:10
    Now, I'm going to follow my own
    advice and start with the XML first.
  • 0:10 - 0:13
    Let's think about the view
    situation right now.
  • 0:13 - 0:18
    So, we still have all these views,
    and these views are in vertical and
  • 0:18 - 0:19
    linear layouts.
  • 0:19 - 0:23
    We have a linear layout for team B and
    a linear layout for team A.
  • 0:23 - 0:27
    and you can't just have two
    root views so furthermore,
  • 0:27 - 0:31
    these are wrapped in a linear layout,
    which happens to be horizontal so
  • 0:31 - 0:35
    that these two child linear layouts
    can be next to one another.
  • 0:35 - 0:38
    Okay, now we want to add
    a reset button down here.
  • 0:38 - 0:41
    For the sake of your brain not
    exploding thinking about all these
  • 0:41 - 0:45
    different layouts, I want you to
    think of everything inside of this
  • 0:45 - 0:48
    horizontal linear layout
    kind of like a single view.
  • 0:48 - 0:53
    And now you're just trying to lay out
    this horizontal linear layout right here
  • 0:53 - 0:54
    and this reset button.
  • 0:54 - 0:57
    You're trying to lay out two views.
  • 0:57 - 1:02
    One view is at the top and the other
    view is at the bottom of the screen.
  • 1:02 - 1:06
    So the question now is what view
    group would allow you to have
  • 1:06 - 1:09
    a view up here at the top and
    a view down by the bottom of the screen?
  • 1:09 - 1:13
    And it turns out that a relative layout
    is a pretty good candidate for this.
  • 1:13 - 1:17
    I can have my horizontal linear
    layout here, match the parent for
  • 1:17 - 1:20
    the width, and
    then wrap content for the height.
  • 1:21 - 1:24
    And I can have my reset button right
    here, align with the center and
  • 1:24 - 1:26
    bottom of the pairing.
  • 1:26 - 1:29
    Okay, so you have a Relative Layout, and
  • 1:29 - 1:33
    that Relative Layout has a Button
    child and a Linear Layout child.
  • 1:33 - 1:36
    And the Button child is
    this Reset button, and
  • 1:36 - 1:40
    the Linear Layout is the Linear Layout
    here, the horizontal one.
  • 1:40 - 1:44
    Furthermore, this horizontal linear
    layout has two children, and
  • 1:44 - 1:47
    those children are also linear layouts.
  • 1:47 - 1:50
    They are the linear layout for
    team A and the linear layout for
  • 1:50 - 1:52
    team B that you see here.
  • 1:52 - 1:57
    The linear layout for team A has
    two text views and three buttons.
  • 1:57 - 2:00
    The same is true of this
    linear layout for team B.
  • 2:00 - 2:03
    Five children, two text views,
    and three buttons.
  • 2:03 - 2:05
    This portion of the layout
    you've already made,
  • 2:05 - 2:09
    you just need to add this,
    all right, let's do it.
  • 2:09 - 2:13
    Okay, I'm here in my XML code and so the
    first thing I'm going to do is is I'm
  • 2:13 - 2:18
    going to make the Root Relative Layout
    that you saw in the diagram.
  • 2:18 - 2:24
    So here going to type RelativeLayout,
    and I actually want
  • 2:24 - 2:28
    to cut and paste these two lines because
    they need to be in the root layout.
  • 2:28 - 2:34
    So I'm cutting them and I'm pasting
    them here, in my root layout.
  • 2:34 - 2:37
    Okay, now I'm going to close
    off my RelativeLayout here and
  • 2:37 - 2:44
    I'm going to move this closing
    tag all the way to the bottom.
  • 2:46 - 2:49
    Okay, so what I essentially have right
    now Is this part of the diagram.
  • 2:49 - 2:53
    All right,
    looks like I have some errors as well.
  • 2:53 - 2:57
    Let's see, yes, I haven't defined
    a height or a width, so let's do that.
  • 2:59 - 3:02
    Now my relative layout had the button
    at the bottom center of the screen.
  • 3:02 - 3:05
    So, to do that, it's probably going to
    need to fill the whole screen.
  • 3:05 - 3:07
    So I'm going to do
    match parents on both.
  • 3:09 - 3:12
    Okay, now I need to add the button.
  • 3:12 - 3:18
    I'm going to scroll down, right here,
    to where the linear layout closes,
  • 3:18 - 3:23
    but I still am inside the relative
    layout, and I'm going to add a button.
  • 3:23 - 3:27
    And I'm going to go ahead and
    wrap content for that button,
  • 3:27 - 3:30
    because it's not a button that
    expands to fill the entire bottom of
  • 3:30 - 3:33
    the screen or
    expands to fill the entire screen.
  • 3:34 - 3:37
    And now the parent of this button
    is the RelativeLayout, and
  • 3:37 - 3:40
    we're going to set the text
    of this button to Reset.
  • 3:40 - 3:43
    Let's see what this looks like.
  • 3:43 - 3:47
    Okay so my reset button's up here,
    that's not exactly where I want it to
  • 3:47 - 3:52
    be, but it's parent is relatively out,
    that fills up the entire screen.
  • 3:52 - 3:54
    So I can align it to the parent.
  • 3:54 - 3:57
    I want to align it to
    the parents bottom, and
  • 3:57 - 4:01
    I want it to be in the center of
    the parent, horizontally anyways.
  • 4:01 - 4:04
    Cool, my button seems to
    be in the right place.
  • 4:04 - 4:06
    I'm going to select everything here.
  • 4:06 - 4:10
    And I'm going to do
    a command option L on Mac.
  • 4:10 - 4:14
    Which is the same thing as Control-Alt-L
    on Windows to just reformat the code and
  • 4:14 - 4:16
    get it to look nice.
  • 4:16 - 4:19
    Okay let's go back to our Java code.
  • 4:19 - 4:23
    Now I've got my button but
    it's not doing anything.
  • 4:23 - 4:26
    Let's start by making a method for it.
  • 4:26 - 4:32
    I'm going to make this right above
    the display methods, here, public void.
  • 4:32 - 4:35
    I'm going to call this
    method resetScore,
  • 4:35 - 4:38
    because that's what I intend for
    it to do.
  • 4:38 - 4:43
    Scroll up, I'm going to make
    it match these other methods
  • 4:43 - 4:47
    with the View v, and then, curly braces.
  • 4:47 - 4:50
    I won't worry about what's
    going to go in here for now.
  • 4:50 - 4:53
    I'm going to go back to my XML code And
  • 4:53 - 4:57
    I'm going to do the second part of
    the hooking the button to the Java code
  • 4:57 - 5:02
    by adding a onClick attribute here for
    resetScore.
  • 5:02 - 5:06
    Okay, so now when I click this button
    the code here will be run, but
  • 5:06 - 5:08
    there isn't any code here.
  • 5:08 - 5:09
    Let's figure out what I need to add.
  • 5:11 - 5:14
    Okay, let's go back to this
    discussion of pseudoCode.
  • 5:14 - 5:17
    When I hit the Reset button,
    what do I want to happen?
  • 5:17 - 5:21
    Well, I want both of these
    two scores to show 0.
  • 5:21 - 5:24
    Furthermore, I want the variables for
    score team A and for
  • 5:24 - 5:27
    score team B to go back to zero.
  • 5:27 - 5:30
    Remember, when I click on any of
    these buttons, I'm adding two and
  • 5:30 - 5:32
    then displaying the variable.
  • 5:32 - 5:34
    So, if I don't put
    the variable back to zero,
  • 5:34 - 5:36
    it's going to show an incorrect number.
  • 5:36 - 5:39
    So here’s what I came up
    with pseudoCode-wise.
  • 5:39 - 5:43
    The first thing I want to do is
    set the score for Team A to zero.
  • 5:43 - 5:46
    Then I want to do the same thing for
    Team B.
  • 5:46 - 5:50
    Now both of the scores are zero, but
    nothing's been displayed yet, which is
  • 5:50 - 5:55
    why in Step 3 I'll display the score for
    Team A, which has been set to zero.
  • 5:56 - 6:00
    And to be a little bit more specific,
    I’m going to display the score for
  • 6:00 - 6:04
    Team A here, and then I'll display
    the score for Team B here.
  • 6:04 - 6:08
    And because in Steps 1 and 2,
    I've ensured that they're set to zero,
  • 6:08 - 6:10
    they will display zero here and here.
  • 6:10 - 6:14
    Then when I click any of these
    buttons to update ScoreForTeamA or
  • 6:14 - 6:18
    ScoreForTeamB, it's going to be updating
    but starting with a score of zero.
  • 6:20 - 6:24
    Okay, so in reset score I'm going to
    type my pseudo code as code, code.
  • 6:24 - 6:29
    So the first thing I'm going to do is
    take score A and set it's value to
  • 6:29 - 6:34
    zero using a assignment operator
    here and the value of zero.
  • 6:34 - 6:36
    Oh and
    don't forget the semi colon of course.
  • 6:37 - 6:39
    I'll do the same for score B.
  • 6:42 - 6:49
    After that, I'm going to display in
    the team A spot, the score for team A.
  • 6:49 - 6:53
    And then I'm going to display in
    the team B spot, the score for team B.
  • 6:55 - 6:57
    I'll also go ahead here and
    add a comment.
  • 6:59 - 7:00
    Okay, this all seems reasonable.
  • 7:00 - 7:04
    And it's been a while since I've
    run anything on my phone, so
  • 7:04 - 7:07
    I'm going to press the Run button,
    okay, cool.
  • 7:07 - 7:08
    I have a RESET button.
  • 7:08 - 7:09
    Let's see if it works.
  • 7:13 - 7:15
    Good, it sets to zero.
  • 7:15 - 7:16
    Let's click a little bit more,
  • 7:16 - 7:19
    just to make sure that
    everything's still working.
  • 7:24 - 7:28
    Cool, and it looks like it is, awesome.
  • 7:28 - 7:30
    Now this was a little
    bit of a tricky one.
  • 7:30 - 7:34
    So let me show you what happens if
    you were to switch around the order,
  • 7:34 - 7:35
    do something a little bit differently.
  • 7:36 - 7:39
    What if I switch these two around?
  • 7:39 - 7:41
    Well, let's just see what happens.
  • 7:42 - 7:46
    Okay, so here it is,
    let's see what it does.
  • 7:46 - 7:48
    Okay, so I'm going to add some points.
  • 7:49 - 7:53
    Now for the moment of truth,
    Reset button.
  • 7:53 - 7:56
    Huh, doesn't seem to do anything.
  • 7:56 - 7:59
    Let's try clicking, huh, interesting.
  • 7:59 - 8:01
    Well it's kind of hard to see,
  • 8:01 - 8:05
    but the score before said 19,
    I hit the reset button nothing changed.
  • 8:05 - 8:08
    But then when I hit free
    throw it showed one.
  • 8:10 - 8:12
    Lets try with the other side,
    if I hit plus two points.
  • 8:12 - 8:14
    Oh, it shows two.
  • 8:14 - 8:18
    Lets look at the code again for
    why that might be the case.
  • 8:18 - 8:21
    So I switched around displaying and
    setting the score.
  • 8:21 - 8:25
    Just to see what kind of error
    behavior I might get from that.
  • 8:25 - 8:30
    Let's say TeamA has a score of 30 and
    TeamB has a score of 40.
  • 8:30 - 8:33
    When I say displayForTeamA
    it's going to show 30 and
  • 8:33 - 8:37
    when I say displayForTeamB
    it's going to show 40.
  • 8:37 - 8:41
    Only after that, will it actually
    set these values to zero.
  • 8:41 - 8:46
    But since it displayed first it's not
    going to show the values of zero.
  • 8:46 - 8:48
    But the variable will be zero.
  • 8:48 - 8:53
    So when I press something like
    addThreeForTeamB, it's going to take
  • 8:53 - 9:00
    the value of zero that I set down here,
    add three, and then display three.
  • 9:00 - 9:06
    So to us, it would look like TeamB
    went from having a score of 30 then to
  • 9:06 - 9:12
    after clicking the reset button, a score
    of three, which is kind of a weird jump.
  • 9:12 - 9:15
    Now one way I could fix this besides
    swapping it back to how it should be
  • 9:15 - 9:19
    Is I could put display zero here.
  • 9:19 - 9:22
    And you can test this out on your own,
    but this would actually work.
  • 9:22 - 9:24
    It's just a little bit counterintuitive.
  • 9:25 - 9:29
    I like showing examples like this
    because it kind of shows the beauty and
  • 9:29 - 9:31
    subjectivity of code.
  • 9:31 - 9:34
    Now, in this case, I happen to think
    fairly strongly that the first way that
  • 9:34 - 9:36
    I had the code was better.
  • 9:36 - 9:39
    But you might start seeing scenarios
    where there could be two different
  • 9:39 - 9:43
    ways to write the code, and
    both of them are technically correct.
  • 9:43 - 9:45
    Since there isn't always
    one right answer,
  • 9:45 - 9:49
    you shouldn't feel constricted
    to do it the exact correct way.
  • 9:49 - 9:53
    Try coding up something that works
    your way, see how other people do it,
  • 9:53 - 9:58
    and then compare, who's more efficient,
    whose code is clearer.
  • 9:58 - 10:01
    These kind of discussions could be
    a really helpful learning experience.
  • 10:01 - 10:04
    Okay, but I'm going to revert the code
    back to the state that it was before
  • 10:04 - 10:05
    which was working and
  • 10:05 - 10:10
    now I have all the functionality of my
    app but it's not pretty, let's fix that.
Title:
Add the Reset Button
Description:

07-42 Add the Reset Button

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

English subtitles

Revisions Compare revisions