YouTube

Got a YouTube account?

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

English subtitles

← Visualize and Fix Overdraw - Solution

Get Embed Code
13 Languages

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

  1. So there should have been four
    unnecessary backgrounds in

  2. the remaining files.
  3. Let's go ahead and review.
  4. In our base activities XML, remember,
    we wanted to keep this white background.
  5. Now, in the XML file for
  6. our chat fragment, we've declared an
    unnecessary white background right here.
  7. We don't need this because we can use
    the white one from our main activity.
  8. That's it for this file.
  9. Now, in the XML for
    our individual chat items,
  10. we have three unnecessary backgrounds.
  11. We have one right here that we don't
    need, one right here that we don't need,
  12. and lastly, down here, we don't this
    white background in our text view.
  13. So we can go ahead and remove these.
  14. All right.
    Cool.
  15. Let's see what kind of progress we
    made as far as overdraw is concerned.
  16. Now this is what your
    screen should look like
  17. with these backgrounds removed properly.
  18. Much cleaner, right?
  19. Okay, good work.
  20. Now, we're just about done,
  21. but there's actually one last
    optimization you can make.
  22. Notice there's overdraw
    here by the avatars,
  23. because we are drawing a rectangle and
    then the avatar image on top of it.
  24. Let's try and be a bit smarter here,
  25. let's only set a background
    when an avatar can't be found.
  26. Now, we can do this with
    some conditional code.
  27. All right,.
  28. So let's jump into our chat adapter
    code, which is responsible for
  29. filling in our individual chat
    items as they get loaded.
  30. Let's go to our get view method.
  31. Now, down here at the bottom we actually
    have some logic that's displaying both
  32. the avatar and setting a background
    color at the same time.
  33. Let's see if we can get
    a bit more intelligent here.
  34. Let's write some code that
    only sets the background color
  35. when an avatar isn't present.
  36. And when it is, we'll set the background
    color to be transparent and
  37. just load the avatar.
  38. We can do it like this.
  39. All right, so here's our updated code.
  40. Notice that when an avatar isn't
    present, what we're going to do is load
  41. a transparent color into where
    the avatar would normally be, and
  42. then set a true background color for
    the avatar.
  43. Now, in the else case, which
    represents when the avatar is present,
  44. we'll go ahead and
    load the avatar properly,
  45. and then we're going to set
    the background color to transparent.
  46. This way we're minimizing overdraw.
  47. All right, so let's go ahead and
    see how this improvement helps us out.
  48. Nice.
  49. As you can see here now by our avatars,
  50. much less overdraw
    with our updated code.
  51. All right, so that was our last
    optimization, which means we're done.
  52. Let's go ahead and recap.
  53. When we started,
    our overdraw was much more prominent.
  54. The first thing we did was set
    the background drawable to null.
  55. The second thing we did was remove
    unnecessary background declarations from
  56. our XML markup.
  57. Now, the third and last thing we
    did was display a background color
  58. only if there is no avatar present.
  59. Now, with these changes,
    we ended up with this.
  60. Much, much cleaner in terms
    of overdraw performance.
  61. So, awesome job.
  62. And remember, perf matters.