YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← LinearLayout

Get Embed Code
13 Languages

Showing Revision 7 created 05/24/2016 by Udacity Robot.

  1. Okay, so we saw how this
    linear layout contains two
  2. children text views inside it.
  3. By the way, these background colors
    are just a teaching tool to help you
  4. understand that these two children
    text views are inside this parent.
  5. The red and blue colors actually
    won't show up on the device
  6. unless you specifically set them as
    background colors on these views.
  7. To show you what I mean let's
    go to the XML Visualizer.
  8. If we drop in the code
    to the XML Visualizer,
  9. this is what it looks
    like on the device.
  10. So first we have
    a LinearLayout viewgroup, and
  11. this is transparent because there's
    no background color set on it.
  12. The first child is a TextView
    that sets guest list, so
  13. that shows up at the top here.
  14. The second child is a TextView
    that says Kunal and
  15. that shows up below the first TextView.
  16. Now, if I copy this TextView and
    paste it below this one,
  17. what do you think will happen?
  18. Yup, we have another Kunal that
    shows out right below the first one.
  19. Okay, so the pattern seems to
    be if we add more TextViews,
  20. here, then they'll just show up
    one after the other in this list.
  21. Now let's look at the code more closely.
  22. It starts with an opening
    angle bracket and
  23. then the view name,
    which is LinearLayout.
  24. Then it lists a bunch of attributes and
    then there's a closing angle bracket.
  25. Notice that there's no forward slash
    because this is just the opening
  26. tag of the LinearLayout.
  27. The closing tag is all
    the way down here, because we
  28. want to insert children elements in
    between the opening and the closing tag.
  29. But for example, for this test view,
    since there are no children within that,
  30. then we can just use
    a self closing tag for it.
  31. Same for this text view here,
    and this text view here.
  32. So when we say a view group
    contains children views,
  33. then we need to inset them in between
    the opening and closing tags.
  34. Now, the other thing you may have
    noticed is this attribute called Android
  35. orientation equals vertical.
  36. We haven't seen this before, so
  37. let's look at the Android documentation
    like I showed you earlier.
  38. I open up a new browser window, and
    then I type in android orientation.
  39. The first result is about
    a LinearLayout, and
  40. it's on the developer.android.com site.
  41. So let's click on it.
  42. Just like the textview documentation,
    it was a little overwhelming.
  43. We can ignore most of this text.
  44. We just need to verify that this indeed
    is the page for LinearLayout, and
  45. then we scroll down and
    look at the XML attributes.
  46. Now, we're looking for the attribute
    that is called Android orientation, and
  47. here it is.
  48. So let's click on it to
    look at more details.
  49. The description says that this attribute
  50. determines whether the layout
    should be a column or a row.
  51. The value of this attribute
    should be horizontal for
  52. a row, where the value should
    be vertical for a column.
  53. And then it lists those two values here.
  54. Cool, so our code currently says that
    the android orientation is vertical.
  55. So that explains why the views
    are showing up as a column.
  56. Now, to satisfy our curiosity,
    we should also try the other value.
  57. Let's set the orientation to be
    horizontal and see what happens.
  58. I'm going to go into the code and
    erase the vertical value.
  59. I'm going to type horizontal, and look,
    now the views are in a horizontal row.
  60. I don't know about you, but
  61. I don't really like to read
    my guest list horizontally.
  62. But there are still many other useful
  63. cases where you would want
    a horizontal linear layout.
  64. For example, if you're creating a list
    item, you might want an image on
  65. the left hand side, and then
    a description on the right hand side.
  66. I'm going to let you try this
    out on your own in a second, but
  67. first I want to point out
    this additional line of code.
  68. This is the XML namespace declaration.
  69. We use this namespace in order to
    specify that all of these attributes
  70. here belong to android.
  71. That's why they all start
    with android colon.
  72. This is essentially short hand for this
    specific URL that's unique to android.
  73. You can actually create
    your own custom attributes.
  74. So to prevent name conflicts, where two
    attributes are named the same thing,
  75. but actually have different behaviors,
    we always add this prefix here,
  76. android:, to signify that
    these are android attributes.
  77. So basically, always remember to
    add this XML namespace declaration
  78. in the opening tag of the root
    view of your XML file.
  79. Now it's your turn.
  80. We want you to be able to experiment
    with the linear layout code now.
  81. Try to add more TextViews so
    there's more items in this column.
  82. Who would you put on an exclusive
    guest list for your party?
  83. Also try changing the linear
    layout orientation attribute.
  84. Remember that it can be set
    to vertical or horizontal.