Merge "docs: Add peformance tools getting started docs in new tools/performance subtree." into lmp-docs

docs/html/jd_collections.js

@@ -1281,5 +1281,38 @@ var RESOURCE_COLLECTIONS = {
       "training/enterprise/work-policy-ctrl.html",
       "samples/BasicManagedProfile/index.html"
     ]
+  },
+  "tools/performance/rendering": {
+    "title": "",
+    "resources": [
+       "tools/performance/debug-gpu-overdraw/index.html",
+       "tools/performance/profile-gpu-rendering/index.html",
+       "tools/performance/hierarchy-viewer/setup.html",
+       "tools/performance/hierarchy-viewer/index.html",
+       "tools/performance/hierarchy-viewer/profiling.html"
+    ]
+  },
+  "tools/performance/memory": {
+    "title": "",
+    "resources": [
+       "tools/performance/memory-monitor/index.html",
+       "tools/performance/heap-viewer/index.html",
+       "tools/performance/allocation-tracker/index.html",
+       "tools/performance/comparison.html"
+    ]
+  },
+  "tools/performance/cpu": {
+    "title": "",
+    "resources": [
+       "tools/performance/traceview/index.html",
+       "tools/performance/systrace/index.html"
+    ]
+  },
+  "tools/performance/battery": {
+    "title": "",
+    "resources": [
+       "tools/performance/batterystats-battery-historian/index.html",
+       "tools/performance/batterystats-battery-historian/charts.html"
+    ]
   }
 }

docs/html/tools/performance/allocation-tracker/index.jd

@@ -0,0 +1,148 @@
+page.title=Allocation Tracker Walkthrough
+meta.tags="android, performance, profiling, tools, memoryleaks, memoryheap"
+page.tags="android", "performance", "profiling", "tools", "memoryleaks", "memoryheap"
+page.metaDescription=Record you app's memory allocations with their call stack to identify code that allocates and frees objects unnecessarily.
+page.image=tools/performance/thumbnails/tools_allocation_tracker.png
+page.article=true
+
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#WorkingWithAllocationTracker">Working with Allocation Tracker</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/heap-viewer/index.html">
+    Heap Viewer Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/memory-monitor/index.html">
+    Memory Monitor Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/comparison.html">
+    Comparison: Memory Monitor, Heap Viewer, Allocation Tracker</a>
+  <li><a href="{@docRoot}tools/performance/traceview/index.html">
+    Traceview Walkthrough</a></li>
+</ul>
+
+</div>
+
+
+  <p>This walkthrough shows the basic usage and workflow for the Allocation Tracker tool in Android
+  Studio. Allocation Tracker records an app's memory allocations and lists all
+  allocated objects for the profiling cycle with their call stack, size, and allocating code.</p>
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Identifying where many similar object types, from roughly the same call stack, are
+    allocated and deallocated over a very short period of time.</li>
+
+    <li>Finding the places in your code that may contribute to inefficient memory use.</li>
+  </ul>
+
+  <p>Before using Allocation Tracker, profile your code with the
+  <a href="{@docRoot}tools/performance/memory-monitor/index.html">Memory
+  Monitor Tool</a>. If you see many garbage collection events in a short amount of time, use
+  <a href="{@docRoot}tools/performance/heap-viewer/index.html">Heap
+  Viewer</a> to identify candidate object types, and Allocation Tracker to determine where this is
+  happening in your code.</p>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>A mobile device with <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    enabled.</li>
+
+    <li>Application code. Use your own code, or the <a href=
+    "https://github.com/udacity/Sunshine-Version-2">Sunshine</a> sample app from the <a href=
+    "https://www.udacity.com/course/ud853">Android Fundamentals Udacity course</a>.</li>
+  </ul>
+
+  <h2 id="WorkingWithAllocationTracker">Working with Allocation Tracker</h2>
+
+  <p>Allocation Tracker records each memory allocation that your app performs during the profiling
+  cycle. You tell Allocation Tracker to start recording and it logs allocations
+  until you tell it to stop.</p>
+
+<hr>
+<ul class="no-bullet">
+<!-- this also hides bullet, by default outside box -->
+ <li><div style="overflow:hidden">
+  <ol class="padded">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/allocation-tracker/gettingstarted_image01.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Steps for starting Allocation Tracker.
+      </p>
+    </div>
+
+    <li>Connect your mobile device to your computer.</li>
+
+    <li>Open your application in Android Studio, build the source, and run it on your device.</li>
+
+    <li>Click the <b>Android</b> button at the bottom of your Android Studio window.</li>
+
+    <li>Click the RECORD button
+        <img src="{@docRoot}images/tools/performance/allocation-tracker/gettingstarted_image02.png">
+        (Start Allocation Tracking tooltip).</li>
+
+    <li>Interact with your application.</li>
+
+    <li>Click the (same) STOP button (Stop Allocation Tracking tooltip).</li>
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="7">
+
+  <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/allocation-tracker/gettingstarted_image03.png"
+         alt=""
+         width="440px" />
+      <p class="img-caption">
+        <strong>Figure 2. </strong>Example of Allocation Tracker output.
+      </p>
+    </div>
+
+    <li>After a few seconds, a pane with your recorded data opens.
+
+    <p>Note that allocations are logged on
+      the device, and the data file is transferred to the host computer, parsed for information, and
+      displayed.</p></li>
+
+    <li>The pane populates with a table.
+
+    <ul>
+      <li>Each row represents a memory allocation event.</li>
+
+      <li>Each column represents information about the allocation, such as the object type,
+      the thread, and its size. </li>
+
+      <li>The columns are movable, resizable, and sortable.</li>
+    </ul>
+
+    <p>Use the Filter to show only allocations from your app.</li>
+
+    <li>Click on an object to see its full stack trace.</li>
+  </ol>
+</div></li>
+</ul>

docs/html/tools/performance/batterystats-battery-historian/charts.jd

@@ -0,0 +1,124 @@
+page.title=Battery Historian Charts
+meta.tags="android, performance, profiling, tools, battery, historian, batterydrain
+page.tags="android", performance", "profiling", "tools", "battery", "historian" "batterydrain"
+page.metaDescription=Examine and interpret the collected battery usage data in your browser.
+page.image=tools/performance/thumbnails/tools_battery_historian.png
+page.article=true
+
+@jd:body
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#BatteryHistorianCharts">Battery Historian Charts</a></li>
+  <li><a href="#FilteringBatterystats">Filtering batterystats output</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/batterystats-battery-historian/index.html">
+    Batterystats &amp; Battery Historian Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/systrace/index.html">
+    Systrace Walkthrough</a></li>
+</ul>
+
+</div>
+
+
+  <p id="BatteryHistorianCharts">
+    The Battery Historian chart graphs power-relevant events over time.</p>
+
+  <p>Each row shows a colored bar segment when a system component is active
+   and thus drawing current from the battery. The chart does <i>not</i> show <i>how much</i> battery was used by the
+  component, only that the app was active. Charts are organized by category.</p>
+
+  <div class="figure" style="">
+  <img src="{@docRoot}images/tools/performance/batterystats-battery-historian/gettingstarted_image02.png"
+         alt=""
+         height="" />
+    <p class="img-caption">
+      <strong>Figure 1. </strong>Example of Battery Historian output.
+    </p>
+  </div>
+
+  <h3>Battery usage categories</h3>
+
+  <ul>
+    <li><b>battery_level</b>: When the battery level was recorded and logged.
+    Reported in percent, where 093 is 93%. Provides an overall measure of how fast the battery
+    is draining.</li>
+
+    <li><b>top</b>: The application running at the top; usually, the application that is visible to
+    the user. If you want to measure battery drain while your app is active, make sure
+    it's the top app. If you want to measure battery drain while your app is in
+    the background, make sure it's <i>not</i> the top app.</li>
+
+    <li><b>wifi_running</b>: Shows that the Wi-Fi network connection was active.</li>
+
+    <li><b>screen</b>: Screen is turned on.</li>
+
+    <li><b>phone_in_call</b>: Recorded when the phone is in a call.</li>
+
+    <li><b>wake_lock</b>: App wakes up, grabs a lock, does small work, then goes back to sleep.
+    This is one of the most important pieces of information. Waking up the phone is expensive, so
+    if you see lots of short bars here, that might be a problem.</li>
+
+    <li><b>running</b>: Shows when the CPU is awake. Check whether it is awake and asleep
+      when you expect it to be.</li>
+
+    <li><b>wake_reason</b>: The last thing that caused the kernel to wake up. If
+    it's your app, determine whether it was necessary.</li>
+
+    <li><b>mobile_radio</b>: Shows when the radio was on. Starting the radio is battery expensive.
+    Many narrow bars close to each other can indicate opportunities for
+    batching and other optimizations.</li>
+
+    <li><b>gps</b>: Indicates when the GPS was on. Make sure this is what you expect.</li>
+
+    <li><b>sync:</b> Shows when an app was syncing with a backend. The sync bar also shows which
+    app did the syncing. For users, this can show apps where they might turn syncing off to save
+    battery. Developers should sync as little as possible and only as often as necessary.</li>
+  </ul>
+
+
+  <p class="note"><strong>Note:</strong>
+    Not every chart will show every category.</p>
+
+  <h2 id="FilteringBatterystats">Filtering batterystats output</h2>
+
+  <p>You can gather additional information from the <code>batterystats.txt</code> file
+    where you saved the output from the batterystats command.</p>
+
+  <div class="figure" style="">
+<img src="{@docRoot}images/tools/performance/batterystats-battery-historian/gettingstarted_image03.png"
+         alt=""
+         width="340px" />
+    <p class="img-caption">
+      <strong>Figure 2.</strong>Example of filtered batterystats output.
+    </p>
+  </div>
+
+  <p>Open the file in a text editor and search for:</p>
+
+  <ol>
+    <li><b><code>Battery History</code></b>: A time series of power-relevant events, such as
+    screen, Wi-Fi, and app launch. These are also visible through Battery Historian.</li>
+
+    <li><b><code>Per-PID Stats</code></b>: How long each process ran.</li>
+
+    <li><b><code>Statistics since last charge</code></b>: System-wide statistics, such as
+    cell signal levels and screen brightness. Provides an overall picture of what's happening
+    with the device. This information is especially useful
+    to make sure no external events are affecting your experiment.</li>
+
+    <li><b><code>Estimated power use (mAh)</code></b> by UID and peripheral: This is currently an
+    extremely rough estimate and should not be considered experiment data.</li>
+
+    <li><b><code>Per-app mobile ms per packet</code></b>: Radio-awake-time divided by packets sent.
+    An efficient app will transfer all its traffic in batches, so the lower this number the
+    better.</li>
+
+    <li><b><code>All partial wake locks</code></b>: All app-held wakelocks, by aggregate
+    duration and count.</li>
+  </ol>

docs/html/tools/performance/batterystats-battery-historian/index.jd

@@ -0,0 +1,129 @@
+page.title=Batterystats & Battery Historian Walkthrough
+meta.tags="android, performance, profiling, tools, battery, batterystats, historian, batterydrain
+page.tags="android", "performance", "profiling", "tools", "battery", "batterystats", "historian", "batterydrain"
+page.metaDescription=Collect battery usage data from your device and display it graphically in your browser.
+page.image=tools/performance/thumbnails/tools_battery_historian.png
+page.article=true
+
+
+@jd:body
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/batterystats-battery-historian/charts.html">
+    Battery Historian Charts</a></li>
+  <li><a href="{@docRoot}tools/performance/systrace/index.html">
+    Systrace Walkthrough</a></li>
+</ul>
+
+</div>
+
+  <p>This walkthrough shows the basic usage and workflow for the Batterystats tool and the Battery
+  Historian script.</p>
+
+  <p>Batterystats collects battery data from your device, and Battery Historian converts that data
+  into an HTML visualization that you can view in your Browser. Batterystats is part of the Android
+  framework, and Battery Historian is open-sourced and available on GitHub at <a href=
+  "https://github.com/google/battery-historian">https://github.com/google/battery-historian</a>.</p>
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Showing you where and how processes are drawing current from the battery.</li>
+
+    <li>Identifying tasks in your app that could be deferred or even removed to improve battery
+    life.</li>
+  </ul>
+
+  <h2>Prerequisites</h2>
+
+  <ul>
+    <li>A mobile device with <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    enabled running Android 5.0 or higher.</li>
+  </ul>
+
+  <h2>Working with Batterystats &amp; Battery Historian</h2>
+
+  <div class="sidebox-wrapper" style="width:400px;">
+      <div class="sidebox" style="width:350px;">
+        <h2>Summary</h2>
+          <code>
+            <p><b>https://github.com/google/battery-historian</b></p>
+            <p>&gt; adb kill-server</p>
+            <p>&gt; adb devices</p>
+            <p>&gt; adb shell dumpsys batterystats --reset</p>
+            <p>&lt;disconnect and play with app&gt;...&lt;reconnect&gt;</p>
+            <p>&gt; adb devices</p>
+            <p>&gt;adb shell dumpsys batterystats &gt; batterystats.txt</p>
+            <p>&gt; python historian.py batterystats.txt &gt; batterystats.html</p>
+          </code>
+      </div>
+  </div>
+
+  <ol>
+
+    <li>Download the open-source Battery Historion Python script from GitHub (<a href=
+    "https://github.com/google/battery-historian">https://github.com/google/battery-historian</a>).
+    </li>
+
+    <li>Unzip the file to extract the Battery Historian folder. Inside the folder,
+      find the <code>historian.py</code> file
+      and move it to the Desktop or another <em>writable</em> directory.</li>
+
+    <li>Connect your mobile device to your computer.</li>
+
+    <li>On your computer, open a Terminal window.</li>
+
+    <li>Change to the directory where you've saved <code>historian.py</code>,
+      <br>for example:
+      <code>cd ~/Desktop</code></li>
+
+    <li>Shut down your running adb server.
+      <br><code>&gt; adb kill-server</code></li>
+
+    <li>Restart adb and check for connected devices.
+      <br><code>&gt; adb devices</code>
+      <br><img src="{@docRoot}images/tools/performance/batterystats-battery-historian/gettingstarted_image01.png">
+      <br>If you don't see any devices, make sure your phone is connected, and USB Debugging
+      is turned on, and then kill and restart adb.</li>
+
+    <li>Reset battery data gathering.
+      <br><code>&gt; adb shell dumpsys batterystats --reset</code>
+      <p>Resetting erases old battery collection data; otherewise, the output will be huge.</p>
+    </li>
+
+    <li>Disconnect your device from your computer so that you are only drawing current from the
+    device's battery.</li>
+
+    <li>Play with your app for a short time.</li>
+
+    <li>Reconnect your phone.</li>
+
+    <li>Make sure your phone is recognized: <code>&gt; adb devices</code></li>
+
+    <li>Dump all battery data. This can take a while:
+      <br><code>&gt; adb shell dumpsys batterystats &gt; batterystats.txt</code></li>
+
+    <li>Create a HTML version of the data dump for Battery Historian:
+       <br><code>&gt; python historian.py batterystats.txt &gt; batterystats.html</code></li>
+
+    <li>Open the <code>batterystats.htm</code> file in your browser.</li>
+
+    <li>Continue with <a href="{@docRoot}tools/performance/batterystats-battery-historian/charts.html">
+        Battery Historian Charts</a>.
+    </li>
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/batterystats-battery-historian/gettingstarted_image02.png"
+         alt=""
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Battery Historian output.
+      </p>
+    </div>
+  </ol>
+
+
+

docs/html/tools/performance/comparison.jd

@@ -0,0 +1,133 @@
+page.title=Memory Profilers
+meta.tags="android, performance, profiling, tools, memory, memoryleaks, garbagecollection"
+page.tags="android", "performance", "profiling", "tools", "memory", "memoryleaks", "garbagecollection"
+page.metaDescription=Heap Viewer, Memory Monitor, and Allocation Tracker are complementary tools that visualize the memory your app uses.
+page.image=tools/performance/thumbnails/tools_memory_monitor.png
+page.article=true
+
+@jd:body
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#MemoryMonitor">Memory Monitor</a></li>
+  <li><a href="#HeapViewer">Heap Viewer</a></li>
+  <li><a href="#AllocationTracker">Allocation Tracker</a></li>
+
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/memory-monitor/index.html">
+    Memory Monitor Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/heap-viewer/index.html">
+    Heap Viewer Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/allocation-tracker/index.html">
+    Allocation Tracker Walkthrough</a></li>
+</ul>
+
+</div>
+
+  <p>Heap Viewer, Memory Monitor, and Allocation Tracker are complementary tools that visualize the
+  memory your app uses.</p>
+
+  <ol>
+    <li>Use the
+    <a href="{@docRoot}tools/performance/memory-monitor/index.html">
+    Memory Monitor Tool</a> to find out whether undesirable garbage collection (GC) event patterns might
+    be causing your performance problems.</li>
+
+    <li>Run
+    <a href="{@docRoot}tools/performance/heap-viewer/index.html">
+    Heap Viewer</a> to identify object types that get or stay allocated
+    unexpectedely or unecessarily.</li>
+
+    <li>Use
+    <a href="{@docRoot}tools/performance/allocation-tracker/index.html">
+    Allocation Tracker</a> to identify where in your code the problem might be.</li>
+  </ol>
+
+  <h2 id="MemoryMonitor">Memory Monitor</h2>
+
+<div>
+  <div class="figure" style="">
+    <img src="{@docRoot}images/tools/performance/compare_MemoryMonitor.png"
+         alt=""
+         height="" />
+    <p class="img-caption">
+      <strong>Figure 1. </strong>Memory Monitor.
+    </p>
+  </div>
+
+  <ul>
+    <li>Shows available and used memory as they both change over time <i>for your app</i> in a
+    graph, with dips indicating Garbage Collection (GC) events.</li>
+
+    <li>Provides a quick way to test whether app slowness might be related
+    to excessive GC events.</li>
+
+    <li>Provides a quick way to see whether app crashes might be related
+    to running out of memory.</li>
+
+    <li>Runs live on your application and updates about once a second.</li>
+
+    <li>Helps quickly identify the potential of memory leaks.</li>
+
+    <li>Helps identify GC patterns for your application and determine whether
+      they are healthy and what you expect.</li>
+
+    <li>Is easy to use, and it is easy to interpret what you see.</li>
+
+    <li>However, Memory Monitor does not tell you which objects are the cause
+      of your problems, or where in your code it might be.</li>
+  </ul>
+
+    <h2 id="HeapViewer">Heap Viewer</h2>
+
+  <div class="figure" style="">
+    <img src="{@docRoot}images/tools/performance/compare_HeapViewer.png"
+         alt=""
+         height="" />
+    <p class="img-caption">
+      <strong>Figure 2. </strong>Heap Viewer.
+    </p>
+  </div>
+
+  <ul>
+    <li>Shows snapshots of a number of objects allocated by type.</li>
+
+    <li>Samples data every time a garbage collection event occurs
+      naturally or triggered by you.</li>
+
+    <li>Helps identify which object types might be involved in memory leaks.</li>
+
+    <li>However, you have to look for changes over time yourself by tracking what's
+    happening in the graph.</li>
+    <br><br><br><br>
+  </ul>
+
+    <h2 id="AllocationTracker">Allocation Tracker</h2>
+
+  <div class="figure" style="">
+    <img src="{@docRoot}images/tools/performance/compare_AllocationTracker.png"
+         alt=""ge
+         height="" />
+    <p class="img-caption">
+      <strong>Figure 3. </strong>Allocation Tracker.
+    </p>
+  </div>
+
+  <ul>
+    <li>Shows when and where your code allocates object types, their size, allocating thread, and
+    stack traces.</li>
+
+    <li>Helps recognize memory churn through recurring allocation/deallocation patterns.</li>
+
+    <li>Can be used in combination with Heap Viewer to track down memory leaks. For example, if you
+    see a bitmap object resident on the heap, you can find its allocation location with Allocation
+    Tracker.</li>
+
+    <li>However, it takes time and experience to learn to interpret the output from this tool.</li>
+
+  </ul>

docs/html/tools/performance/debug-gpu-overdraw/index.jd

@@ -0,0 +1,156 @@
+page.title=Debug GPU Overdraw Walkthrough
+meta.tags="android, performance, profiling, tools, rendering, overdraw"
+page.tags="android", "performance", "profiling", "tools",  "rendering", "overdraw"
+page.metaDescription=Use color-coding to show how many times each pixel is redrawn on the screen to reduce rendering overhead.
+page.image=tools/performance/thumbnails/tools_debug_gpu_overdraw.png
+page.article=true
+
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#VisualizingOverdraw">Visualizing Overdraw</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">
+    Profile GPU Rendering Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">
+    Hierarchy Viewer Walkthrough</a></li>
+</ul>
+
+</div>
+
+  <p>This walkthrough shows how to visualize overdraw on your mobile device by color-coding
+  interface elements based on how often they are drawn underneath.</p>
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Showing where an app might be doing more rendering work than necessary.</li>
+
+    <li>Helping you see where you might be able to reduce rendering overhead.</li>
+  </ul>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>A mobile device with <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    enabled.</li>
+  </ul>
+
+
+  <h2 id="VisualizingOverdraw">Visualizing Overdraw on your Mobile Device</h2>
+
+  <ul class="no-bullet">
+  <!-- this also hides bullet, by default outside box -->
+  <li><div style="overflow:hidden">
+  <ol class="padded">
+
+    <div class="figure" style="">
+      <img
+    src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image01.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Steps for turning on Debug GPU Overdraw.
+      </p>
+    </div>
+
+    <li>On your mobile device, go to <b>Settings</b> and tap <b>Developer Options</b>.</li>
+
+    <li>In the <em>Hardware accelerated rendering</em> section,
+      select <b>Debug GPU Overdraw</b>.</li>
+
+    <li>In the <b>Debug GPU overdraw</b> popup, select <b>Show overdraw areas</b>.</li>
+ </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="5">
+
+     <div class="figure" style="padding-right:100px">
+      <img
+    src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image02.png"
+         alt=""
+         width="180px" />
+      <p class="img-caption">
+        <strong>Figure 2. </strong>Example of<br>Debug GPU Overdraw output.
+      </p>
+    </div>
+
+    <li>Don't panic as your screen turns into a delirium of colors.
+      The coloring is provided to help you diagnose your app's display behavior.</li>
+
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+ <ol class="padded" start="6">
+
+     <div class="figure" style="">
+      <img
+    src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image03.png"
+         alt=""
+         width="300px" />
+      <p class="img-caption">
+        <strong>Figure 3. </strong>Color key for Debug GPU Overdraw output.
+      </p>
+    </div>
+
+    <br><br>
+    <li>The colors are hinting at the amount of overdraw on your screen for each pixel, as
+      follows:
+
+      <ul>
+        <li><b>True color:</b> No overdraw</li>
+        <li><b>Blue:</b> Overdrawn once</li>
+        <li><b>Green:</b> Overdrawn twice</li>
+        <li><b>Pink:</b> Overdrawn three times</li>
+        <li><b>Red:</b> Overdrawn four or more times</li>
+      </ul>
+    </li>
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+ <ol class="padded" start="7">
+
+    <div class="figure" style="">
+      <img
+    src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image04.png"
+         alt=""
+         width="300px" />
+      <p class="img-caption">
+        <strong>Figure 4. </strong>Examples of undesirable and desirable
+          <br>Debug GPU Overdraw output.
+      </p>
+    </div>
+
+    <br><br><br>
+    <li>Some overdraw is unavoidable. As you are tuning your app's
+      user interface, the goal is to arrive at a visualization that shows mostly true
+      colors and 1X overdraw in blue.</li>
+
+  </ol>
+</div></li>
+</ul>

docs/html/tools/performance/heap-viewer/index.jd

@@ -0,0 +1,177 @@
+page.title=Heap Viewer Walkthrough
+meta.tags="android, performance, profiling, tools, memory, memoryleaks, memoryheap"
+page.tags="android", "performance", "profiling", "tools", "memory", "memoryleaks", "memoryheap"
+page.metaDescription=Report in real-time how many objects of what types and sizes your application is allocating and find memory leaks.
+page.image=tools/performance/thumbnails/tools_heap_viewer.png
+page.article=true
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#WorkingWithHeapViewer">Working with Heap Viewer</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/memory-monitor/index.html">
+    Memory Monitor Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/allocation-tracker/index.html">
+    Allocation Tracker Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/comparison.html">
+    Comparison: Memory Monitor, Heap Viewer, Allocation Tracker</a>
+  <li><a href="{@docRoot}tools/performance/traceview/index.html">
+    Traceview Walkthrough</a></li>
+</ul>
+
+</div>
+
+
+  <p>This walkthrough shows the basic usage and workflow for the Heap Viewer tool. Heap Viewer
+  reports in real-time what <i>types</i> of objects your application has allocated, how many, and
+  their sizes on the heap.</p>
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Getting a sense of how your app allocates and frees memory.</li>
+
+    <li>Identifying memory leaks.</li>
+  </ul>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>A mobile device running Android 5.0 or higher with <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    enabled.</li>
+
+    <li>Application code. Use your own code, or the <a href=
+    "https://github.com/udacity/Sunshine-Version-2">Sunshine</a> sample app from the <a href=
+    "https://www.udacity.com/course/ud853">Android Fundamentals Udacity course</a>.</li>
+  </ul>
+
+  <h2 id="WorkingWithHeapViewer">Working with Heap Viewer</h2>
+
+  <ul class="no-bullet">
+  <!-- this also hides bullet, by default outside box -->
+  <li><div style="overflow:hidden">
+  <ol class="padded">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/heap-viewer/gettingstarted_image01.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Starting Android Device Monitor.
+      </p>
+    </div>
+
+    <li>Connect your mobile device to your computer.</li>
+
+    <li>Open your application in Android Studio, build the source, and run it on your device.</li>
+
+    <li>Start the Android Device Monitor from Android Studio: <b>Tools -&gt; Android -&gt; Android
+    Device</b> <b>Monitor</b>.
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="4">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/heap-viewer/gettingstarted_image02.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 2. </strong>Steps for Using Heap Viewer.
+      </p>
+    </div>
+
+    <li>Make sure your device and application are showing in the <b>Devices</b> tab.</li>
+
+    <li>Click the <b>DDMS</b> button, because the Heap Viewer is one of the DDMS tools.</li>
+
+    <li>Click the <b>Heap</b> tab, which is where your data will appear.</li>
+
+    <li>In the <b>Devices</b> tab, select the app you want to monitor.</li>
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="8">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/heap-viewer/gettingstarted_image03.png"
+         alt=""
+         width="300px"  />
+      <p class="img-caption">
+        <strong>Figure 3. </strong>Update Heap button.
+      </p>
+    </div>
+
+    <li>To start monitoring, click the Update Heap button, which looks like a green can.</li>
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="9">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/heap-viewer/gettingstarted_image04.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 4. </strong>Triggering GC (Garbage Collection).
+      </p>
+    </div>
+
+    <li>Note the <em>Heap updates will happen
+      after every GC for this client.</em> message.</li>
+
+    <li>Press the <strong>Cause CG</strong> button to
+      trigger a garbage collection event.
+    </li>
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="11">
+
+   <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/heap-viewer/gettingstarted_image05.png"
+         alt=""
+         width="480px" />
+      <p class="img-caption">
+        <strong>Figure 5. </strong>Example Heap Viewer output.
+      </p>
+    </div>
+
+    <li>Click a data type to see detailed information on its current allocations on the
+      heap.</li>
+
+ </ol>
+</div></li>
+
+  <p class="note"><b>Note:</b> To visualize allocation changes over time, combine
+    several snapshots of the bar graph into an animated gif or video.</p>
+ </ul>

docs/html/tools/performance/hierarchy-viewer/index.jd

@@ -0,0 +1,330 @@
+page.title=Hierarchy Viewer Walkthrough
+meta.tags="android, performance, profiling, tools, rendering, hierarchyviewer"
+page.tags="android", "performance", "profiling", "tools", "rendering", "hierarchyviewer"
+page.metaDescription=Visualize your app's view hierarchy to help you simplify your layouts.
+page.image=tools/performance/thumbnails/tools_hierarchy_viewer.png
+page.article=true
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#WorkingWithHierarchyViewer">Working with Hierarchy Viewer</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html">
+    Device Setup for Hierarchy Viewer</a></li>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/profiling.html">
+    Profiling with Hierarchy Viewer</a></li>
+  <li><a href=
+    "http://developer.android.com/tools/debugging/debugging-ui.html#viewhierarchy">Hierarchy Viewer
+    </a></li>
+  <li><a href="/guide/topics/ui/overview.html#Layout">View Hierarchies</a></li>
+  <li><a href="{@docRoot}tools/performance/importing-legacy-apps.html">
+    Importing Legacy Apps into Android Studio<a></li>
+  <li><a href="{@docRoot}tools/device.html">Using Hardware Devices</a></li>
+</ul>
+
+</div>
+
+  <p>This walkthrough shows the basic usage and workflow for the Hierarchy Viewer tool.</p>
+
+  <p>The Hierarchy Viewer tool visualizes your app's <a href=
+  "http://developer.android.com/guide/topics/ui/overview.html#Layout">view hierarchy</a> and
+  profiles the relative rendering speed for each view.
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Simplifying your view hierarchy to reduce overdraw, and make it easier to manage.</li>
+
+    <li>Finding potential rendering performance bottlenecks related to the structure and shape of your
+    view hierarchy.</li>
+  </ul>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>A mobile device set up to work with Hierarchy Viewer:</li>
+
+    <li style="list-style: none; display: inline">
+      <ol>
+        <li>You must have <a href=
+        "http://developer.android.com/tools/device.html#developer-device-options">Developer
+        Options</a> enabled on your mobile device. You must use a physical device to get
+        accurate measurements.</li>
+
+        <li>Set an {@code ANDROID_HVPROTO} environment variable on the desktop machine
+          that is connected to your device. For more information, see
+          <a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html">Device Setup for Hierarchy Viewer</a>.</li>
+      </ol>
+    </li>
+
+    <li>Debuggable app code with a view hierarchy. Use your own code, or the code for the <a href=
+    "https://github.com/udacity/Sunshine-Version-2">Sunshine</a> sample app from the <a href=
+    "https://www.udacity.com/course/ud853">Android Fundamentals Udacity course</a>.</li>
+  </ul>
+
+  <h2 id="WorkingWithHierarchyViewer">Working with Hierarchy Viewer</h2>
+
+<ul class="no-bullet">
+<!-- this also hides bullet, by default outside box -->
+ <li><div style="overflow:hidden">
+  <ol class="padded">
+
+     <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image001.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Starting Android Device Monitor.
+      </p>
+    </div>
+
+    <li>Connect your mobile device to your computer.</li>
+
+    <li>Open your application in Android Studio, build the source, and run it on your device.</li>
+
+    <li>From Android Studio, start the Android Device Monitor: <b>Tools &gt; Android &gt;
+    Android Device Monitor</b>.</li>
+
+    <li>Allow <b>USB Debugging</b> on your phone (if asked).</li>
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="6">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image005.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 2. </strong>Android Device Monitor.
+      </p>
+    </div>
+
+    <li>Figure 2 illustrates what is initially shown in the Device Monitor tool. This varies
+      depending on your setup.
+      <p>Make sure your device
+      and the package for your application are showing in the Devices (DDMS mode) or Windows
+      (Hierarchy Viewer mode) tab. You can choose <b>Window &gt; Reset Perspective</b> to get
+      back to the default arrangement.</p>
+      <p>If the app does not appear, make sure you
+      followed the <a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html"> device
+      setup instructions</a>, then start over at step 1.</p></li>
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="7">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image002.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 3. </strong>Changing Perspective to Hierarchy Viewer.
+     </p>
+    </div>
+
+    <li>In Android Device Monitor (ADM), in the menu bar, choose <b>Window &gt; Open
+    Perspective</b>, and in the popup click <b>Hierarchy View</b>.<br>
+
+    <p>OR</p>
+    <p> Click the <b>Hierarchy View</b> button if it's already visible.<br>
+    <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image003.png">
+    </p></li>
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="9">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image006.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 4. </strong>Hierarchy Viewer layout.
+     </p>
+    </div>
+
+    <li>If not already open, the Hierarchy View panes open.<br>
+      The example screen in Figure&nbsp;4 shows an example of these panes.</li>
+
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="10">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image004.png"
+         alt=""
+         width="240px" />
+      <p class="img-caption">
+        <strong>Figure 5. </strong>Resetting the Perspective.
+      </p>
+    </div>
+
+    <li>If you see a different window arrangement, in Android Device Manager, use
+    <b>Window &gt; Reset Perspective</b> to return to the default layout for this tutorial.
+
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="11">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image007.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 6. </strong>Populated Hierarchy Viewer.
+      </p>
+    </div>
+
+    <li>Double-click your application in the Windows tab. This populates the panes with the
+      view hierarchy of your application.
+      This display is a static representation of the complete view hierarchy defined for the
+      app.</li>
+
+    <li>You can adjust the sizes of the panes and ADM will preserve your
+      arrangement in future sessions.</li>
+
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="13">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image008.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+      <strong>Figure 7. </strong>Hierarchy Viewer panes.
+      </p>
+    </div>
+
+    <li>If necessary, click the <b>Layout View</b> tab to hide the Console and show a wireframe of
+    your layout. The outline of the currently selected view is red. Click an outline to select
+    it.</li>
+
+    <li>The rest of the panes:
+
+      <ul>
+        <li>The <b>Tree Overview</b> in the upper right gives you a bird's-eye view of your
+        app's complete <a href=
+        "http://developer.android.com/guide/topics/ui/overview.html#Layout">View</a> <a href=
+        "http://developer.android.com/guide/topics/ui/overview.html#Layout">Hierarchy</a>.</li>
+
+        <li>In the <b>Tree Overview</b>, move the gray viewport rectangle to change what section of
+        your hierarchy shows in the <b>Tree View</b> pane (in the center).</li>
+
+        <li>In the <b>Tree View</b>, you can drag and zoom the tree using your mouse.</li>
+      </ul>
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="15">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image009.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 7. </strong>Parts of the View node display.
+      </p>
+    </div>
+
+    <li>Click on a View node to display details. Here is an annotated close-up of a node
+      and its details.</li>
+
+
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="16">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image010.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 8. </strong>Location of View Properties tab.
+      </p>
+    </div>
+
+    <li>Click the <b>View Properties</b> tab at the top right (next to the Windows tab) to see
+        properties of the selected View node.</li>
+
+   </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="17">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image011.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 9. </strong>Rendering a view in a popup.
+      </p>
+    </div>
+
+    <li>Double-click a View node in the Tree View to render it in a popup window.</li>
+
+  </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="18">
+
+  <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image012.png"
+         alt=""
+         width="240px" />
+      <p class="img-caption">
+        <strong>Figure 10. </strong>Node with its type and id.
+      </p>
+    </div>
+
+    <li>Nodes in the Tree View show a Type, which indicates the View class,
+      and an id, which is the view identifier in your code.</li>
+
+  </ol>
+</div></li>
+</ul>

docs/html/tools/performance/hierarchy-viewer/profiling.jd

@@ -0,0 +1,169 @@
+page.title=Profiling with Hierarchy Viewer
+meta.tags="android, performance, profiling, tools, rendering, hierarchyviewer
+page.tags="android", "performance", "profiling", "tools", "rendering", "hierarchyviewer"
+page.metaDescription=Profile the relative rendering speed for each view.
+page.image=tools/performance/thumbnails/tools_hierarchy_viewer_profiling.png
+page.article=true
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#ProfilingWithHierarchyViewer">Profiling with Hierarchy Viewer</a></li>
+  <li><a href="#InterpretingResults">Interpreting Profiling Results</a></li>
+
+</ul>
+</div>
+
+<p>This walkthrough shows you how to profile your app's view hiearchy with
+  Hierarchy Viewer, and how to interpret the results.</p>
+
+<h2 id="WhatYouNeed">Prerequisites</h2>
+
+<ul>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html">
+    Device Setup for Hierarchy Viewer</a></li>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">
+    Hierarchy Viewer Walkthrough</a></li>
+</ul>
+
+<h2 id="ProfilingWithHierarchyViewer">Profiling Steps</h2>
+
+<ul class="no-bullet">
+<!-- this also hides bullet, by default outside box -->
+ <li><div style="overflow:hidden">
+
+  <ol class="padded">
+
+  <div class="figure" style="">
+<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image014.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>View hierarchy after profiling.
+      </p>
+    </div>
+
+    <li>Start Hierarchy Viewer for your app.</li>
+
+    <li>In the <b>Tree View</b> or the <b>Layout View</b>, click on the View node whose
+      children you want to profile.</li>
+
+    <li>To start profiling, click the small button with three circles
+<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image013.png">
+      at the top of the Tree View.
+
+    </li>
+
+    <li>For large view hierarchies, profiling may take a few seconds.</li>
+
+    <li>Each view in your subtree gets three dots, which can be green, yellow, or red.
+
+      <ul>
+        <li>The left dot represents the Draw Process of the rendering pipeline.</li>
+        <li>The middle dot represents the Layout Phase.</li>
+        <li>The right dot represents the Execute Phase.</li>
+      </ul>
+    </li>
+
+</ol></div>
+
+</li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="5">
+
+    <div class="figure" style="">
+<img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image015.png"
+         alt=""
+         width="240px" />
+      <p class="img-caption">
+        <strong>Figure 2. </strong>How the colored dots relate<br>to the rendering pipeline.
+      </p>
+    </div>
+
+    <li>These dots roughly correspond to the Measure,
+     Layout, and Draw
+      phases of the processing pipeline.</li>
+
+    <li>The color of the dots indicates the relative performance
+      of this node in respect to all other profiled nodes.
+
+      <ul>
+        <li><strong>Green</strong> means the view renders faster than at least
+          half of the other views.</li>
+
+        <li><strong>Yellow</strong> means the view renders faster than the bottom
+          half of the other views.</li>
+
+        <li><strong>Red</strong> means the view is among the slowest
+         half of views.</li>
+      </ul>
+    </li>
+
+    </ol>
+</div></li>
+</ul>
+
+  <h2 id="InterpretingResults">Interpreting Hierarchy Viewer Profiling Results</h2>
+
+    <p>Hierarchy Viewer measures the <em>relative performance</em> of a
+      node</b>, so there are always red nodes in a profile, and it
+      doesn't necessarily mean that view is too slow for the users of
+      your app.</p>
+
+    <p>Hierarchy Viewer software rasterizes your Activity to acquire the timing
+      information. Rasterization is the process of taking a high-level primitive, such as a
+      circle or a vector font, and turning it into pixels on the screen. Typically,
+      rasterization is done by the GPU on your device, but in the case of
+      software rasterization, rendering is done on the CPU with
+      ordinary software. This means that the absolute
+      reported timings are correct relative to each other, but are bloated and vary
+      depending on the overall and changing CPU workload on your device and PC. Profile
+      several times to get a feel for the average measurements.</p>
+
+    <p>The following are guidelines for interpreting Hierarchy Viewer profiling output.</p>
+
+    <p>A red node is a potential problem in any situation where your app has
+      unexpectedly slow performance. In a relative setting, there is always a
+      slowest node; make sure it is the node you expect.
+      The following examples illustrate how to interpret red dots.</p>
+
+      <ul>
+        <li>Look for red dots in leaf nodes or view groups with only a few children. This
+          might point to a problem. Your app may not be slow, or it may not be slow on your
+          device, but you need to be aware of why that dot is red.
+          <a href="{@docRoot}tools/performance/systrace/index.html"> Systrace</a> or
+          <a href="{@docRoot}tools/performance/traceview/index.html"> Traceview</a>
+          can give you additional information. </li>
+
+        <li>If you have a view group with many children and a red measure phase, take a
+          look at the children to see how they are performing.</li>
+
+        <li>A view with yellow or even red dots might not be performing slowly on the
+          device. That's where the actual numbers are helpful.
+          <a href="{@docRoot}tools/performance/systrace/index.html"> Systrace</a> or
+          <a href="{@docRoot}tools/performance/traceview/index.html"> Traceview</a>
+          can give you additional information.</li>
+
+        <li>If the root view of a hierarchy has a red measure phase, red layout phase, and
+          yellow draw phase, this is somewhat typical, because it's the
+          parent of all the other views.</li>
+
+        <li>If a leaf node in a tree with 20+ views has a red draw phase, this <i>is</i> a
+          problem. Check your OnDraw method for code that shouldn't be
+          there.</li>
+       </ul>

docs/html/tools/performance/hierarchy-viewer/setup.jd

@@ -0,0 +1,89 @@
+page.title=Device Setup for Hierarchy Viewer
+meta.tags="android, performance, profiling, tools, rendering, hierarchyviewer"
+page.tags="android", "performance", "profiling", "tools", "rendering", "hierarchyviewer"
+page.metaDescription=Set up your mobile device to work with Hierarchy Viewer.
+page.image=tools/performance/thumbnails/tools_hierarchy_viewer.png
+page.article=true
+
+@jd:body
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">
+    Hierarchy Viewer Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/profiling.html">
+    Profiling with Hierarchy Viewer</a></li>
+</ul>
+
+</div>
+
+    <p>To run Hierarchy Viewer, you must enable Developer Options on your mobile device and perform
+      some setup on your computer.</p>
+
+    <h2>Configuring Devices</h2>
+
+    <ol>
+      <li><p>Enable <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    on your mobile device.</p></li>
+
+    <li>Depending on the type of device you have, do one of the following:
+      <ul>
+        <li>If you have a locked device running Android 4.0 or lower, follow the instructions
+          for <a href=
+               "https://github.com/romainguy/ViewServer">installing and configuring ViewServer</a>.
+        </li>
+        <li>If you have an unlocked device running Android 4.0 or lower,
+          no further configuration is needed.</li>
+        <li>If you have a device running Android 4.1 or higher, you must set an environment
+          variable on your development machine. For more information,
+          see <a href="#hvproto-variable">Setting the ANDROID_HVPROTO variable</a>
+      </ul>
+    </li>
+    </ol>
+
+
+    <h2 id="hvproto-variable">Setting the ANDROID_HVPROTO variable</h2>
+
+    <h3>Windows</h3>
+
+    <ol>
+      <li>Click <b>My Computer &gt; Property &gt; Advanced &gt; Environment Variables.</b></li>
+
+      <li>Click <b>New.</b></li>
+
+      <li>In variables name put: <code>ANDROID_HVPROTO</code></li>
+
+      <li>In variable value put: <code>ddm</code></li>
+
+      <li>Click <b>OK</b><./li>
+    </ol>
+
+    <h3>Mac</h3>
+
+    <ol>
+      <li>Edit <code>~/.bash_profile</code></li>
+
+      <li>Add:
+        <br><code>#Hierarchy Viewer Variable
+        <br>export ANDROID_HVPROTO=ddm</code>
+      </li>
+
+      <li><code>source ~/.bash_profile</code></li>
+    </ol>
+
+    <h3>Linux</h3>
+
+    <ol>
+      <li>Edit <code>~/.bash_profile</code></li>
+
+      <li>Add:
+
+        <br><code>#Hierarchy Viewer Variable
+        <br>export ANDROID_HVPROTO=ddm</code>
+      </li>
+
+    <li><code>source ~/.bash_profile</code></li>
+  </ol>

docs/html/tools/performance/importing-legacy-apps.jd

@@ -0,0 +1,149 @@
+page.title=Importing Legacy Apps into Android Studio
+meta.tags="android, performance, profiling, tools"
+page.tags="android", "performance", "profiling", "tools"
+page.metaDescription=Required changes when importing legacy apps into Android Studio.
+page.article=true
+
+@jd:body
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#StepsForImporting">Steps for Importing</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="/tools/device.html">Using Hardware Devices</a></li>
+  <li><a href="/tools/help/index.html">Tools</a></li>
+</ul>
+
+</div>
+
+
+  <p>Importing some pre-Android-1.0 projects into Android 1.0 or newer can trigger a series of
+  errors. This document shows you how to resolve them, using a version of the Sunshine app used in
+  the <a href="https://www.udacity.com/course/ud853">Android Fundamentals Udacity Course</a> as an
+  example.</p>
+
+  <p><b>CAVEAT:</b> As with all documentation of this kind, the details are likely to vary for each
+  application and each update of Android Studio.</p>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>The latest version of <a href="http://developer.android.com/sdk/index.html">Android
+    Studio</a> (this document uses version 1.1).</li>
+
+    <li>It helps to know how to <a href="https://developer.android.com/training/index.html">build
+    and run apps from Android Studio</a> on your device.</li>
+
+    <li>To use Sunshine, you need to download code from <a href=
+    "https://github.com/">github.com</a>. More info at <a href=
+    "https://help.github.com/">help.github.com</a>.</li>
+  </ul>
+
+  <h2 id="StepsForImporting">Steps for Importing Sunshine into Android Studio 1.1.0</h2>
+
+  <ol>
+    <li>Download Sunshine ZIP from GitHub: <a href=
+    "https://github.com/udacity/sunshine/tree/6.10-update-map-intent">https://github.com/udacity/sunshine/tree/6.10-update-map-intent</a>.
+    (If you are having any problems with Android Studio or the app, use the following version, or
+    your own app, to follow along with the example.<a href=
+    "https://github.com/udacity/sunshine/tree/3.13-add-share-action-provider">https://github.com/udacity/sunshine/tree/3.13-add-share-action-provider</a>)
+
+    <li>Unzip the application to extract the code folder.</li>
+
+    <li>Start Android Studio. (This works best if you close all projects, then restart.)</li>
+
+    <li>Click <b>Import</b> <b>project (Eclipse ADT, Gradle, etc.)</b>.
+      <br><img src="{@docRoot}images/tools/performance/import_image001.png">
+    </li>
+
+    <li>In the popup, find and select the Sunshine-6-10-updated-map-intent folder and click
+      <b>OK</b>.
+      <br><img src="{@docRoot}images/tools/performance/import_image002.png">
+    </li>
+
+    <li>If prompted, choose a destination folder for your project. If prompted to choose a build
+    system, choose Gradle. (These prompts vary, depending on your project and Android Studio
+    version.) If you need more guidance, see this <a href=
+    "http://www.lynda.com/articles/eclipse-into-android-studio">Lynda tutorial</a>.</li>
+
+    <li>Wait for the import to complete. If you see no errors, you are now ready to work with your
+    app.
+
+    <p><b>If you get a Gradle error:</b></p>
+
+    <li>If you get a Gradle error, you have some extra work to do.(Because the Import
+    didn&#40t finish, at this point, you may only see the <b>Gradle
+    Scripts</b> directory in your Project view.)</li>
+
+    <li>You may see the link <b>Install missing platform(s) and sync
+    project</b>, or a link to install missing build tools.
+    Click whatever link and
+    proceed.</li>
+
+    <li>The next time through, your build will fail with:
+      <br><img src="{@docRoot}images/tools/performance/import_image003.png">
+    </li>
+
+    <li>Click the <b>Fix plugin version and re-import project</b> link
+    in the error message. This will rebuild the app and present you with new of errors.
+      <br><img src="{@docRoot}images/tools/performance/import_image004.png">
+    </li>
+
+    <li>Click the <b>Gradle Settings</b> link in the error message.</li>
+
+    <li>Check the <b>Use auto-import</b> and click <b>OK</b>.
+      <br><img src="{@docRoot}images/tools/performance/import_image005.png">
+    </li>
+
+    <li>Expand the project hierarchy and find the <b>build.gradle file</b>.The file you are looking
+      for is not the one showing at the top level, but the one inside <b>Sunshine</b> <b>&gt;</b>
+      <b>app &gt; build.gradle</b>, as shown below.
+      <br><img src="{@docRoot}images/tools/performance/import_image006.png">
+   </li>
+
+    <li>Double-click the <code>build.gradle</code> file.</li>
+
+    <li>Make the following changes to the file:</li>
+      <ul>
+        <li>Set <code>compileSdkVersion 21</code></li>
+
+        <li>Set <code>targetSdkVersion 21</code></li>
+
+        <li>Replace <code>runProguard</code> with <code>minifyEnabled</code></li>
+      </ul>
+
+      <p>Your file should look like this: </p>
+        <img src="{@docRoot}images/tools/performance/import_image007.png">
+    </li>
+
+    <li>Save (Ctrl-S).</li>
+
+  <p>For the following two messages (Steps 18/19), what you see might vary. You might see either
+  message or both messages in sequence. Click the appropriate links to continue until the Language
+  Level Changed dialog opens.</p>
+
+    <li>In the code view bar, click the <b>Try again</b> link.
+      <br><img src="{@docRoot}images/tools/performance/import_image008.png">
+    </li>
+
+    <li>If you see these warnings, click the <b>Sync now</b> link.
+      <br><img src="{@docRoot}images/tools/performance/import_image009.png">
+    </li>
+
+    <li>In the Language Level Changed dialog, click <b>Yes</b>. And if you get the Gradle Running
+      dialog, <b>Yes</b> again.
+      <br><img src="{@docRoot}images/tools/performance/import_image010.png">
+    </li>
+
+    <li>After the project reloads, run the app on your device. (If it crashes the first time, try
+    again, and it will run.)
+    <br><img src="{@docRoot}images/tools/performance/import_image011.png">
+    </li>
+  </ol>
+

docs/html/tools/performance/index.jd

@@ -0,0 +1,73 @@
+page.title=Performance Profiling Tools
+meta.tags="android, develop, performance, profiling, tools, gather"
+page.tags="android", "develop", "performance", "profiling", "tools" "gather"
+page.metaDescription=Android Studio profiling tools for evaluating your app's performance.
+page.article=true
+
+@jd:body
+
+  <p>Putting pixels on the screen involves four primary pieces of hardware.
+  To greatly simplify, the CPU computes display lists, the GPU renders images to
+  the display, the memory stores images and data, and the battery provides
+  electrical power. Each of these pieces of hardware has constraints; pushing
+  or exceeding those constraints causes your app to be slow, have
+  bad display performance, or exhaust the battery.
+
+  <p>To discover what causes your specific performance problems, you need to
+  take a look under the hood, use tools to collect data about your app's
+  execution behavior, surface that data as lists and
+  graphics, understand and analyze what you see, and improve your code.</p>
+
+  <p>Android Studio and your device provide profiling tools to record and
+  visualize the rendering, compute, memory, and battery performance of your
+  app.</p>
+
+<h2 id="rendering-tools">Rendering Analysis Tools</h2>
+
+<p>Visualize the rendering behavior and performance of your app.</p>
+
+<div class="dynamic-grid">
+  <div class="resource-widget resource-flow-layout landing col-12"
+    data-query="collection:tools/performance/rendering"
+    data-cardSizes="9x3"
+    data-maxResults="6">
+  </div>
+</div>
+
+<h2 id="memory-tools">Memory Analysis Tools</h2>
+
+<p>Visualize the memory behavior and performance of your app.</p>
+
+<div class="dynamic-grid">
+  <div class="resource-widget resource-flow-layout landing col-12"
+    data-query="collection:tools/performance/memory"
+    data-cardSizes="9x3"
+    data-maxResults="6">
+  </div>
+</div>
+
+<h2 id="cpu-tools">Compute Analysis Tools</h2>
+
+<p>Visualize the CPU behavior and performance of your app.</p>
+
+<div class="dynamic-grid">
+  <div class="resource-widget resource-flow-layout landing col-12"
+    data-query="collection:tools/performance/cpu"
+    data-cardSizes="9x3"
+    data-maxResults="4">
+  </div>
+</div>
+
+<h2 id="battery-tools">Battery Analysis Tools</h2>
+
+<p>Visualize the battery behavior and performance of your app.</p>
+
+<div class="dynamic-grid">
+  <div class="resource-widget resource-flow-layout landing col-12"
+    data-query="collection:tools/performance/battery"
+    data-cardSizes="9x3"
+    data-maxResults="4">
+  </div>
+</div>
+
+

docs/html/tools/performance/memory-monitor/index.jd

@@ -0,0 +1,172 @@
+page.title=Memory Monitor Walkthrough
+meta.tags="android, performance, profiling, tools, memory, memoryleaks, garbagecollection, memorymonitor"
+page.tags="android", "performance", "profiling", "tools", "memory", "memoryleaks", "garbagecollection", "memorymonitor"
+page.metaDescription=Graph memory usage and garbage collection events for your app in real-time.
+page.image=tools/performance/thumbnails/tools_memory_monitor.png
+page.article=true
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#WorkingWithMemoryMonitor">Working with Memory Monitor</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/heap-viewer/index.html">
+    Heap Viewer Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/allocation-tracker/index.html">
+    Allocation Tracker Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/comparison.html">
+    Comparison: Memory Monitor, Heap Viewer, Allocation Tracker</a>
+  <li><a href="{@docRoot}tools/performance/traceview/index.html">
+    Traceview Walkthrough</a></li>
+</ul>
+
+</div>
+
+
+  <p>This walkthrough shows the basic usage and workflow for the Memory Monitor tool in Android
+  Studio. Memory Monitor reports in real-time how your app allocates memory.</p>
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Showing available and used memory in a graph, and garbage collection events over time.</li>
+
+    <li>Quickly testing whether app slowness might be related
+    to excessive garbage collection events.</li>
+
+    <li>Quickly testing whether app crashes may be related to running out of
+    memory.</li>
+  </ul>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>A mobile device with <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    enabled.</li>
+
+    <li>An Application with USB Debugging enabled. Use your own, or the <a href=
+    "https://github.com/udacity/Sunshine-Version-2">Sunshine</a> sample app from the <a href=
+    "https://www.udacity.com/course/ud853">Android Fundamentals Udacity course</a>.</li>
+  </ul>
+
+  <h2 id="WorkingWithMemoryMonitor">Working with Memory Monitor</h2>
+
+ <ul class="no-bullet">
+<!-- this also hides bullet, by default outside box -->
+ <li><div style="overflow:hidden">
+  <ol class="padded">
+
+    <div class="figure" style="">
+  <img src="{@docRoot}images/tools/performance/memory-monitor/gettingstarted_image001.png"
+         alt=""
+         width="300px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Starting Memory Monitor.
+      </p>
+    </div>
+
+    <li>Connect your mobile device to your computer.</li>
+
+    <li>Open your application in Android Studio, build the source,
+      and run it on your device.</li></li>
+
+    <li>In Android Studio, choose <b>Tools &gt; Android &gt; Memory Monitor.</b></li>
+
+ </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="4">
+
+    <div class="figure" style="">
+  <img src="{@docRoot}images/tools/performance/memory-monitor/gettingstarted_image002.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 2. </strong>Choosing the device and Activity to monitor.
+      </p>
+    </div>
+
+    <li>This opens the Memory Monitor pane.</li>
+
+    <li>Choose your device from the drop-down menu at the top left of the pane.</li>
+
+    <li>Choose your Activity from the drop-down menu at the top right of the pane.</li>
+
+ </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="7">
+
+    <div class="figure" style="">
+  <img src="{@docRoot}images/tools/performance/memory-monitor/gettingstarted_image003.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 3. </strong>Allocated and free memory in Memory Monitor.
+      </p>
+    </div>
+
+    <li>Once Memory Monitor starts tracking your device, a stacked graph appears,
+      tracking memory usage over time.
+
+      <p>Dark blue: Amount of memory that your app
+      is currently using.</p>
+
+      <p>Light blue: Available, unallocated memory.</p>
+    </li>
+
+    <li>Over time, this graph updates, showing changes in memory usage.</li>
+
+    <li>As your app allocates and frees memory, the allocated amount shown in the
+      graph changes.</li>
+
+    <li>When you see the allocated memory drop by a large amount, a garbage
+      collection (GC) event has occurred.</li>
+
+ </ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="11">
+
+    <div class="figure" style="">
+  <img src="{@docRoot}images/tools/performance/memory-monitor/gettingstarted_image005.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 4. </strong>Forcing a GC (Garbage Collection) event.
+      </p>
+    </div>
+
+    <li>You can force a garbage collection event by clicking on the garbage truck
+      icon
+<img src="{@docRoot}images/tools/performance/memory-monitor/gettingstarted_image004.png">.
+    </li>
+
+ </ol>
+</div></li>
+</ul>
+
+

docs/html/tools/performance/profile-gpu-rendering/index.jd

@@ -0,0 +1,181 @@
+page.title=Profiling GPU Rendering Walkthrough
+meta.tags="android, performance, profiling, tools, rendering, gpu"
+page.tags="android", "performance", "profiling", "tools", "rendering", "gpu"
+page.metaDescription=Overlay a graph on your device, showing how long it takes to render UI elements relative to the 16-ms-per-frame benchmark.
+page.image=tools/performance/thumbnails/tools_profile_gpu_rendering.png
+page.article=true
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#ProfileGPURendering">Profile GPU Rendering</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/debug-gpu-overdraw/index.html">
+    Debug GPU Overdraw Walkthrough</a></li>
+  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">
+    Hierarchy Viewer Walkthrough</a></li>
+</ul>
+
+</div>
+
+  <p>This walkthrough shows how to use Profile GPU Rendering on your mobile device.</p>
+
+  <p>Profile GPU Rendering gives you a quick visual representation of how much time it takes to
+  render the frames of a UI window relative to the 16-ms-per-frame benchmark.</p>
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Quickly seeing how a UI window performs against the 16-ms-per-frame target.</li>
+
+    <li>Identifying whether any part of the rendering pipeline stands out in using processing
+    time.</li>
+
+    <li>Looking for spikes in frame rendering time associated with user or program actions.</li>
+  </ul>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>A mobile device running at least Android 4.1 with <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    enabled.</li>
+  </ul>
+
+<h2 id="ProfileGPURendering">Working with Profile GPU Rendering</h2>
+
+<ul class="no-bullet">
+<!-- this also hides bullet, by default outside box -->
+ <li><div style="overflow:hidden">
+  <ol class="padded">
+
+  <div class="figure" style="">
+      <img
+src="{@docRoot}images/tools/performance/profile-gpu-rendering/gettingstarted_image001.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Turning on Profile GPU Rendering.
+      </p>
+    </div>
+
+    <li>On your mobile device, go to <b>Settings &gt;</b> <b>Developer Options</b>.</li>
+
+    <li>In the <em>Monitoring</em> section, select <b>Profile GPU Rendering</b>.</li>
+
+    <li>In the Profile GPU Rendering popup, choose <b>On screen as bars</b> to overlay the graphs
+    on the screen of your mobile device.</li>
+
+    <li>Go to the app that you want to profile.</li>
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+
+  <div class="figure" style="">
+    <img
+src="{@docRoot}images/tools/performance/profile-gpu-rendering/gettingstarted_image002.png"
+         alt=""
+         width="400px" />
+    <p class="img-caption">
+      <strong>Figure 2. </strong>Screen when Profile GPU Rendering is on.
+    </p>
+  </div>
+
+  <h3>What you see:</h3>
+
+    <ul>
+      <li>For each visible application, the tool displays a graph.</li>
+
+      <li>The horizontal axis shows time elapsing, and the vertical axis time per frame in
+        milliseconds.</li>
+
+      <li>As you interact with your application, vertical bars show up on your screen, appearing
+        from left to right, graphing frame performance over time.</li>
+
+      <li>Each vertical bar represents one frame of rendering.
+        The taller the bar, the longer it took to render.</li>
+
+      <li>The green line marks the 16 millisecond target. Every time a frame crosses the green line,
+        your app is missing a frame, and your users may see this as stuttering images.
+    </ul>
+
+</div></li>
+
+<li style="list-style-type:none;><!-- fix issue with visible disc -->
+<div style="overflow:hidden">
+<hr>
+
+  <h3>The Profile GPU Rendering Graph</h3>
+
+    <img
+src="{@docRoot}images/tools/performance/profile-gpu-rendering/gettingstarted_image003.png"
+         alt=""
+         height="" />
+    <p class="img-caption">
+      <strong>Figure 3. </strong>Enlarged Annotated Profile GPU Rendering graph.
+    </p>
+
+  <p>In this enlarged image of the Profile GPU Rending graph you can see the colored sections
+    of the graph, and what phase of the rendering pipeline each color represents.</p>
+
+  <ul>
+    <li>The <b>green line</b> represents 16 milliseconds. To achieve 60 frames per second,
+      the vertical bar for each frame needs
+      to stay below this 16 ms mark. Any time a bar pushes above this line, there may be pauses in
+      the animations.</li>
+
+    <li>Each bar has a blue, purple (only for Android version 4.0 and higher),
+      red, and orange component.</p>
+
+    <li>The <b>blue</b> section of the bar represents the time used to create and update the
+      View's display lists. If this part of the bar is tall, there may be a
+      lot of custom view drawing, or a lot of work in onDraw methods.</li>
+
+    <li>Android 4.0 and higher: The <b>purple</b> section of the bar represents the time spent
+      transferring resources to the render thread.</li>
+
+    <li>The <b>red</b> section of the bar represents the time spent by
+      Android's 2D renderer issuing commands to OpenGL to draw and redraw
+      display lists. The height of this bar is directly proportional to the sum of the time it takes each
+      display list to execute&mdash;more display lists equals a taller red bar.</li>
+
+    <li>The <b>orange</b> section of the bar represents the time the CPU is waiting for the GPU to
+      finish its work. If this bar gets tall, it means the app is doing too much work on the GPU.
+    </li>
+  </ul>
+
+  <p class="note"><strong>Note:</strong>
+    While this tool is named Profile GPU Rendering, all monitored processes actually
+    occur in the CPU. Rendering happens by submitting commands to the GPU, and the GPU renders the
+    screen asynchronously. In certain situations, the GPU can have too much work to do,
+    and your CPU will have to wait before it can submit new commands.
+    When this happens, you'll see spikes in the Process (orange bar) and Execute (red bar)
+    stages, and the sommand submission will block until more room is made on the
+    GPU command queue.
+  </p>
+
+  </div></li>
+</ul>
+
+
+
+

docs/html/tools/performance/systrace/index.jd

@@ -0,0 +1,182 @@
+page.title=Systrace Walkthrough
+meta.tags="android, performance, profiling, tools, compute, systrace"
+page.tags="android", "performance", "profiling", "tools", "compute", "systrace"
+page.metaDescription=Collect system and application process execution data to identify performance bottlenecks.
+page.image=tools/performance/thumbnails/tools_systrace.png
+page.article=true
+
+@jd:body
+
+<style>
+  .no-bullet {
+    list-style-type: none;
+  }
+  .padded {
+    padding-left: 10px;
+  }
+</style>
+
+<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
+
+<h2>In this document</h2>
+<ul>
+  <li><a href="#WhatYouNeed">Prerequisites</a></li>
+  <li><a href="#WorkingWithSystrace">Working with Systrace</a></li>
+</ul>
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}tools/performance/traceview/index.html">
+    Traceview Walkthrough</a></li>
+    <li><a href="{@docRoot}tools/performance/allocation-tracker/index.html">
+    Allocation Tracker Walkthrough</a></li>
+</ul>
+
+</div>
+
+  <p>This walkthrough shows the basic usage and workflow for the Systrace tool in the Android
+  Device Monitor.</p>
+
+  <p>Systrace collects system and application process execution data and generates detailed,
+  interactive reports from devices running Android 4.1 and higher.</p>
+
+  <p>What it's good for:</p>
+
+  <ul>
+    <li>Evaluating container performance.</li>
+
+    <li>Finding performance bottlenecks in the execution of your code.</li>
+  </ul>
+
+  <h2 id="WhatYouNeed">Prerequisites</h2>
+
+  <ul>
+    <li>Android SDK Tools 20.</li>
+
+    <li><a href="http://www.python.org/">Python</a> installed and included in your development
+    computer's execution path.</li>
+
+    <li>A mobile device running at least Android 4.1 with <a href=
+    "http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
+    and USB Debugging enabled in Developer Options.</li>
+
+    <li>Application code. Use your own code, or the <a href=
+    "https://github.com/udacity/Sunshine-Version-2">Sunshine</a> sample app from the <a href=
+    "https://www.udacity.com/course/ud853">Android Fundamentals Udacity course</a>.</li>
+  </ul>
+
+  <h2 id="WorkingWithSystrace">Working with Systrace</h2>
+
+<ul class="no-bullet">
+<!-- this also hides bullet, by default outside box -->
+ <li><div style="overflow:hidden">
+  <ol class="padded">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/systrace/gettingstarted_image001.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 1. </strong>Starting Android Device Monitor.
+      </p>
+    </div>
+
+    <li>Connect your mobile device to your computer.</li>
+
+    <li>Open your application in Android Studio, build the source, and run it on your device.</li>
+
+    <li>From Android Studio, start the Android Device Monitor: <b>Tools -&gt; Android -&gt; Android
+    Device</b> <b>Monitor</b>.
+
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="4">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/systrace/gettingstarted_image003.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 2. </strong>Steps for starting Systrace.
+      </p>
+    </div>
+
+    <li>Make sure your
+      device and the package for your application are showing in the Devices (DDMS mode) or
+      Windows (Hierarchy Viewer mode) tab.
+
+      <p>You can choose <b>Window &gt; Reset Perspective</b> to
+      get back to the default arrangement.</p>
+    </li>
+
+    <li>Click the <b>DDMS</b> button, because Systrace is one of the DDMS tools.</li>
+
+    <li>Click the <b>Systrace</b> button
+      <img src="{@docRoot}images/tools/performance/systrace/gettingstarted_image002.png">.</li>
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="7">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/systrace/gettingstarted_image004.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+       <strong>Figure 3. </strong>Steps for creating a trace.
+      </p>
+    </div>
+
+    <li>In the <b>Android System Trace</b> popup, choose your settings for the trace.
+
+      <ul>
+        <li><b>Destination File:</b> Where the trace is stored as an HTML file. Default is in
+        your home directory as <code>trace.html</code>.</li>
+
+        <li><b>Trace Duration:</b> Default is 5 seconds,
+          and 30 seconds is a good time to choose.</li>
+
+        <li><b>Trace Buffer size:</b> Default is unlimited.</li>
+
+        <li><b>Enable Application Traces from:</b> Make sure your app is selected.</li>
+
+        <li><b>Select tags to enable:</b> Choose at least one value to trace, for example Graphics
+        and View System.</li>
+      </ul>
+    </li>
+
+    <li>Click <b>OK</b> to start tracing.</li>
+
+    <li>Interact with your app.</li>
+</ol>
+</div></li>
+
+<li><div style="overflow:hidden">
+<hr>
+  <ol class="padded" start="10">
+
+    <div class="figure" style="">
+      <img src="{@docRoot}images/tools/performance/systrace/gettingstarted_image005.png"
+         alt=""
+         width="400px" />
+      <p class="img-caption">
+        <strong>Figure 4. </strong>Example systrace output in browser.
+      </p>
+    </div>
+
+    <li>When the trace is done, you are automatically returned to Android Device Monitor.</li>
+
+    <li>Go to your home directory, or the directory you chose as the file destination.</li>
+
+    <li>Open the <code>trace.html</code> file in your browser.</li>
+
+   </ol>
+</div></li>
+</ul>
+
+