English subtitles

← Adding Images to the App - Developing Android Apps

Get Embed Code
10 Languages

Showing Revision 13 created 05/24/2016 by Udacity Robot.

  1. We're providing you with an asset drop,
    view the link below,
  2. so that you can download the images
    and include them in the app.
  3. When we open up the assets ZIP file,
  4. we see that the same icon
    is provided at different sizes
  5. for different resolutions.
    In the drawable MDPI folder,
  6. we see the assets that will be used
    on an MDPI device.
  7. In the drawable HDPI folder,
    we see the assets
  8. that will be used on an HDPI device.
    And the same goes for the other folders.
  9. Under the res directory copy over
  10. all the asset folders
    provided in the download.
  11. Clicking on an image shows a preview of it
    and the size and pixels is also shown.
  12. At this time you can also remove
    the old placeholder ic launcher icons.
  13. Our new launcher icons
    are located in mipmap folders.
  14. These are distinct folders
    from the drawable folders.
  15. If you build an APK
    for a target screen resolution like HDPI,
  16. the Android asset packaging tool, AAPT,
  17. can strip out the drawables
    for other resolutions you don't need.
  18. But if it's in the mipmap folders,
    then these assets will stay in the APK
  19. regardless of the target resolution.
  20. But when would you need
    an image at a resolution
  21. different than the resolution
    of the device?
  22. Well, one example
    is the Android launcher app,
  23. which controls the home screen
    as well as the All App store.
  24. The launcher app won't use the icon
    at the current density of the device,
  25. but rather pulls an icon
    for the next highest resolution up.
  26. For an XXHDPI device like the Nexus 5,
  27. normally the assets will be pulled
    from the drawable XXHDPI folder.
  28. However, in this case the launcher icon
    will pull the XXXHDPI version
  29. of the launcher icon.
  30. That will make the larger app icons
    appear sharper on the all apps screen.
  31. In the code replace @drawable/iclauncher
    with @mipmap/ic
  32. because of the new location of the icons.
  33. For the rest of the icons
    modify the forecast list
  34. and the details screen to display
    the right weather icon
  35. instead of the placeholder one.
  36. See the hints below
    in the instructor notes.
  37. Using the helper functions
    we've provided in the gist below,
  38. you can map the weather condition code
    to the icon that you'll need.
  39. This is what the app should look like
    when you're done with this step.
  40. Note that there are two types
    of each weather icon,
  41. a gray icon and a colored art image.
  42. In the main forecast list
    we'll be using the gray icon.
  43. However, for the today layout,
    we'll use the colored icon.
  44. When you go inside the detail activity,
    you'll also use the colored icon.
  45. At this time, you can also remove
    any images you hard coded
  46. into the layout XML, because
    they'll be populated dynamically now.