YouTube

Got a YouTube account?

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

English subtitles

← Change the TextView

Get Embed Code
14 Languages

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

  1. Okay, so we've seen TextView code for
    the first time.
  2. >> But
    it's kind of hanging out in limbo.
  3. >> Right, we do need a space
    where we can house it.
  4. >> Yeah, that space is an IDE.
  5. >> There's that acronym again.
  6. What does it stand for again, Catherine?
  7. >> Integrated Development Environment
    >> Right, and
  8. we are going to be using
    Android Studio in this class.
  9. This is what it looks like.
  10. Still a little intimidating.
  11. >> Yeah.
    I think we might need something
  12. that will help our learner
    ramp up a little bit easier.
  13. >> Right, so we've been working
    on developing something that is
  14. Android Studio on training wheels,
    in the tradition of really convoluted
  15. acronyms in computer science,
    we are calling it XMLV.
  16. >> Which stands for XML Visualizer.
  17. >> So you write a little bit of XML?
  18. You get to see the output.
  19. You write some more,
    you get to see more output.
  20. >> Yeah.
  21. So let's go use it.
  22. >> Okay.
  23. >> Since this XML visualizer was
    created specifically for this course,
  24. it won't provide all the functionality
    that Android Studio supports.
  25. But eventually in the problem
    set of this lesson,
  26. we'll get you into Android Studio so
    you won't need this website anymore.
  27. A link is in the instructor notes
    If you want to follow along.
  28. For this code,
    the text says Happy Birthday.
  29. So when I look at the device it says,
    Happy Birthday.
  30. Now let's try to change the text
    to Happy Birthday, Kunal.
  31. And then when I zoom in on the device
    preview you see that it now says,
  32. Happy Birthday, Kunal.
  33. And what happens by trying to
    stand the width and the height.
  34. I'll pick some arbitrary
    values like the 300dp for
  35. the width and 500 for the height.
  36. And now in the preview pane, you see
    that the TextView is a lot bigger.
  37. The text though, however, is still
    the same size in the top left corner.
  38. Notice that for the width and
    height values of 300 and
  39. 500 is followed by dp in each case.
  40. This is a unit of measure
    like centimeters or
  41. millimeters, that we use to describe
    the size of views on Android.
  42. As well as the distancing between views.
  43. The unit dp stands for
    density-independent pixels.
  44. Let me explain why we need that.
  45. Say these beautifully drawn rectangles
    represent different devices.
  46. They're the same physical size, but
    they differ in terms of resolution.
  47. This is a medium resolution device with
    a medium number of pixels on the screen,
  48. high resolution and
    extra-high resolution device.
  49. When I say pixel, I mean a phone screen
    is made up of many tiny squares,
  50. which are pixels, and they light up
    based on what you're looking at.
  51. So if I define the size of a view, for
    example, a button, to be 2 pixels tall
  52. by 2 pixels wide, this is what it would
    look like on a medium resolution device.
  53. On a high resolution device,
    it would also be 2 pixels by 2 pixels.
  54. But it's a little bit smaller,
  55. because there's a lot more pixels trying
    to be packed into this device, and
  56. then on an extra high resolution device
    where there's tons more pixels packed
  57. into this space,
    this button is actually pretty tiny.
  58. I can barely tap on it with my finger.
  59. I have to use edge of my finger or
    my fingernail to reach it.
  60. Just because I have extra
    high resolution device,
  61. doesn't mean I have a smaller finger.
  62. I still want to be able to tap
    the buttons on the screen.
  63. And that is why we have
    density-independent pixels.
  64. I can define my button to
    be 2dps tall by 2dps wide.
  65. This is what it would look like
    across the different devices.
  66. It is the same physical size, but
  67. under the hood Android is mapping
    it to a different number of pixels.
  68. You don't have to worry about any of
    that logic, all you need to remember
  69. is that you need to define your
    sizes in terms of dp values.
  70. When designing your apps, we recommend
    that all touch targets like buttons
  71. should be at least 48dps tall and wide.
  72. Notice that it says 48dps and
    not 48 pixels,
  73. otherwise it would be really tiny on
    this extra high resolution device.
  74. This will make your app easy to use for
    everyone.
  75. So with all of this knowledge,
    I want you to try and
  76. change the TextView code now.
  77. You're going to be writing your very
    first lines of XML, how exciting.
  78. So first try to change
    the text in the TextView.
  79. And then try to change
    the sides of the TextView.
  80. Then I want you to try to
    create an error sad face.
  81. And then I want you to undo it,
    happy face.