Return to Video

Visualize and Fix Overdraw - Quiz

  • 0:00 - 0:02
    Hey, what's going on?
  • 0:02 - 0:03
    And thanks Colt.
  • 0:03 - 0:05
    Now, I'm really excited
    to join heads and
  • 0:05 - 0:08
    perf out a developer
    situation involving overdraw.
  • 0:08 - 0:09
    Now, if you want to follow along,
  • 0:09 - 0:13
    you'll want to clone the code sample
    at the URL in the instructor notes.
  • 0:13 - 0:16
    All right, so here we are in
    our sample code application.
  • 0:16 - 0:20
    Now, let's imagine,
    you just created a chat application, and
  • 0:20 - 0:23
    you want to find out how well you did
    in respect to overdraw performance.
  • 0:24 - 0:27
    The first thing you'll want to do is
    gather information about how your
  • 0:27 - 0:28
    app is performing.
  • 0:28 - 0:31
    To do this you're going to
    turn on the GPU overdraw debug
  • 0:31 - 0:32
    setting on your device.
  • 0:32 - 0:36
    You will find it within the Developer
    Options section of your systems
  • 0:36 - 0:37
    settings, like so.
  • 0:41 - 0:43
    Okay, it's on now.
  • 0:43 - 0:44
    Now, back to our chat application.
  • 0:44 - 0:49
    Uh-oh, look at all this excessive
    overdraw happening here.
  • 0:49 - 0:52
    You want to reduce this,
    particularly the red areas.
  • 0:52 - 0:55
    So here's a little reminder
    about what the colors mean.
  • 0:58 - 1:00
    Cool, ready to dig in?
  • 1:01 - 1:03
    Let's dive into how the UI
    is currently built, and
  • 1:03 - 1:05
    see if we can clean it up
    a bit to reduce some overdraw.
  • 1:06 - 1:08
    Now, as Colt mentioned,
  • 1:08 - 1:12
    one way to do this is to remove
    unnecessary backgrounds and drawables.
  • 1:12 - 1:13
    So let's take a stab at doing that.
  • 1:14 - 1:17
    How about we spiff up
    Chatum to be like this?
  • 1:20 - 1:23
    But let's chip at the problem
    one step at a time.
  • 1:23 - 1:26
    For example,
    notice that we have a green or
  • 1:26 - 1:29
    two x overdraw occurring in
    Chatum's background right here?
  • 1:29 - 1:30
    Now why could this be?
  • 1:30 - 1:33
    Well it turns out that Chatum's
    base activity uses a frame layout
  • 1:33 - 1:37
    with an opaque white background
    that fills the entire screen.
  • 1:37 - 1:40
    We like this, but it collides with
    Android's material theme defaults,
  • 1:40 - 1:43
    particularly the window
    background drawable.
  • 1:43 - 1:45
    This causes unnecessary overdraw.
  • 1:45 - 1:49
    Now as a developer,
    we have a design decision to make.
  • 1:49 - 1:51
    Let's say we want to keep
    our white background,
  • 1:51 - 1:54
    which means there's no real purpose for
    the material's theme.
  • 1:55 - 1:58
    So one optimization we can make
    here is to set our activity's
  • 1:58 - 2:00
    background drawable to null.
  • 2:00 - 2:02
    Now, let me show you how
    you can do this in code.
  • 2:02 - 2:07
    In Chatum's base activity,
    let's look at the onCreate method.
  • 2:07 - 2:09
    Use the following statement
    to nullify the background.
  • 2:11 - 2:12
    All right, sweet.
  • 2:12 - 2:15
    By nullifying the background we've
    reduced this overdraw from a green to
  • 2:15 - 2:19
    a blue, effectively making
    the overdraw now one x.
  • 2:19 - 2:20
    Nice.
  • 2:21 - 2:23
    Now this was a programmatic change.
  • 2:23 - 2:27
    But lets take a look at our XML markup
    to see if we can tweak anything else.
  • 2:27 - 2:31
    Now, you probably already noticed that
    there are three XML files that specify
  • 2:31 - 2:32
    Chatum's user interface.
  • 2:33 - 2:37
    There's the base activity
    Chatum Latinum, the XML for
  • 2:37 - 2:42
    our chat fragment, and then lastly,
    the individual XML for our chat items.
  • 2:45 - 2:47
    As mentioned before,
  • 2:47 - 2:49
    we intentionally want to keep
    this white background right here.
  • 2:50 - 2:52
    So, let's not remove anything.
  • 2:52 - 2:56
    But maybe there's some opportunity for
    tweaks in the remaining two XML files.
  • 2:56 - 2:57
    This is where I could use your help.
  • 2:59 - 3:01
    Do me a favor and
    comb the remaining XML files, and
  • 3:01 - 3:05
    see if you can remove any
    unnecessary backgrounds declared.
  • 3:05 - 3:06
    When you're finished,
  • 3:06 - 3:08
    enter the number of backgrounds
    you've removed in this box here.
  • 3:10 - 3:12
    If you're having trouble,
    no need to worry.
  • 3:12 - 3:13
    Just move on to the solution.
Title:
Visualize and Fix Overdraw - Quiz
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
ud825 - Android Performance
Duration:
03:14

English subtitles

Revisions Compare revisions