YouTube

Got a YouTube account?

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

English subtitles

← Coding the Details Screen - Developing Android Apps

Get Embed Code
6 Languages

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

  1. So how did you break up the UI
    into smaller components?
  2. Well, you might've thought that
    this could be two columns.
  3. But then it would be hard to
    position the elements here.
  4. You could center them vertically
    within the height of the screen.
  5. But it wouldn't necessarily line up
    with the temperature views on the left
  6. hand side.
  7. Instead this looks more like
    a horizontal linear layout.
  8. Then the rest of the elements could
    be laid out by using a vertical
  9. linear layout.
  10. The vertical linear layout
    would have six children.
  11. The third element would be a horizontal
    linear layout composed of two children.
  12. The first would be another vertical
    linear layout with these two text views
  13. and the second element would be another
    vertical linear layout composed of.
  14. These two elements.
  15. To make the contents of the whole
    screen vertically scrollable
  16. we put it inside a scroll view.
  17. Using a list view her would be overkill
    because we don't need to scale
  18. to an infinite number of item and
    we don't need recycling.
  19. There's a fixed number of
    fields on the screen so
  20. the scroll view is the perfect choice.
  21. I can show you our implementation for
    the fragment detail XML layout.
  22. We hardcoded some data in the layout.
  23. So that it would show up as
    a preview in the Design pane.
  24. At the root of the view hierarchy,
    we have a ScrollView.
  25. ScrollViews can only have max one child.
  26. So we set that to be
    the vertical LinearLayout.
  27. Inside of this layout, we have
    a TextView for the day of the week.
  28. The calendar date and
    then a horizontal linear layout.
  29. This is followed by
    the humidity text view,
  30. wind text view, and pressure text view.
  31. In the XMO code we see the scroll
    view with the child linear layout.
  32. We give it some padding of 16 dips so
  33. that the content is not flesh up
    against the edge of the screen.
  34. Then we see the text views followed
    by the horizontal linear layout.
  35. We specify layout margin top of 16 dip
  36. to give it some more space from
    the bottom of this text view.
  37. Within this horizontal linear layout
    we have one vertical linear layout.
  38. Which has a width of 0 and
    a weight of 1, and
  39. another linear layout with
    a width of 0 and a weight of 1.
  40. That means that both of these
    children have equal width.
  41. For this linear layout, we specify
    gravity to be center horizontal.
  42. That means that the contents inside
    of it will be centered horizontally.
  43. Which includes the icon as well
    as the forecast text view.
  44. Lastly we have the remaining text
    views for the other weather details.
  45. When the layout looks good,
    we update the detail fragment.
  46. At this point,
    we also move it into its own file.
  47. In the unload finish method,
  48. we used to have a find view by
    ID call to find the text view.
  49. Now that the detail fragment
    has a lot more views
  50. we don't want to continue adding even
    more fine view by ID calls here.
  51. Because it will have to traverse
    the view hierarchy every time that
  52. the loader refreshes.
  53. Instead we modify the on create method.
  54. Once the fragment is
    inflated we go ahead and
  55. find a reference to all the views
    we are going to need later on.
  56. We store these views as member
    variables of the class,
  57. which is why the name
    starts with the letter m.
  58. In the on create loader method we
    make sure that the projection for
  59. our content provider query contains
    all the information that we need.
  60. It's declared at the top of the file.
  61. Before we had it called
    forecast columns, but
  62. we just renamed it to detail columns.
  63. And we also added some more columns
    because now we're displaying more
  64. information on the screen.
  65. Then in the onLoadFinished method we get
    a cursor back with the data we need.
  66. We read the weather
    condition ID from the cursor
  67. because we're going to need it to
    determine which image to display but for
  68. now we can use a place order icon.
  69. We continue reading from the cursor
    to get the date, the description and
  70. the other fields.
  71. To format the data properly for the user
    we also copied over the strings and
  72. the utility method from the gist.