{"id":542,"date":"2011-03-15T00:47:53","date_gmt":"2011-03-15T07:47:53","guid":{"rendered":"http:\/\/wiebe-elsinga.com\/blog\/?p=542"},"modified":"2011-10-20T21:18:12","modified_gmt":"2011-10-21T04:18:12","slug":"debug-android-ui","status":"publish","type":"post","link":"http:\/\/wiebe-elsinga.com\/blog\/debug-android-ui\/","title":{"rendered":"How-To: Debug Android UI"},"content":{"rendered":"<div class=\"wpsso-pinterest-pin-it-image\" style=\"display:none !important;\">\n<\/div><!-- .wpsso-pinterest-pin-it-image -->\n\n<p>When debugging an Android application it\u2019s important to look at the structure of the UI. There are tools that help you visualize the UI. Inside this article I will be explaining two tools:<\/p>\n<ul>\n<li>Hierarchy Viewer<\/li>\n<li>Layoutopt<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h2>Hierarchy Viewer<\/h2>\n<p>The <a href=\"http:\/\/developer.android.com\/guide\/developing\/tools\/hierarchy-viewer.html\">Hierarchy Viewer<\/a> application provides a visual representation of the layout&#8217;s View hierarchy (the Layout View) and a magnified inspector of the display (the Pixel Perfect View). So lets run the tool.<\/p>\n<ol>\n<li>Connect your device or launch an emulator<\/li>\n<li>From a terminal, launch <strong>hierarchyviewer<\/strong> from your SDK \/tools directory.<\/li>\n<li> In the window that opens, you&#8217;ll see a list of Devices. When a device is selected, a list of currently active Windows is displayed on the right. The <em>focused window<\/em> is the window currently in the foreground, and also the default window loaded if you do not select another.<\/li>\n<li> Select the window that you&#8217;d like to inspect and click Load View Hierarchy. The Layout View will be loaded. You can then load the Pixel Perfect View by clicking the second icon at the bottom-left of the window.<\/li>\n<\/ol>\n<p><a href=\"http:\/\/wiebe-elsinga.com\/blog\/wp-content\/uploads\/2011\/03\/HierarchyViewer.gif\"><img loading=\"lazy\" class=\"aligncenter size-thumbnail wp-image-543\" title=\"HierarchyViewer\" src=\"http:\/\/wiebe-elsinga.com\/blog\/wp-content\/uploads\/2011\/03\/HierarchyViewer-150x150.gif\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<h2>Layoutopt<\/h2>\n<p><a href=\"http:\/\/developer.android.com\/guide\/developing\/tools\/layoutopt.html\">Layoutopt<\/a> is a command line tool which can analyse a layout resource file and tell you what is not required. So lets run the tool.<\/p>\n<ol>\n<li>From a terminal, launch <strong>layoutopt<\/strong> from your SDK \/tools directory.<\/li>\n<li>The argument is a space- delimited list of resources you want to analyze, either non-compiled resource xml files or directories of such files.<\/li>\n<\/ol>\n<p><a href=\"http:\/\/wiebe-elsinga.com\/blog\/wp-content\/uploads\/2011\/03\/Layoutopt.gif\"><img loading=\"lazy\" class=\"aligncenter size-thumbnail wp-image-544\" title=\"Layoutopt\" src=\"http:\/\/wiebe-elsinga.com\/blog\/wp-content\/uploads\/2011\/03\/Layoutopt-150x150.gif\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When debugging an Android application it\u2019s important to look at the structure of the UI. There are tools that help you visualize the UI. Inside this article I will be explaining two tools: Hierarchy Viewer Layoutopt<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[7,95],"tags":[154,52,54,53],"_links":{"self":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/posts\/542"}],"collection":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":0,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/posts\/542\/revisions"}],"wp:attachment":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/media?parent=542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/categories?post=542"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/tags?post=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}