Merge "Revert "docs: APP Introduction and Rendering content"" into mnc-docs

      "training/testing/performance.html"

    ]

  },

  "app/landing/videos": {

    "title": "",

    "resources": [

       "https://www.youtube.com/watch?v=CaMTIgxCSqU",

       "https://www.youtube.com/watch?v=OrLEoIsMIAc",

       "https://www.youtube.com/watch?v=bSOREVMEFnM"

    ]

  },

}

page.title=Gather, Insight, Action

meta.tags="android, performance", "app"

page.tags="app"

page.article=true

@jd:body

<style>

  .app-icon {

      height: 64px;

  }

  .app-icon-small {

      height: 32px;

  }

  .app-icon-inline {

      height: 16px;

  }

</style>

<p>Your app has a performance problem if it does not instantly respond

to a user action, stutters, or makes the user wait at any point.

This lesson introduces the most basic performance test for your app,

and a process for iteratively finding and fixing performance problems. </p>

<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_gather.png">

    Litmus test your app</h2>

  <p>To find out whether your app has performance issues, you don't need fancy

  tools. </p>

  <p>Do the following:</p>

  <ol>

    <li>Install your app on the lowest-end device that your target audience might have.</li>

    <li>Use your app as a user would, and keep detailed notes on even the smallest wait, stutter,

    or unresponsiveness. Watch out for increasing slowness over time.</li>

    <li>Hand the device to a friend and take notes while they are using it.</li>

    <li>If you would like feedback from a larger audience, consider running a mini-usability test,

    such as described in

    <a href="https://www.youtube.com/watch?v=0YL0xoSmyZI">

        Guerilla Testing with Usability Cafe</a>.</li>

    <iframe width="448" height="252"

    src="//www.youtube.com/embed/0YL0xoSmyZI?autohide=1&showinfo=0"

    frameborder="0" allowfullscreen=""

    style="float:none; margin: 0 0 20px 20px;"></iframe>

  </ol>

<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">

    Approach performance problems methodically</h2>

  <p><b>If these hands-on tests didn't reveal any performance problems,</b></p>

  <ul>

    <li>you could do nothing further, or</li>

    <li>you can dive deeper and make your app perform even better. This could benefit users with

    slower connections or on simpler devices, and increase your potential audience.</li>

  </ul>

  <p><b>If you gathered any notes related to performance, then performance is a problem for your

  app.</b></p>

  <p>Once you have subjectively established that your app could benefit from performance tuning, we

  have two recommendations for an objective and systematic approach to finding and fixing

  performance problems faster.</p>

  <h3>1. Use performance profiling tools</h3>

  <p>Android and Android Studio come with many

  <a href="http://developer.android.com/tools/performance/index.html">

      performance profiling tools</a>

  to help you

  identify performance problems and track down where they are in your code. And after you have

  changed your code, run the tools again to measure the impact of your change. Compare results to

  make sure you've fixed the right problem, and find out whether you need to

  make additional performance improvements.</p>

  <p>To learn more about why you should use tools, see

  <a href="https://www.youtube.com/watch?v=SA4j6KKjMRk">Tools Not Rules</a>.</p>

  <iframe width="448" height="252"

    src="//www.youtube.com/embed/SA4j6KKjMRk?autohide=1&showinfo=0"

    frameborder="0" allowfullscreen=""

    style="float:none; margin: 0 0 20px 20px;"></iframe>

  <h3>2. Follow the Performance Tuning Lifecycle</h3>

  <p>When optimizing your application, you must be able to measure its state, make changes, and

  then evaluate the performance differences of these changes. Thus, the Performance Tuning

  Lifecycle is built around the concept of "What you can measure, you can

  optimize".</p>

  <p>The Performance Tuning Lifecycle (Figure 1), consists of three phases:

  gather information, gain insight, and take action.</p>

  <div class="figure" style="">

    <img src="{@docRoot}images/training/app/gather_insight_action.png"

         alt=""

         height=""/>

    <p class="img-caption">

      <strong>Figure 1. </strong>The Performance Tuning Lifecycle.

    </p>

  </div>

  <p><b>

  <img class="app-icon-small" src="{@docRoot}images/training/app/app_icon_gather.png">

  Gather Information.</b> <br>

  Use the

  <a href="http://developer.android.com/tools/performance/index.html">

      performance profiling tools</a>

     to capture data

  about your app. Since most tools are specialized, you may need to run several tools.</p>

  <p><b>

  <img class="app-icon-small" src="{@docRoot}images/training/app/app_icon_insight.png">

  Gain Insight.</b><br>

   Take the time to understand what your gathered data means for your app.

  You may need to go through several iterations of gathering information and gaining insight to

  pinpoint what the problem (or problems!) is.</p>

  <p><b>

  <img class="app-icon-small" src="{@docRoot}images/training/app/app_icon_action.png">

  Take Action.</b><br>

  Take all the information and all the insights, and determine and evaluate

  different ways to solve your problem. Taking action can take different forms, and what you decide

  to do depends on your situation and context, which may also include coding resources, budgets,

  and deadlines.</p>

  <p>And once you've taken action, verify that your changes had the desired

  outcome:</p>

  <p>

  <img class="app-icon-inline" src="{@docRoot}images/training/app/app_icon_gather.png">

  Gather a second set of data.

  <img class="app-icon-inline" src="{@docRoot}images/training/app/app_icon_insight.png">

  Compare it to your original data.

  <img class="app-icon-inline" src="{@docRoot}images/training/app/app_icon_action.png">

  Make more changes...

  and repeat this process until your app consistently responds smoothly to all user actions, never

  stutters, and never makes the user wait. On all target devices.</p>

  <p>To learn more, see

  <a href="https://youtu.be/_kKTGK-Cb_4">The Performance Tuning Lifecycle</a>.</p>

  <iframe width="448" height="252"

    src="//www.youtube.com/embed/_kKTGK-Cb_4?autohide=1&showinfo=0"

    frameborder="0" allowfullscreen=""

    style="float:none; margin: 0 0 20px 20px;"></iframe>

<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">

    Start improving performance</h2>

  <ul>

    <li>If your notes include problems with the speed or smoothness of animations, or the app does

    not consistently respond to user input, start with

    <a href="{@docRoot}training/app/rendering/index.html">

    Optimizing Rendering Performance</a>.</li>

    <li>If your app uses the GPS or mobile radio, or makes a lot of networking calls, check

        out: <a href="{@docRoot}training/app/battery/index.html">

        Optimizing Battery Performance</a>.</li>

  </ul>

fullpage=true

page.title=Android Performance Patterns

page.viewport_width=970

meta.tags="android, performance", "app",

page.tags="app"

section.landing=true

header.hide=1

carousel=1

tabbedList=1

excludeFromSuggestions=true

@jd:body

<section class="dac-expand dac-hero dac-section-light">

  <div class="wrap">

    <div class="cols dac-hero-content">

      <div class="col-1of2 col-push-1of2 dac-hero-figure">

        <img class="dac-hero-image" src="{@docRoot}images/training/app/madscientist.png" />

      </div>

      <div class="col-1of2 col-pull-1of2">

        <h1 class="dac-hero-title">Android Performance Patterns</h1>

        <p class="dac-hero-description">

        Everything you need to know about improving your app’s performance. </p>

        </p>

        <a class="dac-hero-cta" href="{@docRoot}training/app/approach.html">

          <span class="dac-sprite dac-auto-chevron"></span>

          Test you app's performance

        </a><br>

        <a class="dac-hero-cta" href="{@docRoot}training/app/rendering/index.html">

          <span class="dac-sprite dac-auto-chevron"></span>

          Improve rendering performance

        </a><br>

        <a class="dac-hero-cta" href="{@docRoot}training/app/battery/index.html">

          <span class="dac-sprite dac-auto-chevron"></span>

          Improve battery utilization

        </a><br>

      </div>

    </div>

</section>

<section class="dac-section dac-section-light">

  <div class="wrap">

      <p>This series of lessons teaches you how to improve the performance of your

      Android applications using a workflow of gathering data, analyzing the data, and

      taking action based on your insights.</p><br>

page.tags=app

      <h2>Performance actions</h2>

      <dl>

        <dt>

          <strong><a href="{@docRoot}training/app/approach.html">

              Test Your App's Performance</a></strong>

        </dt>

        <dd>

          Learn how to test your app for performance problems. No tools required.<br>

          Then find out how you can methodically address performance issues

          following the Performance Improvement Lifecycle.

        </dd>

        <dt>

          <strong><a href="{@docRoot}training/app/rendering/index.html">

            Optimizing Rendering Performance</a></strong>

        </dt>

        <dd>

          Learn how to improve the performance of everything related to drawing

          and animating the screen. </a></strong>

        </dd>

         <dt>

          <strong><a href="{@docRoot}training/app/battery/index.html">

            Optimizing Battery Utilization</a></strong>

        </dt>

        <dd>

          Learn how to efficiently use limited battery resources for

          networking requests. </a></strong>

        </dd>

      </dl><br>

      <h2>Resources</h2>

      <dl>

        <dt>

          <strong><a href="https://plus.sandbox.google.com/communities/116342551728637785407">

            Android Performance G+ Community</a></strong>

          </dt>

          <dd>

            Join our G+ community for more information, tips and support. It's all about

            Performance!

            <br><b>#perfmatters</b>.

          </dd>

          <dt>

          <strong><a href="https://www.udacity.com/course/android-performance--ud825">

            Android Performance Course on Udacity</a></strong>

          </dt>

          <dd>

            Dive deeply into Android Performance with this from-the-ground-up course.

          </dd>

          <dt>

          <strong><a href="https://www.youtube.com/playlist?list=PLOU2XLYxmsIKEOXh5TwZEv89aofHzNCiu">Android

          Performance Patterns on YouTube</a></strong>

          </dt>

          <dd>

            Watch the whole series of Android Performance Patterns videos.

          </dd>

        </dl>

       <br>

     </div></section>

@jd:body

page.title=Simplify Complex View Hierarchies

meta.tags="android, performance", "app",

page.tags="app"

page.article=true

@jd:body

<style>

  .app-icon {

      height: 64px;

  }

</style>

<p>At the heart of your app is the hierarchy of views that makes up the user interface and the

  visual experience of users. With feature-rich apps, this hierarchy grows large and complex and

  can become a source of performance problems. The most likely symptom you will see is a generic

  general slowness of the app, especially when rendering complex views to the screen.</p>

  <p>Simplifying or rearranging the view hierarchy of your app can improve performance, especially

  on lower-end devices and earlier versions of Android. As an added benefit, your app will become

  easier to maintain overall.</p>

  <p>Analyzing the view hierarchy is an example of using several tools together to pinpoint and fix

  performance problems. It is also an example of eliminating another inefficiency first, so that

  your data becomes more precise.</p>

<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_gather.png">

    Analyze the view hierarchy</h2>

  <p>If you have not done so already, reduce overdraw by removing unnecessary backgrounds. This

  will remove a common source of overdraw that is not related to your view hierarchy. See

  <a href="{@docRoot}training/app/rendering/overdraw.html">

    Visualizing and Reducing Overdraw</a>.</p>

  <ol>

    <li><b>Run the Show GPU View Updates tool</b> on your mobile device. In <b>Developer

    Options</b>, scroll to <b>Hardware accelerated rendering</b> and turn on <b>Show GPU view

    updates</b>.</li>

    <li>Interact with your app.</li>

    <li>Views on the screen that are updated will flash red. If you

    notice that parts of your screen are flashing, and they have nothing to do with the area that's

    being updated, there may be a connection in the view hierarchy that's causing them to be

    invalidated improperly. As such, you can focus your efforts on these areas to find problems

    faster.</li>

    <li><b>Run the

      <a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">

          Profile GPU Rendering tool</a>

    and look at the blue segments of

    the bars.</b> If the blue segments are tall and causing the bars to cross the 16

    milliseconds-per-frame line,

    your app spends a lot of time updating display lists. The M release of Android adds additional

    color segments, and the Measure/Layout segment may also be larger than expected. One reason for

    this can be view hierarchies that are unnecessarily complex. See also

    <a href="{@docRoot}training/app/rendering/profile-gpu.html">

        Improving GPU Rendering Performance</a>.</li>

    <li><b>Start the

    <a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">

        Hierarchy Viewer tool</a>.</b></li>

    <li>Find the areas of the view hierarchy where you still see a lot of overdraw in your app.

    Consider whether restructuring your views could reduce overdraw.</li>

    <li>Identify areas where your view hierarchy is complex, and consider how you could simplify

    it.</li>

    <li>Profile the view hierarchy from Hierarchy Viewer to confirm or identify additional

    potential problem spots. See

    <a href="{@docRoot}tools/performance/hierarchy-viewer/profiling.html">

        Profiling with Hierarchy Viewer</a>.</li>

  </ul>

<h2><img class="app-icon" src="{@docRoot}images/training/app/app_icon_insight.png">

    Possible optimizations</h2>

  <p>Hierarchy Viewer can help identify these specific issues that are directly related to the

  structure of the view hierarchy.</p>

  <ul>

    <li>Views that do not contribute to the final image. See

    <a href="#remove">Remove extraneous views</a>

    .</li>

    <li>Deep view hierarchies of nested views. Jump to

    <a href="#nested">Simplify nested layouts</a>

    .</li>

    <li>Large number of simple views. Check out

    <a href="#reduce">Reduce the number of views</a>

    .</li>

    <li>Nested layouts that trigger multiple layout passes. Got to

    <a href="#flatten"> Flatten the view hierarchy</a>

    .</li>

  </ul>

  <p>Minimizing these issues can improve performance, especially on older devices. For your own

  benefit, these simplifications will make your code easier to maintain and profile in the

  future.</p>

<h2 id="remove"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">

    Remove extraneous views</h2>

  <p>Remove views that do not contribute to the final image.<p>

  <p>To identify views that do not contribute to the final image on the screen:</p>

  <ol>

    <li>In Hierarchy Viewer, walk through the hierarchy starting from the leaves towards the

    root.</li>

    <li>Click each node to see how the screen looks at that node. Alternatively, look at the Layout

    View window to see how views are layering themselves.</li>

    <li>If a view that was previously visible becomes fully hidden, then you may not need that view

    at all, as shown in Figure 1.</li>

  </ol>

  <div>

    <img src="{@docRoot}images/training/app/remove_hidden_views.png"

         alt=""

         height="" />

    <p class="img-caption">

      <strong>Figure 1. </strong>Views 2 and 3 are fully obscured and can be safely removed.

    </p>

  </div>

  <p>Eliminate from your code the views that are completely covered, never displayed, or outside

  the screen.</p>

<h2 id="nested"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">

    Simplify nested layouts</h2>

  <p>Simplify nested layouts that trigger multiple layout passes.</p>

  <p>Some layout containers, such a RelativeLayout, require two layout passes in order to finalize

  the positions of their child views. As a result, their children also require two layout passes.

  When you nest these types of layout containers, the number of layout passes increases

  exponentially with each level of the hierarchy.</p>

  <p>For example, a view inside a grid view inside a list view inside a relative layout could get

  laid out 8 times(!) as shown in Figure 2.</p>

  <div>

    <img src="{@docRoot}images/training/app/layout_pass_multiplication.png"

         alt=""

         height="" />

    <p class="img-caption">

      <strong>Figure 2. </strong>Example of layout pass multiplication.

    </p>

  </div>

  <p><b>Watch out for the following containers and conditions:</b></p>

  <ul>

    <li><a href="http://developer.android.com/reference/android/widget/RelativeLayout.html">

        RelativeLayout</a></li>

    <li><a href="http://developer.android.com/reference/android/widget/LinearLayout.html">

        LinearLayouts</a>

        that also use the <code>measureWithLargestChild</code> layout weight</li>

    <li><a href="http://developer.android.com/reference/android/widget/GridView.html">

    GridViews</a> that also use gravity.</li>

    <li>Custom containers that are subclasses of the above.</li>

    <li>Some uses of weights in layouts can also trigger multiple layout passes.</li>

  </ul>

  <p><b>Using any of these containers as</b></p>

  <ul>

    <li>the root of a complex view hierarchy,</li>

    <li>the parent of a deep subtree,</li>

    <li>or using many of them in your layout,</li>

  </ul>

  <p>can result in noticeable performance penalties.</p>

  <p>For more information, see

  <a href="https://www.youtube.com/watch?v=dB3_vgS-Uqo">Double Layout Taxation</a>.</p>

    <iframe width="448" height="252"

    src="//www.youtube.com/embed/dB3_vgS-Uqo?autohide=1&showinfo=0"

    frameborder="0" allowfullscreen=""

    style="float:none; margin: 0 0 20px 20px;"></iframe>

  <p>Consider whether you can achieve the same layout using a container configuration that does not

  result in these exponential numbers of layout passes. For example:</p>

  <ul>

    <li>Replace a RelativeLayout with a GridView (without gravity) as your root view.</li>

  </ul>

  <p>In addition, you can apply all the techniques mentioned in this document to simplify the view

  hierarchy.</p>

  <ul>

    <li>Reduce the number of layouts by eliminating or combining views. See

    <a href="#remove">

        Remove Views that do not Contribute to the Final Image</a>

    and

    <a href="#reduce">

        Reduce the Number of Views</a>.

    </li>

    <li>Eliminate overlapping views where possible.</li>

    <li>Flatten the view hierarchy by choosing different layouts. See

    <a href="#flatten">Flatten the View Hierarchy</a>

    </li>

    <li>Redesign your app's user interface to use fewer views.</li>

  </ul>

  <p>For more tips, see

  <a href="http://developer.android.com/training/improving-layouts/optimizing-layout.html">

      Optimizing Layout Hierarchies</a>.</p>

<h2 id="reduce"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">

    Reduce the number of views</h2>

  <p>If your user interface has many simple views, you may be able to combine some of them without

  diminishing the user experience, as shown in Figure 3.</p>

<div>

    <img src="{@docRoot}images/training/app/combine_views.png"

         alt=""

         height="" />

    <p class="img-caption">

      <strong>Figure 3. </strong>Example of combining views.

    </p>

  </div>

  <p>Both the changes below may affect how you present information to the user and will include

  design trade-offs. Remember that performance is more important than anything else for your

  app's success, and opt for simplicity wherever you can.</p>

  <ul>

    <li>Reduce the number of views by combining them into fewer views. For example, you can combine

    text views if you reduce the number of fonts and styles.</li>

    <li>Redesign your app's user interface to use fewer views.</li>

  </ul>

<h2 id="flatten"><img class="app-icon" src="{@docRoot}images/training/app/app_icon_action.png">

    Flatten the view hierarchy</h2>

  <p>Does your view hierarchy have parts that look like the nested arrangement on the left of

  Figure 4?</p>

<div>

    <img src="{@docRoot}images/training/app/flatten_view_hierarchy.png"

         alt=""

         height="" />

    <p class="img-caption">

      <strong>Figure 4. </strong>This deep view hierarchy can be flattened to improve performance.

    </p>

  </div>

  <p>Flatten the view hierarchy by replacing nested linear layouts with relative layouts wherever

  possible. See

  <a href="http://developer.android.com/training/improving-layouts/optimizing-layout.html">

      Optimizing Layout Hierarchies</a>.</p>

<h2>Example of simplifying a view hierarchy</h2>

  <p>Watch a screencast which shows how to apply all these techniques to simplify a view

  hierarchy. See

  <a href="https://www.youtube.com/watch?v=-FUw8HMbmBQ&amp">

      Optimizing Layouts with Hierarchy Viewer</a>.</p>

<h2>Advanced analysis</h2>

  <p>Use the

  <a href="http://developer.android.com/tools/debugging/improving-w-lint.html">Lint tool</a>

  on your layout files to search for possible view hierarchy optimizations. See

  <a href="http://developer.android.com/training/improving-layouts/optimizing-layout.html#Lint">

      Optimizing Layout Hierarchies: Use Lint</a>.</p>