English subtitles

← TextView Text Size

Get Embed Code
13 Languages

Showing Revision 3 created 05/25/2016 by Udacity Robot.

  1. If you haven't already noticed, the text
    is kind of tiny on this device screen.
  2. I mean, my eyesight is terrible, so
    I really need it to be a lot bigger.
  3. Luckily for us,
  4. there is an attribute that we can
    declare to change the text size.
  5. Oh, but
    wait there is an error down here.
  6. It says the computer wasn't
    able to understand my XML.
  7. Double checking the code I see this new
    line that we added is actually appearing
  8. in black font,
    whereas everything above has blue for
  9. the attribute name and
    red for the attribute value.
  10. So there's something
    wrong with this line.
  11. Oh wait, I see it now.
  12. Forward slash in the closing angle
    bracket are on this side up here.
  13. This is actually a common beginner
    mistake to add the attribute
  14. after the tack has been closed.
  15. Technically, this is
    hanging out in XML limbo or
  16. something because it's not
    tied to an XML element.
  17. What we really want is to copy these
    symbols and move them down here.
  18. That's better.
  19. There's no error, and this is valid XML,
    and then our font is bigger.
  20. Woo hoo!
  21. It's much more readable now.
  22. Note how the text size
    is set to be 45 sp.
  23. Sp stands for scale independent pixels.
  24. It is a unit of measure similar
    to dp which makes the app look
  25. consistent across different
    devices of different densities.
  26. Sp is only used for fonts because
    it adjusts based on the user's
  27. preferences and settings for text size.
  28. Let's look at that now.
  29. Let me show you where the setting is.
  30. Go to the settings app, then tap on
    display, and there's an option for
  31. font size.
  32. If you click on that,
    you can see the different font sizes.
  33. If I click on huge, and it increases
    the font size of everything.
  34. So always use sp to declare your
    font sizes so it will scale up or
  35. down according to the user's preference.
  36. In a moment you'll change
    the text size of the text view.
  37. However, I first wanted
    to show you one thing.
  38. This is the material design spec.
  39. Material design is a new design
    language developed by Google
  40. to help people create consistent and
  41. beautiful apps across different devices
    and platforms, like web and mobile.
  42. The design specification,
    or design specs for
  43. short, highlights the best practices for
    designing your app.
  44. It provides guidance on the layout
    of your app, visual style, imagery,
  45. animations, and much more.
  46. There's also a section on typography,
    or fonts.
  47. It lists a whole bunch of information
    here that you can read later.
  48. But the most important
    thing is this guide here,
  49. that talks about
    the recommended text sizes.
  50. If you're displaying
    a really big header,
  51. you can use some of
    these text size values.
  52. If you're trying to do a title or
    some body text or a caption,
  53. you can use some of these sizes.
  54. This will help guide you on what types
    values you can pick depending on what
  55. your use case is.
  56. But be careful, because if you
    pick too many type sizes or
  57. styles in your app, it can be
    very overwhelming for the user.
  58. So just pick a couple of styles to
    display the information that you want.
  59. When you change the text size for
  60. the TextView,
    try a couple of these values here.
  61. Go ahead and change the TextView font
    size using the material design spec.
  62. And then if you're up for
  63. a challenge, you can try learning
    about the text appearance attribute
  64. from the Google+ Android Dev Protip
    that I've posted below.
  65. And then you can try this in
    the XML Visualizer as well.
  66. The link to the XML Visualizer
    with the code for
  67. you to get started is linked below.