docs/html/training/improving-layouts/optimizing-layout.jd - LeafOS-Project/android_frameworks_base - Gitiles

 page.title=Optimizing Layout Hierarchies
 parent.title=Improving Layout Performance
 parent.link=index.html

 trainingnavtop=true
 next.title=Re-using Layouts with &lt;include/&gt;
 next.link=reusing-layouts.html

 @jd:body


 <div id="tb-wrapper">
 <div id="tb">

 <!-- table of contents -->
 <h2>This lesson teaches you to</h2>
 <ol>
   <li><a href="#Inspect">Inspect Your Layout</a></li>
   <li><a href="#Revise">Revise Your Layout</a></li>
   <li><a href="#Lint">Use Lint</a></li>
 </ol>

 <!-- other docs (NOT javadocs) -->
 <h2>You should also read</h2>
 <ul>
   <li><a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML Layouts</a></li>
   <li><a
 href="{@docRoot}guide/topics/resources/layout-resource.html#include- element">Layout
 Resource</a></li>
 </ul>

 </div>
 </div>


 <p>It is a common misconception that using the basic layout structures leads to the most efficient
 layouts. However, each widget and layout you add to your application requires initialization,
 layout, and drawing. For example, using nested instances of {@link android.widget.LinearLayout} can
 lead to an excessively deep view hierarchy. Furthermore, nesting several instances of {@link
 android.widget.LinearLayout} that use the {@code layout_weight} parameter can be especially
 expensive as each child needs to be measured twice. This is particularly important when the layout
 is inflated repeatedly, such as when used in a {@link android.widget.ListView} or {@link
 android.widget.GridView}.</p>

 <p>In this lesson you'll learn to use <a
 href="{@docRoot}tools/help/hierarchy-viewer.html">Hierarchy Viewer</a> and <a
 href="{@docRoot}tools/help/layoutopt.html">Layoutopt</a> to examine and optimize your
 layout.</p>


 <h2 id="Inspect">Inspect Your Layout</h2>

 <p>The Android SDK tools include a tool called <a
 href="{@docRoot}tools/help/hierarchy-viewer.html">Hierarchy Viewer</a> that allows
 you to analyze your layout while your application is running. Using this tool helps you discover
 bottlenecks in the layout performance.</p>

 <p>Hierarchy Viewer works by allowing you to select running processes on a connected device or
 emulator, then display the layout tree. The traffic lights on each block represent its Measure,
 Layout and Draw performance, helping you identify potential issues.</p>

 <p>For example, figure 1 shows a layout that's used as an item in a {@link
 android.widget.ListView}. This layout shows a small bitmap image on the left and two stacked items
 of text on the right. It is especially important that layouts that will be inflated multiple
 times&mdash;such as this one&mdash;are optimized as the performance
 benefits will be multiplied.</p>

 <img src="{@docRoot}images/training/layout-listitem.png" alt="" />
 <p class="img-caption"><strong>Figure 1.</strong> Conceptual layout for an item in a {@link
 android.widget.ListView}.</p>

 <p>The {@code hierarchyviewer} tool is available in  {@code &lt;sdk&gt;/tools/}. When opened,
 the Hierarchy Viewer shows a list of available devices and its running components. Click
 <strong>Load View Hierarchy</strong> to view the layout hierarchy of the selected component. For
 example, figure 2 shows the layout for the list item illustrated by figure 1.</p>

 <div style="float:left;width:455px">
 <img src="{@docRoot}images/training/hierarchy-linearlayout.png" alt="" />
 <p class="img-caption"><strong>Figure 2.</strong> Layout hierarchy for the layout in figure 1,
 using nested instances of {@link android.widget.LinearLayout}.</p>
 </div>

 <div style="float:left;width:155px;margin-left:2em">
 <img src="{@docRoot}images/training/hierarchy-layouttimes.png" alt="" />
 <p class="img-caption"><strong>Figure 3.</strong> Clicking a hierarchy node shows its
 performance times.</p>
 </div>

 <p style="clear:left">In figure 2, you can see there is a 3-level hierarchy with some problems
 laying out the text items. Clicking on the items shows the time taken for each stage of the process
 (figure 3). It becomes clear which items are taking the longest to measure, layout, and render, and
 where you should spend time optimizing.</p>

 <p>The timings for rendering a complete list item using this layout are:</p>
 <ul>
   <li>Measure: 0.977ms</li>
   <li>Layout: 0.167ms</li>
   <li>Draw: 2.717ms</li>
 </ul>


 <h2 id="Revise">Revise Your Layout</h2>

 <p>Because the layout performance above slows down due to a nested {@link
 android.widget.LinearLayout}, the performance might improve by flattening the layout&mdash;make
 the layout shallow and wide, rather than narrow and deep. A {@link android.widget.RelativeLayout} as
 the root node allows for such layouts. So, when this design is converted to use {@link
 android.widget.RelativeLayout}, you can see that the layout becomes a 2-level hierarchy. Inspection
 of the new layout looks like this:</p>

 <img src="{@docRoot}images/training/hierarchy-relativelayout.png" alt="" />
 <p class="img-caption"><strong>Figure 4.</strong> Layout hierarchy for the layout in figure 1,
 using {@link android.widget.RelativeLayout}.</p>

 <p>Now rendering a list item takes:</p>
 <ul>
   <li>Measure: 0.598ms</li>
   <li>Layout: 0.110ms</li>
   <li>Draw: 2.146ms</li>
 </ul>

 <p>Might seem like a small improvement, but this time is multiplied several times because this
 layout is used for every item in a list.</p>

 <p>Most of this time difference is due to the use of {@code layout_weight} in the {@link
 android.widget.LinearLayout} design, which can slow down the speed of measurement. It is just one
 example of how each layout has appropriate uses and you should carefully consider whether using
 layout weight is necessary.</p>


 <h2 id="Lint">Use Lint</h2>

 <p>It is always good practice to run the <a href="{@docRoot}tools/help/lint.html">lint</a>
 tool on your layout files to search for possible view hierarchy optimizations. Lint has replaced
 the Layoutopt tool and has much greater functionality. Some examples of lint <a
 href="http://tools.android.com/tips/lint-checks">rules</a> are:</p>

 <ul>
 <li>Use compound drawables - A {@link android.widget.LinearLayout} which contains an {@link android.widget.ImageView} and a {@link android.widget.TextView} can be more efficiently handled as a compound drawable.</li>
 <li>Merge root frame - If a {@link android.widget.FrameLayout} is the root of a layout and does not provide background or padding etc, it can be replaced with a merge tag which is slightly more efficient.</li>
 <li>Useless leaf - A layout that has no children or no background can often be removed (since it is invisible) for a flatter and more efficient layout hierarchy.</li>
 <li>Useless parent - A layout with children that has no siblings, is not a {@link android.widget.ScrollView} or a root layout, and does not have a background, can be removed and have its children moved directly into the parent for a flatter and more efficient layout hierarchy.</li>
 <li>Deep layouts - Layouts with too much nesting are bad for performance. Consider using flatter layouts such as {@link android.widget.RelativeLayout} or {@link android.widget.GridLayout} to improve performance. The default maximum depth is 10.</li>
 </ul>

 <p>Another benefit of Lint is that it is integrated into Android Studio. Lint automatically runs
 whenever you compile your program. With Android Studio, you can also run lint inspections for a
 specific build variant, or for all build variants. </p>

 <p>You can also manage inspection profiles and configure inspections within Android Studio with the
 <strong>File&gt;Settings&gt;Project Settings</strong> option. The Inspection Configuration page
 appears with the supported inspections.</p>
 <p><img src="{@docRoot}images/tools/studio-inspections-config.png" alt="" /> </p>
 <p class="img-caption"><strong>Figure 5.</strong> Inspection Configuration</p>

 <p>Lint has the ability to automatically fix some issues, provide suggestions for others and jump
 directly to the offending code for review.</p>
	page.title=Optimizing Layout Hierarchies
	parent.title=Improving Layout Performance
	parent.link=index.html

	trainingnavtop=true
	next.title=Re-using Layouts with <include/>
	next.link=reusing-layouts.html

	@jd:body



	<div id="tb-wrapper">
	<div id="tb">

	<!-- table of contents -->
	<h2>This lesson teaches you to</h2>
	<ol>
	<li><a href="#Inspect">Inspect Your Layout</a></li>
	<li><a href="#Revise">Revise Your Layout</a></li>
	<li><a href="#Lint">Use Lint</a></li>
	</ol>

	<!-- other docs (NOT javadocs) -->
	<h2>You should also read</h2>
	<ul>
	<li><a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML Layouts</a></li>
	<li><a
	href="{@docRoot}guide/topics/resources/layout-resource.html#include- element">Layout
	Resource</a></li>
	</ul>

	</div>
	</div>


	<p>It is a common misconception that using the basic layout structures leads to the most efficient
	layouts. However, each widget and layout you add to your application requires initialization,
	layout, and drawing. For example, using nested instances of {@link android.widget.LinearLayout} can
	lead to an excessively deep view hierarchy. Furthermore, nesting several instances of {@link
	android.widget.LinearLayout} that use the {@code layout_weight} parameter can be especially
	expensive as each child needs to be measured twice. This is particularly important when the layout
	is inflated repeatedly, such as when used in a {@link android.widget.ListView} or {@link
	android.widget.GridView}.</p>

	<p>In this lesson you'll learn to use <a
	href="{@docRoot}tools/help/hierarchy-viewer.html">Hierarchy Viewer</a> and <a
	href="{@docRoot}tools/help/layoutopt.html">Layoutopt</a> to examine and optimize your
	layout.</p>



	<h2 id="Inspect">Inspect Your Layout</h2>

	<p>The Android SDK tools include a tool called <a
	href="{@docRoot}tools/help/hierarchy-viewer.html">Hierarchy Viewer</a> that allows
	you to analyze your layout while your application is running. Using this tool helps you discover
	bottlenecks in the layout performance.</p>

	<p>Hierarchy Viewer works by allowing you to select running processes on a connected device or
	emulator, then display the layout tree. The traffic lights on each block represent its Measure,
	Layout and Draw performance, helping you identify potential issues.</p>

	<p>For example, figure 1 shows a layout that's used as an item in a {@link
	android.widget.ListView}. This layout shows a small bitmap image on the left and two stacked items
	of text on the right. It is especially important that layouts that will be inflated multiple
	times—such as this one—are optimized as the performance
	benefits will be multiplied.</p>

	<img src="{@docRoot}images/training/layout-listitem.png" alt="" />
	<p class="img-caption"><strong>Figure 1.</strong> Conceptual layout for an item in a {@link
	android.widget.ListView}.</p>

	<p>The {@code hierarchyviewer} tool is available in {@code <sdk>/tools/}. When opened,
	the Hierarchy Viewer shows a list of available devices and its running components. Click
	<strong>Load View Hierarchy</strong> to view the layout hierarchy of the selected component. For
	example, figure 2 shows the layout for the list item illustrated by figure 1.</p>

	<div style="float:left;width:455px">
	<img src="{@docRoot}images/training/hierarchy-linearlayout.png" alt="" />
	<p class="img-caption"><strong>Figure 2.</strong> Layout hierarchy for the layout in figure 1,
	using nested instances of {@link android.widget.LinearLayout}.</p>
	</div>

	<div style="float:left;width:155px;margin-left:2em">
	<img src="{@docRoot}images/training/hierarchy-layouttimes.png" alt="" />
	<p class="img-caption"><strong>Figure 3.</strong> Clicking a hierarchy node shows its
	performance times.</p>
	</div>

	<p style="clear:left">In figure 2, you can see there is a 3-level hierarchy with some problems
	laying out the text items. Clicking on the items shows the time taken for each stage of the process
	(figure 3). It becomes clear which items are taking the longest to measure, layout, and render, and
	where you should spend time optimizing.</p>

	<p>The timings for rendering a complete list item using this layout are:</p>
	<ul>
	<li>Measure: 0.977ms</li>
	<li>Layout: 0.167ms</li>
	<li>Draw: 2.717ms</li>
	</ul>


	<h2 id="Revise">Revise Your Layout</h2>

	<p>Because the layout performance above slows down due to a nested {@link
	android.widget.LinearLayout}, the performance might improve by flattening the layout—make
	the layout shallow and wide, rather than narrow and deep. A {@link android.widget.RelativeLayout} as
	the root node allows for such layouts. So, when this design is converted to use {@link
	android.widget.RelativeLayout}, you can see that the layout becomes a 2-level hierarchy. Inspection
	of the new layout looks like this:</p>

	<img src="{@docRoot}images/training/hierarchy-relativelayout.png" alt="" />
	<p class="img-caption"><strong>Figure 4.</strong> Layout hierarchy for the layout in figure 1,
	using {@link android.widget.RelativeLayout}.</p>

	<p>Now rendering a list item takes:</p>
	<ul>
	<li>Measure: 0.598ms</li>
	<li>Layout: 0.110ms</li>
	<li>Draw: 2.146ms</li>
	</ul>

	<p>Might seem like a small improvement, but this time is multiplied several times because this
	layout is used for every item in a list.</p>

	<p>Most of this time difference is due to the use of {@code layout_weight} in the {@link
	android.widget.LinearLayout} design, which can slow down the speed of measurement. It is just one
	example of how each layout has appropriate uses and you should carefully consider whether using
	layout weight is necessary.</p>


	<h2 id="Lint">Use Lint</h2>

	<p>It is always good practice to run the <a href="{@docRoot}tools/help/lint.html">lint</a>
	tool on your layout files to search for possible view hierarchy optimizations. Lint has replaced
	the Layoutopt tool and has much greater functionality. Some examples of lint <a
	href="http://tools.android.com/tips/lint-checks">rules</a> are:</p>

	<ul>
	<li>Use compound drawables - A {@link android.widget.LinearLayout} which contains an {@link android.widget.ImageView} and a {@link android.widget.TextView} can be more efficiently handled as a compound drawable.</li>
	<li>Merge root frame - If a {@link android.widget.FrameLayout} is the root of a layout and does not provide background or padding etc, it can be replaced with a merge tag which is slightly more efficient.</li>
	<li>Useless leaf - A layout that has no children or no background can often be removed (since it is invisible) for a flatter and more efficient layout hierarchy.</li>
	<li>Useless parent - A layout with children that has no siblings, is not a {@link android.widget.ScrollView} or a root layout, and does not have a background, can be removed and have its children moved directly into the parent for a flatter and more efficient layout hierarchy.</li>
	<li>Deep layouts - Layouts with too much nesting are bad for performance. Consider using flatter layouts such as {@link android.widget.RelativeLayout} or {@link android.widget.GridLayout} to improve performance. The default maximum depth is 10.</li>
	</ul>

	<p>Another benefit of Lint is that it is integrated into Android Studio. Lint automatically runs
	whenever you compile your program. With Android Studio, you can also run lint inspections for a
	specific build variant, or for all build variants. </p>

	<p>You can also manage inspection profiles and configure inspections within Android Studio with the
	<strong>File>Settings>Project Settings</strong> option. The Inspection Configuration page
	appears with the supported inspections.</p>
	<p><img src="{@docRoot}images/tools/studio-inspections-config.png" alt="" /> </p>
	<p class="img-caption"><strong>Figure 5.</strong> Inspection Configuration</p>

	<p>Lint has the ability to automatically fix some issues, provide suggestions for others and jump
	directly to the offending code for review.</p>