Skip to content

Commit d1f2b7c

Browse files
scottamainAndroid Git Automerger
scottamain
authored and
Android Git Automerger
committed
am 56a3e32: Merge "docs: add Android U class for "Improving Performance of Layouts"" into ics-mr0
* commit '56a3e326192c7496b67666b29071dc9f38c59da9': docs: add Android U class for "Improving Performance of Layouts"
2 parents b8ea1f9 + 56a3e32 commit d1f2b7c

File tree

10 files changed

+574
-0
lines changed

10 files changed

+574
-0
lines changed

‎docs/html/images/training/hierarchy-layouttimes.png‎

19.1 KB
Loading

‎docs/html/images/training/hierarchy-linearlayout.png‎

47.4 KB
Loading

‎docs/html/images/training/hierarchy-relativelayout.png‎

44.9 KB
Loading

‎docs/html/images/training/import-progress.png‎

8.98 KB
Loading

‎docs/html/images/training/layout-listitem.png‎

3.47 KB
Loading

‎docs/html/training/improving-layouts/index.jd‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
page.title=Improving Performance of Layouts
2+
3+
trainingnavtop=true
4+
startpage=true
5+
next.title=Optimizing Layout
6+
next.link=optimizing-layout.html
7+
8+
@jd:body
9+
10+
<div id="tb-wrapper">
11+
<div id="tb">
12+
13+
<!-- Required platform, tools, add-ons, devices, knowledge, etc. -->
14+
<h2>Dependencies and prerequisites</h2>
15+
<ul>
16+
<li>Android 1.5 (API Level 3) or higher</li>
17+
</ul>
18+
19+
<!-- related docs (NOT javadocs) -->
20+
<h2>You should also read</h2>
21+
<ul>
22+
<li><a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML Layouts</a></li>
23+
</ul>
24+
25+
</div>
26+
</div>
27+
28+
29+
30+
<p>Layouts are a key part of Android applications that directly affect the user experience. If
31+
implemented poorly, your layout can lead to a memory hungry application with slow UIs. The Android
32+
SDK includes tools to help you identify problems in your layout performance, which when combined the
33+
lessons here, you will be able to implement smooth scrolling interfaces with a minimum memory
34+
footprint.</p>
35+
36+
37+
38+
<h2>Lessons</h2>
39+
40+
<dl>
41+
<dt><b><a href="optimizing-layout.html">Optimizing Layout Hierarchies</a></b></dt>
42+
<dd>In the same way a complex web page can slow down load time, your layout hierarchy
43+
if too complex can also cause performance problems. This lesson shows how you can use SDK tools
44+
to inspect your layout and discover performance bottlenecks.</dd>
45+
<dt><b><a href="reusing-layouts.html">Re-using Layouts with &lt;include/&gt;</a></b></dt>
46+
<dd>If your application UI repeats certain layout constructs in multiple places, this lesson
47+
shows you how to create efficient, re-usable layout constructs, then include them in the appropriate
48+
UI layouts.</dd>
49+
<dt><b><a href="loading-ondemand.html">Loading Views On Demand</a></b></dt>
50+
<dd>Beyond simply including one layout component within another layout, you might want to
51+
make the included layout visible only when it's needed, sometime after the activity is running.
52+
This lesson shows how you can improve your layout's initialization performance by loading
53+
portions of your layout on demand.</dd>
54+
<dt><b><a href="smooth-scrolling.html">Making ListView Scrolling Smooth</a></b></dt>
55+
<dd>If you've built an instance of {@link android.widget.ListView} that contains complex or
56+
data-heavy content in each list item, the scroll performance of the list might suffer. This
57+
lesson provides some tips about how you can make your scrolling performance more smooth.</dd>
58+
</dl>

‎docs/html/training/improving-layouts/loading-ondemand.jd‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
page.title=Loading Views On Demand
2+
parent.title=Improving Performance of Layouts
3+
parent.link=index.html
4+
5+
trainingnavtop=true
6+
previous.title=Re-using Layouts with &lt;include/&gt;
7+
previous.link=reusing-layouts.html
8+
next.title=Making ListView Scrolling Smooth
9+
next.link=smooth-scrolling.html
10+
11+
@jd:body
12+
13+
14+
<div id="tb-wrapper">
15+
<div id="tb">
16+
17+
<!-- table of contents -->
18+
<h2>This lesson teaches you to</h2>
19+
<ol>
20+
<li><a href="#ViewStub">Define a ViewStub</a></li>
21+
<li><a href="#Load">Load the ViewStub Layout</a></li>
22+
</ol>
23+
24+
<!-- other docs (NOT javadocs) -->
25+
<h2>You should also read</h2>
26+
<ul>
27+
<li><a href="{@docRoot}resources/articles/layout-tricks-stubs.html">Using ViewStubs</a></li>
28+
</ul>
29+
30+
</div>
31+
</div>
32+
33+
34+
<p>Sometimes your layout might require complex views that are rarely used. Whether
35+
they are item details, progress indicators, or undo messages, you can reduce memory usage and speed
36+
up rendering by loading the views only when they are needed.</p>
37+
38+
39+
<h2 id="ViewStub">Define a ViewStub</h2>
40+
41+
<p>{@link android.view.ViewStub} is a lightweight view with no dimension and doesn’t draw anything
42+
or participate in the layout. As such, it's cheap to inflate and cheap to leave in a view hierarchy.
43+
Each {@link android.view.ViewStub} simply needs to include the {@code android:layout} attribute to
44+
specify the layout to inflate.</p>
45+
46+
<p>The following {@link android.view.ViewStub} is for a translucent progress bar overlay. It should
47+
be visible only when new items are being imported into the application.</p>
48+
49+
<pre>
50+
&lt;ViewStub
51+
android:id="@+id/stub_import"
52+
android:inflatedId="@+id/panel_import"
53+
android:layout="@layout/progress_overlay"
54+
android:layout_width="fill_parent"
55+
android:layout_height="wrap_content"
56+
android:layout_gravity="bottom" /&gt;
57+
</pre>
58+
59+
60+
<h2 id="Load">Load the ViewStub Layout</h2>
61+
62+
<p>When you want to load the layout specified by the {@link android.view.ViewStub}, either set it
63+
visible by calling {@link android.view.View#setVisibility setVisibility(View.VISIBLE)} or call
64+
{@link android.view.ViewStub#inflate()}.</p>
65+
66+
<pre>
67+
((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);
68+
// or
69+
View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();
70+
</pre>
71+
72+
<p class="note"><strong>Note:</strong> The {@link android.view.ViewStub#inflate()} method returns
73+
the inflated {@link android.view.View} once complete. so you don't need to call {@link
74+
android.app.Activity#findViewById findViewById()} if you need to interact with the layout.</p>
75+
76+
<p>Once visible/inflated, the {@link android.view.ViewStub} element is no longer part of the view
77+
hierarchy. It is replaced by the inflated layout and the ID for the root view of that layout is
78+
the one specified by the {@code android:inflatedId} attribute of the ViewStub. (The ID {@code
79+
android:id} specified for the {@link android.view.ViewStub} is valid only until the {@link
80+
android.view.ViewStub} layout is visible/inflated.)</p>
81+
82+
<p class="note"><strong>Note:</strong> One drawback of {@link android.view.ViewStub} is that it
83+
doesn’t currently support the {@code &lt;merge/&gt;} tag in the layouts to be inflated.</p>
84+
85+
86+

‎docs/html/training/improving-layouts/optimizing-layout.jd‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
page.title=Optimizing Layout Hierarchies
2+
parent.title=Improving Performance of Layouts
3+
parent.link=index.html
4+
5+
trainingnavtop=true
6+
next.title=Re-using Layouts with &lt;include/&gt;
7+
next.link=reusing-layouts.html
8+
9+
@jd:body
10+
11+
12+
13+
<div id="tb-wrapper">
14+
<div id="tb">
15+
16+
<!-- table of contents -->
17+
<h2>This lesson teaches you to</h2>
18+
<ol>
19+
<li><a href="#Inspect">Inspect Your Layout</a></li>
20+
<li><a href="#Revise">Revise Your Layout</a></li>
21+
<li><a href="#Layoutopt">Use Layoutopt</a></li>
22+
</ol>
23+
24+
<!-- other docs (NOT javadocs) -->
25+
<h2>You should also read</h2>
26+
<ul>
27+
<li><a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML Layouts</a></li>
28+
<li><a
29+
href="{@docRoot}guide/topics/resources/layout-resource.html#include- element">Layout
30+
Resource</a></li>
31+
</ul>
32+
33+
</div>
34+
</div>
35+
36+
37+
<p>It is a common misconception that using the basic layout structures leads to the most efficient
38+
layouts. However, each widget and layout you add to your application requires initialization,
39+
layout, and drawing. For example, using nested instances of {@link android.widget.LinearLayout} can
40+
lead to an excessively deep view hierarchy. Furthermore, nesting several instances of {@link
41+
android.widget.LinearLayout} that use the {@code layout_weight} parameter can be especially
42+
expensive as each child needs to be measured twice. This is particularly important when the layout
43+
is inflated repeatedly, such as when used in a {@link android.widget.ListView} or {@link
44+
android.widget.GridView}.</p>
45+
46+
<p>In this lesson you'll learn to use <a
47+
href="{@docRoot}guide/developing/tools/hierarchy-viewer.html">Heirachy Viewer</a> and <a
48+
href="{@docRoot}guide/developing/tools/layoutopt.html">Layoutopt</a> to examine and optimize your
49+
layout.</p>
50+
51+
52+
53+
<h2 id="Inspect">Inspect Your Layout</h2>
54+
55+
<p>The Android SDK tools include a tool called <a
56+
href="{@docRoot}guide/developing/tools/hierarchy-viewer.html">Heirachy Viewer</a> that allows
57+
you to analyze your layout while your application is running. Using this tool helps you discover
58+
bottlenecks in the layout performance.</p>
59+
60+
<p>Hierarchy Viewer works by allowing you to select running processes on a connected device or
61+
emulator, then display the layout tree. The traffic lights on each block represent its Measure,
62+
Layout and Draw performance, helping you identify potential issues.</p>
63+
64+
<p>For example, figure 1 shows a layout that's used as an item in a {@link
65+
android.widget.ListView}. This layout shows a small bitmap image on the left and two stacked items
66+
of text on the right. It is especially important that layouts that will be inflated multiple
67+
times&mdash;such as this one&mdash;are optimized as the performance
68+
benefits will be multiplied.</p>
69+
70+
<img src="{@docRoot}images/training/layout-listitem.png" alt="" />
71+
<p class="img-caption"><strong>Figure 1.</strong> Conceptual layout for an item in a {@link
72+
android.widget.ListView}.</p>
73+
74+
<p>The {@code hierarchyviewer} tool is available in {@code &lt;sdk&gt;/tools/}. When opened,
75+
the Hierarchy Viewer shows a list of available devices and its running components. Click
76+
<strong>Load View Hierarchy</strong> to view the layout hierarchy of the selected component. For
77+
example, figure 2 shows the layout for the list item illustrated by figure 1.</p>
78+
79+
<div style="float:left;width:455px">
80+
<img src="{@docRoot}images/training/hierarchy-linearlayout.png" alt="" />
81+
<p class="img-caption"><strong>Figure 2.</strong> Layout hierarchy for the layout in figure 1,
82+
using nested instances of {@link android.widget.LinearLayout}.</p>
83+
</div>
84+
85+
<div style="float:left;width:155px;margin-left:2em">
86+
<img src="{@docRoot}images/training/hierarchy-layouttimes.png" alt="" />
87+
<p class="img-caption"><strong>Figure 3.</strong> Clicking a hierarchy node shows its
88+
performance times.</p>
89+
</div>
90+
91+
<p style="clear:left">In figure 2, you can see there is a 3-level hierarchy with some problems
92+
laying out the text items. Clicking on the items shows the time taken for each stage of the process
93+
(figure 3). It becomes clear which items are taking the longest to measure, layout, and render, and
94+
where you should spend time optimizing.</p>
95+
96+
<p>The timings for rendering a complete list item using this layout are:</p>
97+
<ul>
98+
<li>Measure: 0.977ms</li>
99+
<li>Layout: 0.167ms</li>
100+
<li>Draw: 2.717ms</li>
101+
</ul>
102+
103+
104+
<h2 id="Revise">Revise Your Layout</h2>
105+
106+
<p>Because the layout performance above slows down due to a nested {@link
107+
android.widget.LinearLayout}, the performance might improve by flattening the layout&mdash;make
108+
the layout shallow and wide, rather than narrow and deep. A {@link android.widget.RelativeLayout} as
109+
the root node allows for such layouts. So, when this design is converted to use {@link
110+
android.widget.RelativeLayout}, you can see that the layout becomes a 2-level hierarchy. Inspection
111+
of the new layout looks like this:</p>
112+
113+
<img src="{@docRoot}images/training/hierarchy-relativelayout.png" alt="" />
114+
<p class="img-caption"><strong>Figure 4.</strong> Layout hierarchy for the layout in figure 1,
115+
using {@link android.widget.RelativeLayout}.</p>
116+
117+
<p>Now rendering a list item takes:</p>
118+
<ul>
119+
<li>Measure: 0.598ms</li>
120+
<li>Layout: 0.110ms</li>
121+
<li>Draw: 2.146ms</li>
122+
</ul>
123+
124+
<p>Might seem like a small improvement, but this time is multiplied several times because this
125+
layout is used for every item in a list.</p>
126+
127+
<p>Most of this time difference is due to the use of {@code layout_weight} in the {@link
128+
android.widget.LinearLayout} design, which can slow down the speed of measurement. It is just one
129+
example of how each layout has appropriate uses and you should carefully consider whether using
130+
layout weight is necessary.</p>
131+
132+
133+
<h2 id="Layoutopt">Use Layoutopt</h2>
134+
135+
<p>It is always good practice to also run the <a
136+
href="{@docRoot}guide/developing/tools/layoutopt.html">layoutopt</a> tool on your final layout files
137+
to search for places in your view hierarchy that may be optimized. Layoutopt is also in your SDK
138+
{@code tools/} directory and takes a layout directory name or a space-separated list of layout files
139+
that you'd like to inspect.</p>
140+
141+
<p>When you run {@code layoutopt} on a layout file, it prints a line number for each issue found, a
142+
description of the issue, and for some types of issues it also suggests a resolution. For
143+
example:</p>
144+
145+
<pre class="no-pretty-print classic">
146+
$ layoutopt samples/
147+
samples/compound.xml
148+
7:23 The root-level &lt;FrameLayout/&gt; can be replaced with &lt;merge/&gt;
149+
11:21 This LinearLayout layout or its FrameLayout parent is useless
150+
samples/simple.xml
151+
7:7 The root-level &lt;FrameLayout/&gt; can be replaced with &lt;merge/&gt;
152+
</pre>
153+
154+
<p>After you apply the suggested layout optimizations, run Hierarchy Viewer again to inspect the
155+
performance changes.</p>
156+

0 commit comments

Comments
 (0)