English subtitles

← Overdraw in Sunshine

Get Embed Code
4 Languages

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

  1. Your device has a pretty nifty developer
    option for showing GPU overdraw.
  2. Once you toggle back to active,
  3. you'll notice that your layouts
    are all drawn with a tint.
  4. A pixel drawn once is
    shown in its normal color.
  5. But when the pixel is drawn over itself,
    it's tinted.
  6. You've got blue for one overdraw, green
    for two, pink for three and red for
  7. four or more.
  8. Clearly, the goal here is to
    minimize the amount of red, and
  9. keep everything fairly blue.
  10. To see how this works,
    we'll look at Sunshine both before and
  11. after Dan updated it with a look
    inspired by Material Design.
  12. You'll notice that most things
    are pretty consistent, except that
  13. after material, everything is a shade or
    two darker on the tint scale.
  14. This is because material design focuses
    on beautiful components and transitions.
  15. And so
    it comes with a heavier drawing cost.
  16. Some events have a heavier cost as well.
  17. Clicking, for example,
  18. tends to result in a shading effect as
    an indicator of the action to the user.
  19. You can see this with a red
    overdraw on a touch event.
  20. With material design, though,
  21. we increase the number of these types of
    smaller overdraws with the addition of
  22. animations, such as the scroll animation
    or the hover action in the menu.
  23. These animation elements add
    a bit of magic to the app and
  24. help create a beautiful user experience,
    but as you've seen,
  25. there's clearly a rendering cost.
  26. Perf considerations are a trade-off.
  27. You want to do fancy things, but
    you might be doing too much, so
  28. use your tools to set up
    a regular testing process and
  29. then evaluate why your changes for the
    better versus how it could be improved.