1page.title=Hierarchy Viewer Walkthrough
2meta.tags="android, performance, profiling, tools, rendering, hierarchyviewer"
3page.tags="android", "performance", "profiling", "tools", "rendering", "hierarchyviewer"
4page.metaDescription=Visualize your app's view hierarchy to help you simplify your layouts.
5page.image=tools/performance/thumbnails/tools_hierarchy_viewer.png
6page.article=true
7
8@jd:body
9
10<style>
11  .no-bullet {
12    list-style-type: none;
13  }
14  .padded {
15    padding-left: 10px;
16  }
17</style>
18
19<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
20
21<h2>In this document</h2>
22<ul>
23  <li><a href="#WhatYouNeed">Prerequisites</a></li>
24  <li><a href="#WorkingWithHierarchyViewer">Working with Hierarchy Viewer</a></li>
25</ul>
26
27<h2>You should also read</h2>
28<ul>
29  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html">
30    Device Setup for Hierarchy Viewer</a></li>
31  <li><a href="{@docRoot}tools/performance/hierarchy-viewer/profiling.html">
32    Profiling with Hierarchy Viewer</a></li>
33  <li><a href=
34    "http://developer.android.com/tools/debugging/debugging-ui.html#viewhierarchy">Hierarchy Viewer
35    </a></li>
36  <li><a href="/guide/topics/ui/overview.html#Layout">View Hierarchies</a></li>
37  <li><a href="{@docRoot}tools/performance/importing-legacy-apps.html">
38    Importing Legacy Apps into Android Studio<a></li>
39  <li><a href="{@docRoot}tools/device.html">Using Hardware Devices</a></li>
40</ul>
41
42</div>
43
44  <p>This walkthrough shows the basic usage and workflow for the Hierarchy Viewer tool.</p>
45
46  <p>The Hierarchy Viewer tool visualizes your app's <a href=
47  "http://developer.android.com/guide/topics/ui/overview.html#Layout">view hierarchy</a> and
48  profiles the relative rendering speed for each view.
49
50  <p>What it's good for:</p>
51
52  <ul>
53    <li>Simplifying your view hierarchy to reduce overdraw, and make it easier to manage.</li>
54
55    <li>Finding potential rendering performance bottlenecks related to the structure and shape of your
56    view hierarchy.</li>
57  </ul>
58
59  <h2 id="WhatYouNeed">Prerequisites</h2>
60
61  <ul>
62    <li>A mobile device set up to work with Hierarchy Viewer:</li>
63
64    <li style="list-style: none; display: inline">
65      <ol>
66        <li>You must have <a href=
67        "http://developer.android.com/tools/device.html#developer-device-options">Developer
68        Options</a> enabled on your mobile device. You must use a physical device to get
69        accurate measurements.</li>
70
71        <li>Set an {@code ANDROID_HVPROTO} environment variable on the desktop machine
72          that is connected to your device. For more information, see
73          <a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html">Device Setup for Hierarchy Viewer</a>.</li>
74      </ol>
75    </li>
76
77    <li>Debuggable app code with a view hierarchy. Use your own code, or the code for the <a href=
78    "https://github.com/udacity/Sunshine-Version-2">Sunshine</a> sample app from the <a href=
79    "https://www.udacity.com/course/ud853">Android Fundamentals Udacity course</a>.</li>
80  </ul>
81
82  <h2 id="WorkingWithHierarchyViewer">Working with Hierarchy Viewer</h2>
83
84<ul class="no-bullet">
85<!-- this also hides bullet, by default outside box -->
86 <li><div style="overflow:hidden">
87  <ol class="padded">
88
89     <div class="figure" style="">
90      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image001.png"
91         alt=""
92         width="400px" />
93      <p class="img-caption">
94        <strong>Figure 1. </strong>Starting Android Device Monitor.
95      </p>
96    </div>
97
98    <li>Connect your mobile device to your computer.</li>
99
100    <li>Open your application in Android Studio, build the source, and run it on your device.</li>
101
102    <li>From Android Studio, start the Android Device Monitor: <b>Tools &gt; Android &gt;
103    Android Device Monitor</b>.</li>
104
105    <li>Allow <b>USB Debugging</b> on your phone (if asked).</li>
106
107</ol>
108</div></li>
109
110<li><div style="overflow:hidden">
111<hr>
112  <ol class="padded" start="6">
113
114    <div class="figure" style="">
115      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image005.png"
116         alt=""
117         width="400px" />
118      <p class="img-caption">
119        <strong>Figure 2. </strong>Android Device Monitor.
120      </p>
121    </div>
122
123    <li>Figure 2 illustrates what is initially shown in the Device Monitor tool. This varies
124      depending on your setup.
125      <p>Make sure your device
126      and the package for your application are showing in the Devices (DDMS mode) or Windows
127      (Hierarchy Viewer mode) tab. You can choose <b>Window &gt; Reset Perspective</b> to get
128      back to the default arrangement.</p>
129      <p>If the app does not appear, make sure you
130      followed the <a href="{@docRoot}tools/performance/hierarchy-viewer/setup.html"> device
131      setup instructions</a>, then start over at step 1.</p></li>
132
133</ol>
134</div></li>
135
136<li><div style="overflow:hidden">
137<hr>
138  <ol class="padded" start="7">
139
140    <div class="figure" style="">
141      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image002.png"
142         alt=""
143         width="400px" />
144      <p class="img-caption">
145        <strong>Figure 3. </strong>Changing Perspective to Hierarchy Viewer.
146     </p>
147    </div>
148
149    <li>In Android Device Monitor (ADM), in the menu bar, choose <b>Window &gt; Open
150    Perspective</b>, and in the popup click <b>Hierarchy View</b>.<br>
151
152    <p>OR</p>
153    <p> Click the <b>Hierarchy View</b> button if it's already visible.<br>
154    <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image003.png">
155    </p></li>
156
157</ol>
158</div></li>
159
160<li><div style="overflow:hidden">
161<hr>
162  <ol class="padded" start="9">
163
164    <div class="figure" style="">
165      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image006.png"
166         alt=""
167         width="400px" />
168      <p class="img-caption">
169        <strong>Figure 4. </strong>Hierarchy Viewer layout.
170     </p>
171    </div>
172
173    <li>If not already open, the Hierarchy View panes open.<br>
174      The example screen in Figure&nbsp;4 shows an example of these panes.</li>
175
176  </ol>
177</div></li>
178
179<li><div style="overflow:hidden">
180<hr>
181  <ol class="padded" start="10">
182
183    <div class="figure" style="">
184      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image004.png"
185         alt=""
186         width="240px" />
187      <p class="img-caption">
188        <strong>Figure 5. </strong>Resetting the Perspective.
189      </p>
190    </div>
191
192    <li>If you see a different window arrangement, in Android Device Manager, use
193    <b>Window &gt; Reset Perspective</b> to return to the default layout for this tutorial.
194
195  </ol>
196</div></li>
197
198<li><div style="overflow:hidden">
199<hr>
200  <ol class="padded" start="11">
201
202    <div class="figure" style="">
203      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image007.png"
204         alt=""
205         width="400px" />
206      <p class="img-caption">
207        <strong>Figure 6. </strong>Populated Hierarchy Viewer.
208      </p>
209    </div>
210
211    <li>Double-click your application in the Windows tab. This populates the panes with the
212      view hierarchy of your application.
213      This display is a static representation of the complete view hierarchy defined for the
214      app.</li>
215
216    <li>You can adjust the sizes of the panes and ADM will preserve your
217      arrangement in future sessions.</li>
218
219  </ol>
220</div></li>
221
222<li><div style="overflow:hidden">
223<hr>
224  <ol class="padded" start="13">
225
226    <div class="figure" style="">
227      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image008.png"
228         alt=""
229         width="400px" />
230      <p class="img-caption">
231      <strong>Figure 7. </strong>Hierarchy Viewer panes.
232      </p>
233    </div>
234
235    <li>If necessary, click the <b>Layout View</b> tab to hide the Console and show a wireframe of
236    your layout. The outline of the currently selected view is red. Click an outline to select
237    it.</li>
238
239    <li>The rest of the panes:
240
241      <ul>
242        <li>The <b>Tree Overview</b> in the upper right gives you a bird's-eye view of your
243        app's complete <a href=
244        "http://developer.android.com/guide/topics/ui/overview.html#Layout">View</a> <a href=
245        "http://developer.android.com/guide/topics/ui/overview.html#Layout">Hierarchy</a>.</li>
246
247        <li>In the <b>Tree Overview</b>, move the gray viewport rectangle to change what section of
248        your hierarchy shows in the <b>Tree View</b> pane (in the center).</li>
249
250        <li>In the <b>Tree View</b>, you can drag and zoom the tree using your mouse.</li>
251      </ul>
252  </ol>
253</div></li>
254
255<li><div style="overflow:hidden">
256<hr>
257  <ol class="padded" start="15">
258
259    <div class="figure" style="">
260      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image009.png"
261         alt=""
262         width="400px" />
263      <p class="img-caption">
264        <strong>Figure 7. </strong>Parts of the View node display.
265      </p>
266    </div>
267
268    <li>Click on a View node to display details. Here is an annotated close-up of a node
269      and its details.</li>
270
271
272  </ol>
273</div></li>
274
275<li><div style="overflow:hidden">
276<hr>
277  <ol class="padded" start="16">
278
279    <div class="figure" style="">
280      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image010.png"
281         alt=""
282         width="400px" />
283      <p class="img-caption">
284        <strong>Figure 8. </strong>Location of View Properties tab.
285      </p>
286    </div>
287
288    <li>Click the <b>View Properties</b> tab at the top right (next to the Windows tab) to see
289        properties of the selected View node.</li>
290
291   </ol>
292</div></li>
293
294<li><div style="overflow:hidden">
295<hr>
296  <ol class="padded" start="17">
297
298    <div class="figure" style="">
299      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image011.png"
300         alt=""
301         width="400px" />
302      <p class="img-caption">
303        <strong>Figure 9. </strong>Rendering a view in a popup.
304      </p>
305    </div>
306
307    <li>Double-click a View node in the Tree View to render it in a popup window.</li>
308
309  </ol>
310</div></li>
311
312<li><div style="overflow:hidden">
313<hr>
314  <ol class="padded" start="18">
315
316  <div class="figure" style="">
317      <img src="{@docRoot}images/tools/performance/hierarchy-viewer/gettingstarted_image012.png"
318         alt=""
319         width="240px" />
320      <p class="img-caption">
321        <strong>Figure 10. </strong>Node with its type and id.
322      </p>
323    </div>
324
325    <li>Nodes in the Tree View show a Type, which indicates the View class,
326      and an id, which is the view identifier in your code.</li>
327
328  </ol>
329</div></li>
330</ul>
331