{"id":43468,"date":"2015-09-13T20:53:59","date_gmt":"2015-09-13T17:53:59","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=43468"},"modified":"2023-12-05T16:39:02","modified_gmt":"2023-12-05T14:39:02","slug":"android-ui-overview","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html","title":{"rendered":"Android UI Overview"},"content":{"rendered":"<p><em>This article is part of our Academy Course titled <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-design-basics.html\">Android UI Design \u2013 Basics<\/a>.<\/p>\n<p>In this course, you will get a look at the fundamentals of Android UI design. You will understand user input, views and layouts, as well as adapters and fragments. Check it out <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-design-basics.html\">here<\/a>!<\/em><\/p>\n<div class=\"toc\">\n<h4>Table Of Contents<\/h4>\n<dl>\n<dt><a href=\"#introduction\">1. Introduction<\/a><\/dt>\n<dt><a href=\"#appStructure\">2. Android App Structure and UI patterns<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#toplevel\">2.1. Top level view<\/a><\/dt>\n<dt><a href=\"#detailview\">2.2. Detail view<\/a><\/dt>\n<dt><a href=\"#actionbar\">2.3. Action Bar<\/a><\/dt>\n<dl>\n\t<\/dd>\n<dt><a href=\"#components\">3. Standard components<\/a><\/dt>\n<dt><a href=\"#multipleDeviceSupport\">4. Multiple devices support<\/a><\/dt>\n<\/dl>\n<\/div>\n<h2><a name=\"introduction\"><\/a>1. Introduction<\/h2>\n<p>Android is a widely used OS made for smart phones and tablets. It is an open source project led by Google and it is released under Apache License. This permissive license helped this OS to be widely adopted and allows the manufacturers to freely modify and customize it. As matter of fact, despite Android being designed for smartphones and tablets, it is also used in TVs, cameras and so on. Moreover, Android has a very large community that extend its features and creates apps that cover almost all aspects.<\/p>\n<p>All android applications, called apps, are built on Android UI framework. App interface is the first thing a user sees and interacts with. From the user perspective, this framework keeps the overall experience consistent for every app installed in our smartphone or tablets. At the same time, from the developer perspective, this framework provides some basic blocks that can be used to build complex and consistent user interface (API).<\/p>\n<p>Android UI interface is divided in three different areas:<\/p>\n<ul>\n<li><strong>Home screen<\/strong><\/li>\n<li><strong>All apps<\/strong><\/li>\n<li><strong>Recent screen<\/strong><\/li>\n<\/ul>\n<p>The <strong><em>home screen<\/em><\/strong> is the \u201clanding\u201d area when we power our phone on. This interface is highly customizable and themed. Using widgets we can create and personalize our \u201chome\u201d screen. <strong><em>All apps<\/em><\/strong> is the interface where the app installed are displayed, while <strong><em>recent screens<\/em><\/strong> are the list of last used apps.<\/p>\n<p>Since its born, Android has changed a lot in terms of its features and its interfaces. The growth of the smartphone power made possible creating ever more appealing apps.<\/p>\n<p>At the beginning, apps in Android did not have a consistent interface and well defined rules so every app had a different approach, navigation structure and buttons position. This caused user confusion and it was one of the most important missing features compared to the iOS.<\/p>\n<h2><a name=\"appStructure\"><\/a>2. Android App Structure and UI patterns<\/h2>\n<p>Android apps are very different from each other because they try to address different user needs. There are simple apps with a very simple UI that has just only one view and there are other apps much more complex with a very structured navigation and multiple views.<\/p>\n<p>In general, we can say an Android app is made by a <strong><em>top-level view<\/em><\/strong> and <strong><em>detail\/level view<\/em><\/strong>.<\/p>\n<p><figure id=\"attachment_2306\" aria-describedby=\"caption-attachment-2306\" style=\"width: 611px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/app_structure1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/app_structure1.png\" alt=\"Figure 1\" width=\"611\" height=\"441\" class=\"size-full wp-image-2306\" \/><\/a><figcaption id=\"caption-attachment-2306\" class=\"wp-caption-text\">Figure 1<\/figcaption><\/figure><\/p>\n<p>One of the biggest efforts made by Google was to define a well defined set of rules that helps developers to create appealing user interfaces. At the same time, these rules help users to navigate through every app in the same way. We call this <strong><em>UI consistency<\/em><\/strong>. Android, moreover, guarantees to the developers the required flexibility to customize the app look and feel and make it unique. These rules are known as UI patterns. Patterns are proven solution approaches to well known problems. Thus, having a well defined UI pattern catalog and knowing when and where apply them, we can create appealing apps that are not only full of interesting features but they are enjoyable by users and easy to use.<\/p>\n<h3><a name=\"toplevel\"><\/a>2.1. Top level view<\/h3>\n<p>As said, the top level view is the \u201clanding\u201d area of our app, so we have to reserve to it a special attention, because this is the first thing an user sees of our app. There are some specific patterns that can be applied when designing this view depending on the type of information we want to show:<\/p>\n<ul>\n<li><strong>Fixed tabs<\/strong><\/li>\n<li><strong>Spinner<\/strong><\/li>\n<li><strong>Navigation drawer<\/strong><\/li>\n<\/ul>\n<p>We have to choose one of them carefully depending on the nature of our app. We can use <strong><em>fixed tabs<\/em><\/strong> when we want to give to the user an overview of the different views present in our app, so that a user can switch easily between them to show different type of information. A typical example is a app that shows tech news: in this case we could use different tabs to group news like (\u2018Android\u2019,\u2019iOS\u2019, \u2018Games\u2019 and so on).<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p><strong><em>Spinner<\/em><\/strong> is used when we want to move directly to a specific view, this is the case of a calendar app when we can use spinner to go directly to a specific month.<\/p>\n<p>The <strong><em>navigation drawer<\/em><\/strong> is one of the newest patterns introduced by Google. This is a sliding menu, usually at the left side of the smartphone screen, that can be opened and closed by the user. This pattern can be used when we have a multiple top level view and we want to give to the user a fast access to one of them, or we want to give to the user the freedom to move to one low level view directly. This pattern replaces, somehow, an old pattern called dashboard widely used in the past. This pattern is simple a view where there are some big buttons\/icons to access to specific views\/app features.<\/p>\n<h3><a name=\"detailview\"><\/a>2.2. Detail view<\/h3>\n<p>The detail view is a low level view where a user can interact with data directly. It is used to show data and edit them. In this kind of view the layout plays an important role to make data well organized and structured. At this level, we can implement an efficient navigation to improve usability of our app. In fact, we can use swipe view pattern so that user can move between different detail views. Depending on the type of component we use to show detail information to the user, we can implement some low level patterns that simplify the user interaction with our app.<\/p>\n<h3><a name=\"actionbar\"><\/a>2.3. Action Bar<\/h3>\n<p>The action bar is relatively new in Android and was introduced in Android 3.0 (API level 11). It is a well known pattern that plays an important role. An action bar is a piece of the screen, usually at the top, that is persistent across multiple views. It provides some key functions:<\/p>\n<ul>\n<li><em>App branding: icon area<\/em><\/li>\n<li><em>Title area<\/em><\/li>\n<li><em>Key action area<\/em><\/li>\n<li><em>Menu area<\/em><\/li>\n<\/ul>\n<h2><a name=\"components\"><\/a>3. Standard components<\/h2>\n<p>How do we build an user interface? Android gives some key components that can be used to create user interface that follows the pattern we talked about before. All the Android user interface are built using these key components:<\/p>\n<ul>\n<li><strong><code>View<\/code><\/strong>: It is the base class for all visual components (control and widgets). All the controls present in an android app are derived from this class. A <code>View<\/code> is an object that draws something on a smartphone screen and enables an user to interact with it.<\/li>\n<li><strong><code>Viewgroup<\/code><\/strong>: A <code>ViewGroup<\/code> can contain one or more <code>Views<\/code> and defines how these <code>Views<\/code> are placed in the user interface (these are used along with Android Layout managers.<\/li>\n<li><strong><code>Fragments<\/code><\/strong>: Introduced from API level 11, this component encapsulates a single piece of UI interface. They are very useful when we have to create and optimize our app user interface for multiple devices or multiple screen size.<\/li>\n<li><strong><code>Activities<\/code><\/strong>: Usually an Android app consists of several activities that exchange data and information. An <code>Activity<\/code> takes care of creating the user interface.<\/li>\n<\/ul>\n<p>Moreover, Android provides several standard UI controls, Layout managers and widgets that we can use without much effort and with which we can create apps fast and simply.<\/p>\n<p>Furthermore, we can can extend them and create a custom control with a custom layout and behaviour. Using these four components and following the standard UI patterns we can create amazing apps that are \u201ceasy-to-use\u201d. There are some other aspects, anyway, we have to consider when building and coding an app, like themes, styles, images and so on, and those will be covered in the following articles.<\/p>\n<p>As said, Android provides some standard UI components that can be grouped in:<\/p>\n<ul>\n<li><strong><em>Tabs<\/em><\/strong><\/li>\n<li><strong><em>Spinners<\/em><\/strong><\/li>\n<li><strong><em>Pickers<\/em><\/strong><\/li>\n<li><strong><em>Lists<\/em><\/strong><\/li>\n<li><strong><em>Buttons<\/em><\/strong><\/li>\n<li><strong><em>Dialogs<\/em><\/strong><\/li>\n<li><strong><em>Grid lists<\/em><\/strong><\/li>\n<li><strong><em>TextFields<\/em><\/strong><\/li>\n<\/ul>\n<p>The figure below shows some Android custom components:<\/p>\n<p><figure id=\"attachment_2307\" aria-describedby=\"caption-attachment-2307\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/ui_components1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/ui_components1.png\" alt=\"Figure 2\" width=\"800\" height=\"600\" class=\"size-full wp-image-2307\" \/><\/a><figcaption id=\"caption-attachment-2307\" class=\"wp-caption-text\">Figure 2<\/figcaption><\/figure><\/p>\n<p>If we analyze in more detail an Android user interface, we can notice that it has an hierarchical structure where at the root there\u2019s a <code>ViewGroup<\/code>. A <code>ViewGroup<\/code> behaves like an invisible container where single views are placed following some rules. We can combine <code>ViewGroup<\/code> with <code>ViewGroup<\/code> to have more control on how views are located. We have to remember that more complex is the user interface more time the system requires to render it. Therefore, for better performance we should create simple UIs. Additionally, a clean interface helps user to have a better experience when using our app.<\/p>\n<p>A typical UI structure is shown below:<\/p>\n<p><figure id=\"attachment_2308\" aria-describedby=\"caption-attachment-2308\" style=\"width: 716px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/view_layout1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/view_layout1.png\" alt=\"Figure 3\" width=\"716\" height=\"450\" class=\"size-full wp-image-2308\" \/><\/a><figcaption id=\"caption-attachment-2308\" class=\"wp-caption-text\">Figure 3<\/figcaption><\/figure><\/p>\n<p>If we create a simple android app, using our IDE, we can verify the UI structure:<\/p>\n<p><figure id=\"attachment_2309\" aria-describedby=\"caption-attachment-2309\" style=\"width: 716px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_real_app1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/android_real_app1.png\" alt=\"Figure 4\" width=\"716\" height=\"705\" class=\"size-full wp-image-2309\" \/><\/a><figcaption id=\"caption-attachment-2309\" class=\"wp-caption-text\">Figure 4<\/figcaption><\/figure><\/p>\n<p>From the example above, we can notice that at the top of the hierarchy there is a <code>ViewGroup<\/code> (called <code>RelativeLayout<\/code>) and then there are a list of view child (controls and widgets).<\/p>\n<p>When we want to create an UI in Android we have to create some files in XML format. Android is very powerful from this point of view because we can \u201cdescribe\u201d our UI interface just in XML format. The OS will then convert it in a real code lines when we compile our app and create the apk. We will cover this topic in a later article where we will describe how we can code a real Android UI using layouts and so on.<br \/>\n[ulp id=&#8217;luHisu6VPL9Mt6IB&#8217;]<br \/>\n&nbsp;<\/p>\n<h2><a name=\"multipleDeviceSupport\"><\/a>4. Multiple devices support<\/h2>\n<p>As we know by now, Android is a widely used system by smartphones and tablets. It is installed on many devices and it is a great opportunity for developers because it is possible to reach a wide audience. On the other side, this large number of devices that use Android is a big challenge for every Android developer. To provide a great user experience, we have to take under account that our app can run on variety of devices with different screen resolutions and physical screen sizes.<\/p>\n<p>We have to consider that our app can run on a smartphone or on a tablet and we have to provide the same usability even if the differences in terms of screen resolution and size are big. Our app has to be so flexible that it can adapt its layout and controls depending on the device where it is installed on. Let&#8217;s suppose, for example, that we have an app that shows a list of items and when the user clicks on one of them, the app shows the item detail. It is a very common situation; if our app runs on a smartphone we need to have two screens one for the list and one for the details as shown below:<\/p>\n<p><figure id=\"attachment_2312\" aria-describedby=\"caption-attachment-2312\" style=\"width: 900px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/multiplescreen_smartphone2.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/multiplescreen_smartphone2.png\" alt=\"Figure 5\" width=\"900\" height=\"762\" class=\"size-full wp-image-2312\" \/><\/a><figcaption id=\"caption-attachment-2312\" class=\"wp-caption-text\">Figure 5<\/figcaption><\/figure><\/p>\n<p>while if our app runs on a tablet, it has to show the details on the same screen:<\/p>\n<p><figure id=\"attachment_2311\" aria-describedby=\"caption-attachment-2311\" style=\"width: 953px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/multiplescreen_tablet1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/multiplescreen_tablet1.png\" alt=\"Figure 6\" width=\"953\" height=\"611\" class=\"size-full wp-image-2311\" \/><\/a><figcaption id=\"caption-attachment-2311\" class=\"wp-caption-text\">Figure 6<\/figcaption><\/figure><\/p>\n<p>Even if the system tries its best to scale and resize our app so that it works on different screen sizes, we have to make our best effort to ensure that our app supports several screens. This is a big challenge and we can win it if we follow some guidelines.<\/p>\n<p>There are some key concepts we have to understand before coding our app:<\/p>\n<ul>\n<li><strong>Screen size<\/strong>: It is the physical screen or in other words, the real dimension of our device screen.<\/li>\n<li><strong>Density<\/strong>: It is the number of pixels in a given area. Usually we consider dot per inch (<em>dpi<\/em>). This is a measure of the screen quality.<\/li>\n<li><strong>Orientation<\/strong>: This is how the screen is oriented. It can be landscape or portrait.<\/li>\n<li><strong>Density independent pixel<\/strong>: This is a new pixel unit measure introduced by Android. It is called <em>dp<\/em>. One <em>dp<\/em> is equivalent at one pixel at 160dpi screen. We should use <em>dp<\/em> unit in our measures when creating UI, at the runtime the system takes care to convert it in real pixel.<\/li>\n<\/ul>\n<p>From the screen size point of view, Android groups the devices in four areas,<em>small, normal, large and extra large (xlarge)<\/em>, depending on the actual screen dimension expressed in inches. From the <em>dpi<\/em> point of view, on the other hand, we can group devices in: <em>ldpi (low dpi), mdpi (medium dpi), hdpi (high dpi), xhdpi (extra high dpi)<\/em> and lately <em>xxhdpi<\/em>. This is important when we use drawables (i.e bitmaps), because we have to create several images according to the different screen resolution.<\/p>\n<p>This categorization is reflected in our IDE (i.e. Eclipse or Android Studio), so if we look under the <code>res<\/code> directory we can find a structure like the one shown below:<\/p>\n<p><figure id=\"attachment_2340\" aria-describedby=\"caption-attachment-2340\" style=\"width: 284px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/res4.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/res4.png\" alt=\"Figure 7\" width=\"284\" height=\"262\" class=\"size-full wp-image-2340\" \/><\/a><figcaption id=\"caption-attachment-2340\" class=\"wp-caption-text\">Figure 7<\/figcaption><\/figure><\/p>\n<p>The best practices we have to follow are:<\/p>\n<ul>\n<li><em> Don\u2019t use fixed dimensions expressed in pixel, instead we should use dp.<\/em><\/li>\n<li><em>Provide several layout structures for different screen size, we can do it creating several layout files.<\/em><\/li>\n<li><em>Provide several bitmap with different resolution for different screen resolution. We can consider using 9-Patches-Drawables.<\/em><\/li>\n<\/ul>\n<p>Moreover, Android provides a resource qualifier mechanism that helps us to have more control on how the system select the resource. Usually we can use:<\/p>\n<p><strong>&lt;resource_name&gt;_&lt;qualifier&gt;<\/strong><\/p>\n<p>where the <strong>resource_name<\/strong> can be for example drawable or layout while the <strong>qualifier<\/strong> can be hdpi, large and so on. Look <a href=\"http:\/\/developer.android.com\/guide\/practices\/screens_support.html\">here<\/a> if you want to have more information.<\/p>\n<p>Even if we follow all the best practices to support multiple screen in our app, there might be some situations where they are not enough, especially when we want to support smartphones and tablets. In this case, Android has introduced the <code>Fragment<\/code> concept. <code>Fragments<\/code> are available since API 11 and there is a library to maintain the backward compatibility. We will cover these topics in the next articles. Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI design. You will understand user input, views and layouts, as well as adapters and fragments. Check it out here! Table Of Contents 1. Introduction 2. Android App &hellip;<\/p>\n","protected":false},"author":449,"featured_media":46,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-43468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android-core"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Android UI Overview - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Android UI Overview - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-13T17:53:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-05T14:39:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Francesco Azzola\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francesco Azzola\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html\"},\"author\":{\"name\":\"Francesco Azzola\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/1b8d9e567a8adf5007f58dc3674856da\"},\"headline\":\"Android UI Overview\",\"datePublished\":\"2015-09-13T17:53:59+00:00\",\"dateModified\":\"2023-12-05T14:39:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html\"},\"wordCount\":2313,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"articleSection\":[\"Android Core\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html\",\"name\":\"Android UI Overview - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"datePublished\":\"2015-09-13T17:53:59+00:00\",\"dateModified\":\"2023-12-05T14:39:02+00:00\",\"description\":\"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-overview.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Android\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/android\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Android Core\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/android\\\/android-core\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Android UI Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/1b8d9e567a8adf5007f58dc3674856da\",\"name\":\"Francesco Azzola\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g\",\"caption\":\"Francesco Azzola\"},\"description\":\"He's a senior software engineer with more than 15 yrs old experience in JEE architecture. He's SCEA certified (Sun Certified Enterprise Architect), SCWCD, SCJP. He is an android enthusiast and he has worked for long time in the mobile development field.\",\"sameAs\":[\"http:\\\/\\\/www.survivingwithandroid.com\\\/\",\"http:\\\/\\\/it.linkedin.com\\\/in\\\/francescoazzola\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/francesco-azzola\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Android UI Overview - Java Code Geeks","description":"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html","og_locale":"en_US","og_type":"article","og_title":"Android UI Overview - Java Code Geeks","og_description":"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI","og_url":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2015-09-13T17:53:59+00:00","article_modified_time":"2023-12-05T14:39:02+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","type":"image\/jpeg"}],"author":"Francesco Azzola","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Francesco Azzola","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html"},"author":{"name":"Francesco Azzola","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/1b8d9e567a8adf5007f58dc3674856da"},"headline":"Android UI Overview","datePublished":"2015-09-13T17:53:59+00:00","dateModified":"2023-12-05T14:39:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html"},"wordCount":2313,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","articleSection":["Android Core"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html","url":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html","name":"Android UI Overview - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","datePublished":"2015-09-13T17:53:59+00:00","dateModified":"2023-12-05T14:39:02+00:00","description":"This article is part of our Academy Course titled Android UI Design \u2013 Basics. In this course, you will get a look at the fundamentals of Android UI","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-overview.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Android","item":"https:\/\/www.javacodegeeks.com\/category\/android"},{"@type":"ListItem","position":3,"name":"Android Core","item":"https:\/\/www.javacodegeeks.com\/category\/android\/android-core"},{"@type":"ListItem","position":4,"name":"Android UI Overview"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/1b8d9e567a8adf5007f58dc3674856da","name":"Francesco Azzola","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8fcfaaab43642cae206ca07965b6b7adce348e00a1b9880392e5801b58cc326?s=96&d=mm&r=g","caption":"Francesco Azzola"},"description":"He's a senior software engineer with more than 15 yrs old experience in JEE architecture. He's SCEA certified (Sun Certified Enterprise Architect), SCWCD, SCJP. He is an android enthusiast and he has worked for long time in the mobile development field.","sameAs":["http:\/\/www.survivingwithandroid.com\/","http:\/\/it.linkedin.com\/in\/francescoazzola"],"url":"https:\/\/www.javacodegeeks.com\/author\/francesco-azzola"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/43468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/449"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=43468"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/43468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/46"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=43468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=43468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=43468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}