YouTube

Got a YouTube account?

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

English subtitles

← Width and Height

Get Embed Code
14 Languages

Showing Revision 4 created 07/18/2016 by Udacity Robot.

  1. We've been making a guest list so
    far for the party.
  2. >> Wait, this is the guest list for
    the birthday party, right, Catherine?
  3. >> Yeah.
  4. >> I really hope I'm on this list.
  5. >> Well, we'll have to see about that.
  6. >> Wow, I feel really small about that.
  7. >> Well, speaking about small,
  8. let's talk about the size
    of views on a screen.
  9. >> Oh, we've used the fixed written
    height, which is the dp, right?
  10. >> Yeah, the width and height.
  11. And we could also set,
    wrap content, with view.
  12. >> Right, which is a strange way of
    saying that the view is going to
  13. wrap itself around the content.
  14. So the content grows large,
  15. the view grows large, the content
    is small and the view grows small.
  16. >> Yeah, and there's actually a third
    one which is called, match parent.
  17. >> That seems a little strange.
  18. That sounds like a dating website for
    single parents.
  19. >> Not quite.
  20. Match parent means that the view will
    be As wide or as tall as the parent.
  21. >> Oh, so that makes sense.
  22. I am a view, I have a parent and
    my width and
  23. height is going to be
    the same as my parent.
  24. Okay.
    >> Exactly, so that's to summarize,
  25. the different values that you can
    set for a size of a view is width.
  26. Fixed dp for width and height.
  27. >> Correct,
    you can also do wrap_content.
  28. And the next one we're
    going to try out is
  29. >> match_parent.
  30. Here are some examples of how setting
    different widths on the child views
  31. in a linear layout can affect
    the final user interface.
  32. In this example we set each child
    view to have a fixed width of 200 dp.
  33. If the content inside each
    view is greater than 200 DP
  34. then you run risk of cutting
    some content off like this.
  35. In this example we set each child
    view to have a width a wrap content.
  36. Now all the content content is shown,
    but
  37. the width of each view really varies
    based on what's inside each view.
  38. In this example, we set the width of
    each child view to be match parent.
  39. Now you see that the width of each child
    is as wide as the parent view group.
  40. Regardless of the content inside of it.
  41. Now those same values can also be
    applied for the height of each view.
  42. In this example we set the height of
    this child text view to be 200 dp.
  43. If the content inside
    it is taller than that.
  44. Then you run the risk of cutting
    off some of the content.
  45. In this example, we set the height of
    the child text view to be wrap content.
  46. That way all the content will
    be displayed on screen and
  47. nothing will be cut off because
    the size of the text view is dependent
  48. on the content inside of it.
  49. In this example, we set the height of
    the child text view to be match parent.
  50. That way the child view is as
    tall as the parent itself,
  51. regardless of the content inside it.
  52. Let's open the XML visualizer now and
  53. try to be more like our
    parents in the code.
  54. We're providing you a link to the XML
    visualizer with some starter code
  55. in the instructor notes below.
  56. In this case,
    the LinearLayout is the root view
  57. of this layout because it's
    the first and outermost view.
  58. If we set match_parent for the width and
    height of this root view, and
  59. we set this as the main
    layout of our app,
  60. then this linear layout will be as
    tall and wide as the device screen.
  61. I can show you by setting
    the background of this linear layout
  62. to be a non-transparent color.
  63. If I set a gray background color
    on this linear layout Then,
  64. you can see how the gray extends
    the full width and height of the device.
  65. Now, what happens if I try
    to change the width or
  66. height of these text
    views to be match parent?
  67. To make it clear where
    the bounds of each view are,
  68. I'm going to set a background
    color on each of the views.
  69. Now I'm going to change the height of
    this text view to be match parent.
  70. By the way, you spell it match_parent.
  71. And now you see that this text view
    takes up the full height of the parent.
  72. Unfortunately, it pushes
    everything else off the screen, so
  73. we don't really want that.
  74. So let's change it back to wrap content.
  75. Okay.
  76. So let's change the width now to be
    match parent and see what it does.
  77. Now the width of the TextView is as
    wide as the parent, which in turn,
  78. is as wide as the device screen.
  79. If I change the other TextViews
    to also be match_parent
  80. You can see that it also starts to
    take up the full width of the parent.
  81. I also want to point out one more thing.
  82. Every time you see an attribute that
    starts with layout underscore, like
  83. layout height or layout width, these are
    actually view group layout parameters.
  84. These are used by the parent view
    group to determine the size and
  85. the position of these views.
  86. Meanwhile, the other attributes
    like background, text size, and
  87. text are handled by the TextView
    in terms of styling its own view.
  88. But these view group layout
    parameters are handled by the parent.
  89. Now it's your turn to try
    different width and height values.
  90. For the link to the XML visualizer
    with some starter code,
  91. see the instructor notes below.
  92. Try to change the width and
    height values of each TextView.
  93. You can set a fixed dp value,
    wrap-content, or match_parent.
  94. Remember that for each view, the width
    and height values don't have to match.
  95. When you're done,
    check this box to continue.