Got a YouTube account?

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

English subtitles

← Build 2-Pane Tablet UI

Get Embed Code
6 Languages

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

  1. By taking the knowledge that we
    learned about overriding resources
  2. in other folders,
  3. we'll walk through the code together on
    how to build up the two-pane tablet UI.
  4. First remove the values W820dp folder
    because we don't need to provide
  5. specific logic when for when the current
    orientation is greater than 820dp.
  6. Then go ahead and
    make the layout XML changes.
  7. Then create a new
    layout SW 600dp folder.
  8. And then add a new file
    called activity_main.
  9. We use the same file name as in
    the base layout folder activity_main so
  10. that this one overrides the behavior
    specifically on tablets.
  11. To see the code for this file you
    can check out the gist below.
  12. Essentially it's a horizontal linear
    layout that can hold a forecast fragment
  13. on the left and
    a detail fragment on the right.
  14. Now's a good time to talk about
    static verses dynamic fragments.
  15. In our implementation the forecast
    fragment is the static fragment because
  16. we're defining it in the XML layout no
    matter what orientation or device size
  17. we know that we're going to need a
    forecast fragment in the main activity.
  18. On the other hand, we only declare
    a container for the detail fragment, but
  19. not the actual fragment.
  20. It's initialized with different
    arguments each time as a dynamic
  21. fragment, so it's better to
    dynamically create and add that
  22. fragment in a fragment transaction
    in the main activity Java code.
  23. That way the fragment manager can keep
    track of those initialization arguments
  24. and pass those back to us on,
    after device rotation.
  25. Then we need to update
    the one pane UI layouts so
  26. that they're consistent
    with the two pane case.
  27. So in the activity main file for
    the base layout folder this used to be
  28. a frame layout we're going to
    declare it as a forecast fragment.
  29. That way it will match the two pane UI,
  30. where this also is declared
    as a fragment in the XML.
  31. That way the main activity never has
    to worry about dynamically adding
  32. the forecast fragment.
  33. In the main activity
    on create view method.
  34. Since the fragment is already inside
    this layout we can just remove this so
  35. we don't dynamically add it again.
  36. Similarly we modify the activity detail
    layout in the base layout folder
  37. we change the frame layout ID
    to be weather detail container.
  38. So that it matches the container
    view id in the two pane UI case.
  39. The pattern here is that
    the detail fragment will always be
  40. added to a container called
  41. both in the two pane, and one pane case.
  42. Since we changed the name
    of the container,
  43. we should also update
    the detail activity.
  44. This is only used in one pane mode.
  45. Here's where we change
    the container name.
  46. In the one pane mode the detailed
    activity will add the detail fragment
  47. dynamically to this container.
  48. After we modify the layout we
    should update the main activity so
  49. we dynamically add the detail fragment.
  50. In the main activity on create method we
    check for the presence of the weather
  51. detail container in the layout to know
    whether this is a two pane UI or not.
  52. We keep track of this information
    in a Boolean called mTwoPane.
  53. Remember that we start with the letter
    m, because it's a member variable.
  54. In this case,
    the Boolean should be true.
  55. So we go ahead and
    create a new detail fragment, and
  56. add it to the weather_detail_container.
  57. We commit the change by using
    a fragment transaction,
  58. which Rado introduced earlier.
  59. Otherwise If the detail container
    is not present in the layout, then
  60. the boolean should be false, meaning
    that this is a one-pane UI for phones.
  61. In this case, the detail activity will
    handle showing the detail fragment.
  62. Notice for the two-pane case that
    we check if the saved instant state
  63. bundle is null.
  64. If the save instant save
    bundle is not null,
  65. then we don't create a new one,
    and here is the reason why.
  66. Say you want to rotate the device.
  67. Before the activity and
  68. fragments get torn down, we store
    information in save state bundles.
  69. Then after the orientation change,
    the system restores the activity and
  70. the fragments,
    by passing back the same bundle, so
  71. that it can be recreated
    with the same state.
  72. That means if the bundle exists,
    then we should let the system
  73. handle restoring the detail fragment,
    and we can skip this code.
  74. Once a detail fragment
    is added dynamically.
  75. Make it show some placeholder
    data just for testing purposes.
  76. Later we'll plumb through the right
    logic, so that it can display the right
  77. information for
    the selected date on the left.
  78. Modify the detail fragment so
  79. that it doesn't expect the incoming
    intent to have a data URI.
  80. In this case,
    the detail fragment will just fall back
  81. to some placeholder data
    that we have in our XML.
  82. The reason the intent could be blank
    is because the detail fragment
  83. can now exist within the main activity.
  84. And the main activity isn't
    launched with a URI for
  85. only one date like the detail
    activity is normally launched with.
  86. Once you make the changes for
  87. the wire frames this is what
    the app should look like.
  88. The reason it doesn't show
    an icon here is because
  89. we removed the icon from being
    hard-coded in the layout.
  90. But once this data is populated
    dynamically in a later section,
  91. it should show up again.