{"id":334762,"date":"2010-02-18T08:30:06","date_gmt":"2010-02-18T13:30:06","guid":{"rendered":"http:\/\/www.androidguys.com\/?p=13406"},"modified":"2010-02-18T08:30:06","modified_gmt":"2010-02-18T13:30:06","slug":"handling-multiple-screen-sizes-part-two","status":"publish","type":"post","link":"https:\/\/mereja.media\/index\/334762","title":{"rendered":"Handling Multiple Screen Sizes, Part Two"},"content":{"rendered":"<div class=\"KonaBody\">\n<p class=\"first-child \"><em><a rel=\"attachment wp-att-10675\" href=\"http:\/\/www.androidguys.com\/2009\/11\/09\/return-of-the-fancy-listviews\/buildingdroids\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-10675\" title=\"BuildingDroids\" src=\"http:\/\/www.androidguys.com\/wp-content\/uploads\/BuildingDroids.jpg\" alt=\"\" width=\"225\" height=\"150\" \/><\/a>This is the first part of a several part series on handling multiple screen sizes in your Android projects. This material is adapted from a chapter in <a href=\"http:\/\/commonsware.com\/Android\/\">The Busy Coder&#8217;s Guide to Android Development, Version 3.0<\/a>.<\/em><\/p>\n<p>The simplest approach to handling multiple screen sizes in Android is to design your user interfaces such that they automatically scale for the screen size, without any size-specific code or resources. In other words, &#8220;it just works&#8221;.<\/p>\n<p>This implies, though, that everything you use in your user interface can be gracefully scaled by Android and that everything will fit, even on a QVGA screen.<\/p>\n<p>Here are some tips for achieving this &#8220;all in one&#8221; solution:<\/p>\n<h2>Don&#8217;t Think About Positions, Think About Rules<\/h2>\n<p>Some developers, perhaps those coming from the &#8220;drag-and-drop&#8221; school of UI development, think first and foremost about the positions of widgets. They think that they want certain widgets to be certain fixed sizes at certain fixed locations. They get frustrated with Android layout manager (containers) and may gravitate to the deprecated <span style=\"font-family: Consolas,courier;\">AbsoluteLayout<\/span> as a way to design UIs they way they used to.<\/p>\n<p>That rarely works well even on desktops, as can be seen by applications that do not handle window resizing very well. Similarly, it will not work on mobile devices, particularly Android, with its range of screen sizes and resolutions.<\/p>\n<p>Instead of thinking about positions, think about rules. You need to teach Android the &#8220;business rules&#8221; about where widgets should be sized and placed, with Android then interpreting those rules based upon what the device&#8217;s screen actually supports in terms of resolution.<\/p>\n<p>The simplest rules are the <span style=\"font-family: Consolas,courier;\">fill_parent<\/span> and <span style=\"font-family: Consolas,courier;\">wrap_content<\/span> values for <span style=\"font-family: Consolas,courier;\">android:layout_width<\/span> and <span style=\"font-family: Consolas,courier;\">android:layout_height<\/span>. Those do not specify specific sizes, but rather adapt to the space available.<\/p>\n<p>The richest environment for easily specifying rules is to use <span style=\"font-family: Consolas,courier;\">RelativeLayout<\/span>. While complicated on the surface, <span style=\"font-family: Consolas,courier;\">RelativeLayout<\/span> does an excellent job of letting you control your layout while still adapting it to other screen sizes. For example, you can:<\/p>\n<ul>\n<li>Explicitly \tanchor widgets to the bottom or right side of the screen, rather \tthan hoping they will wind up there courtesy of some other layout<\/li>\n<li>Control \tthe distances between widgets that are &#8220;connected&#8221; (e.g., \ta label for a field should be to the left of the field) without \thaving to rely on padding or margins<\/li>\n<\/ul>\n<p>The greatest control for specifying rules is to create your own layout class. For example, suppose you are creating a series of applications that implement card games. You may want to have a layout class that knows about playing cards: how they overlap, which are face up versus face down, how big to be to handle varying number of cards, etc. While you could achieve the desired look with, say, a <span style=\"font-family: Consolas,courier;\">RelativeLayout<\/span>, you may be better served implementing a <span style=\"font-family: Consolas,courier;\">PlayingCardLayout<\/span> or a <span style=\"font-family: Consolas,courier;\">HandOfCardsLayout<\/span> or something that is more explicitly tailored for your application. Unfortunately, creating custom layout classes is under-documented at this point in time.<\/p>\n<h2>Consider Physical Dimensions<\/h2>\n<p>Android offers a wide range of available units of measure for dimensions. The most popular has been the pixel (<span style=\"font-family: Consolas,courier;\">px<\/span>), because it is easy to &#8220;wrap your head around&#8221; the concept. After all, all Android devices will have screens with such-and-so number of pixels in each direction.<\/p>\n<p>However, pixels start to become troublesome as screen density changes. As the number of pixels in a given screen size increases, the pixels effectively shrink. A <span style=\"font-family: Consolas,courier;\">32px<\/span> icon on a traditional Android device might be finger-friendly, but on a high-density device (say, WVGA in a mobile phone form factor), <span style=\"font-family: Consolas,courier;\">32px<\/span> may be a bit small for use with a finger.<\/p>\n<p>If you have something intrinsically scalable (e.g., a <span style=\"font-family: Consolas,courier;\">Button<\/span>) where you had been specifying a size in pixels, you might consider switching to using millimeters (<span style=\"font-family: Consolas,courier;\">mm<\/span>) or inches (<span style=\"font-family: Consolas,courier;\">in<\/span>) as the unit of measure. <span style=\"font-family: Consolas,courier;\">10mm<\/span> is <span style=\"font-family: Consolas,courier;\">10mm<\/span> regardless of the screen resolution or the screen size. This way, you can ensure that your widget is sized to be finger-friendly, regardless of the number of pixels that might take.<\/p>\n<h2>Avoid &#8220;Real&#8221; Pixels<\/h2>\n<p>In some circumstance using millimeters for dimensions will not make sense. Then, you may wish to consider using other units of measure while still avoiding &#8220;real&#8221; pixels.<\/p>\n<p>Android offers dimensions measured in density-independent pixels (<span style=\"font-family: Consolas,courier;\">dip<\/span>). These map 1:1 to pixels for a 160dpi screen (e.g., a classic HVGA Android device) and scale from there. For example, on a 240dpi device (e.g., a phone-sized WVGA device), the ratio is 2:3, so <span style=\"font-family: Consolas,courier;\">50dip<\/span> =  at 160dpi = <span style=\"font-family: Consolas,courier;\">75px<\/span> at 240dpi. The advantage to the user of going with dip is that the actual size of the dimension stays the same, so visibly there is no difference between <span style=\"font-family: Consolas,courier;\">50dip<\/span> at 160dpi and <span style=\"font-family: Consolas,courier;\">50dip<\/span> at 240dpi.<\/p>\n<p>Android also offers dimensions measured in scaled pixels (<span style=\"font-family: Consolas,courier;\">sp<\/span>). Scaled pixels, in theory, are scaled based on the user&#8217;s choice of font size (<span style=\"font-family: Consolas,courier;\">FONT_SCALE<\/span> value in <span style=\"font-family: Consolas,courier;\">System.Settings<\/span>).<\/p>\n<h2>Choose Scalable Drawables<\/h2>\n<p>Classic bitmaps \u2014 PNG, JPG, GIF \u2014 are not intrinsically scalable. If you are not running in &#8220;compatibility mode&#8221;, Android will not even try to scale them for you based on screen resolution and size. Whatever size of bitmap you supply is the size it will be, even if that makes the image too large or too small on some screens.<\/p>\n<p>One way to address this is to try to avoid static bitmaps, using nine-patch bitmaps and XML-defined drawables (e.g., <span style=\"font-family: Consolas,courier;\">GradientDrawable<\/span>) as alternatives. A nine-patch bitmap is a PNG file specially encoded to have rules indicating how that image can be stretched to take up more space. XML-defined drawables use a quasi-SVG XML language to define shapes, their strokes and fills, and so on.<\/p>\n<p>The next post in the series will look at techniques for when the above techniques fail and you need to provide specific support for specific screen sizes and densities.<\/p>\n<\/div>\n<h3  class=\"related_post_title\">Might We Suggest&#8230;<\/h3>\n<ul class=\"related_post\">\n<li><a href=\"http:\/\/www.androidguys.com\/2010\/02\/16\/handling-multiple-screen-sizes-part\/\" title=\"Handling Multiple Screen Sizes, Part One\">Handling Multiple Screen Sizes, Part One<\/a><br \/><small>Learn how to handle multiple screen sizes within your Android project, in today&#8217;s part of an ongoing series of posts, in today&#8217;s episode of Building &#8216;Droids!&#8230;<\/small><\/li>\n<\/ul>\n<p><a href=\"http:\/\/feedads.g.doubleclick.net\/~a\/ITAaGKmUM3E3FuX2JbZPY9-5Esc\/0\/da\"><img decoding=\"async\" src=\"http:\/\/feedads.g.doubleclick.net\/~a\/ITAaGKmUM3E3FuX2JbZPY9-5Esc\/0\/di\" border=\"0\" ismap=\"true\"><\/img><\/a><br \/>\n<a href=\"http:\/\/feedads.g.doubleclick.net\/~a\/ITAaGKmUM3E3FuX2JbZPY9-5Esc\/1\/da\"><img decoding=\"async\" src=\"http:\/\/feedads.g.doubleclick.net\/~a\/ITAaGKmUM3E3FuX2JbZPY9-5Esc\/1\/di\" border=\"0\" ismap=\"true\"><\/img><\/a><\/p>\n<div class=\"feedflare\">\n<a href=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?a=9iit_4jQm2Q:Nx0BVgy0zss:D7DqB2pKExk\"><img decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?i=9iit_4jQm2Q:Nx0BVgy0zss:D7DqB2pKExk\" border=\"0\"><\/img><\/a> <a href=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?a=9iit_4jQm2Q:Nx0BVgy0zss:gIN9vFwOqvQ\"><img decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?i=9iit_4jQm2Q:Nx0BVgy0zss:gIN9vFwOqvQ\" border=\"0\"><\/img><\/a> <a href=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?a=9iit_4jQm2Q:Nx0BVgy0zss:yIl2AUoC8zA\"><img decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?d=yIl2AUoC8zA\" border=\"0\"><\/img><\/a> <a href=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?a=9iit_4jQm2Q:Nx0BVgy0zss:qj6IDK7rITs\"><img decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?d=qj6IDK7rITs\" border=\"0\"><\/img><\/a> <a href=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?a=9iit_4jQm2Q:Nx0BVgy0zss:6swKnRFnXgo\"><img decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~ff\/androidguyscom?i=9iit_4jQm2Q:Nx0BVgy0zss:6swKnRFnXgo\" border=\"0\"><\/img><\/a>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~r\/androidguyscom\/~4\/9iit_4jQm2Q\" height=\"1\" width=\"1\"\/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the first part of a several part series on handling multiple screen sizes in your Android projects. This material is adapted from a chapter in The Busy Coder&#8217;s Guide to Android Development, Version 3.0. The simplest approach to handling multiple screen sizes in Android is to design your user interfaces such that they [&hellip;]<\/p>\n","protected":false},"author":703,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-334762","post","type-post","status-publish","format-standard","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/posts\/334762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/users\/703"}],"replies":[{"embeddable":true,"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/comments?post=334762"}],"version-history":[{"count":0,"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/posts\/334762\/revisions"}],"wp:attachment":[{"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/media?parent=334762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/categories?post=334762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mereja.media\/index\/wp-json\/wp\/v2\/tags?post=334762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}