{"id":43498,"date":"2015-09-13T21:57:29","date_gmt":"2015-09-13T18:57:29","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=43498"},"modified":"2023-12-06T11:21:20","modified_gmt":"2023-12-06T09:21:20","slug":"android-ui-full-sample-app","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html","title":{"rendered":"Android UI: Full Sample App"},"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=\"#intro\">1. Introduction<\/a><\/dt>\n<dt><a href=\"#appstructure\">2. App structure<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#itemlist\">2.1. Item List with ListView and Object Model<\/a><\/dt>\n<dt><a href=\"#multidevice\">2.2. Multi-device support and layout considerations<\/a><\/dt>\n<dt><a href=\"#additem\">2.3. Add item user interface layout<\/a><\/dt>\n<dt><a href=\"#tagcolor\">2.4. Tag Color\/Priority Spinner<\/a><\/dt>\n<dt><a href=\"#picker\">2.5. Date and Time picker<\/a><\/dt>\n<dt><a href=\"#mainactivity\">2.6. Main Activity<\/a><\/dt>\n<dt><a href=\"#actionbar\">2.7. Action bar<\/a><\/dt>\n<\/dl>\n<\/dd>\n<dt><a href=\"#styleOfApp\">3. Styling the app<\/a><\/dt>\n<dt><a href=\"#conclusion\">4. Conclusion<\/a><\/dt>\n<dt><a href=\"#download\">5. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n<h2><a name=\"intro\"><\/a>1. Introduction<\/h2>\n<p>In this last article about Android UI, we will build an Android app that uses almost all the concepts we talked about in the previous articles. We talked about the most important aspects we need to consider when developing an Android app. We saw how to create a UI structure using layout managers and how we can place widgets; we described some best practices, we should use, while developing an app. Well, the app we will build will be based on the topics covered previously, so have another look at them to refresh your memory.<\/p>\n<p>As an example, we will build a <code>To Do app<\/code>: this is a simple app where we can add todo items and manage them. We will cover how to create the UI layout structure, how to add widgets so that we can show text messages to the user and how to accept user input. An important aspect we will consider is how to build an app that can be used on several devices with different screen size and resolutions. <\/p>\n<h2><a name=\"appstructure\"><\/a>2. App structure<\/h2>\n<p>Before digging into the code details, the first thing we should consider when building an app is making some sketches that help us to understand the app navigation and user interaction. There are several tools we can use, some of them are free. Moreover, these sketches help us to have an idea how our app will look like and we could show them to our customers so that they can realize if the app we want to build respects their needs.<\/p>\n<p>Coming back to our To do app, we can image we have these requirements we have to satisfy:<\/p>\n<ul>\n<li><em>There should be a list of items (to do items).<\/em> <\/li>\n<li><em>A user can add an item to the existing ones. <\/em><\/li>\n<li><em>Items should have a priority color.<\/em> <\/li>\n<li><em>The app should run on smart phone and tablets.<\/em> <\/li>\n<\/ul>\n<p>In a real app, the requirements will be much more complex of course, but this is just a stepping stone. We can imagine a simple navigation like this one:<\/p>\n<p><figure id=\"attachment_2759\" aria-describedby=\"caption-attachment-2759\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/List-items1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/List-items1.png\" alt=\"Figure 1\" width=\"400\" height=\"772\" class=\"size-full wp-image-2759\" \/><\/a><figcaption id=\"caption-attachment-2759\" class=\"wp-caption-text\">Figure 1<\/figcaption><\/figure><br \/>\n<figure id=\"attachment_2760\" aria-describedby=\"caption-attachment-2760\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/Add-item1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/Add-item1.png\" alt=\"Figure 2\" width=\"400\" height=\"772\" class=\"size-full wp-image-2760\" \/><\/a><figcaption id=\"caption-attachment-2760\" class=\"wp-caption-text\">Figure 2<\/figcaption><\/figure><\/p>\n<p>This is a very simple navigation: at the start up, the app shows the current items list and when the user clicks on &#8220;Add Item&#8221; on the action bar. the app will show the add item screen. To keep things simple and get focused on the UI aspects we can suppose that the app will not save the items. It could be an interesting exercise for the reader to extend the app so that it saves the items.<\/p>\n<p>Now that we roughly know what the navigation will be and how the app user interface will look, we can start creating our app using our IDE. In this case we will use Eclipse + ADT. We create a new Android project that we can call <code>Todo<\/code>. We will not cover how to create an Android project using Eclipse so we assume you are already familiar with this IDE. Check out our <a href=\"www.javacodegeeks.com\/2012\/12\/android-hello-world-example-how-to-develop-android-apps.html\">&#8220;Android Hello World&#8221; example<\/a> if you are not familiar with the process.<\/p>\n<h3><a name=\"itemlist\"><\/a>2.1. Item List with ListView and Object Model<\/h3>\n<p>Now we have our project structure, we can focus our mind on designing the model that stands behind the app. In this case the model is very simple, it is just a class that holds the information about a new todo item:<\/p>\n<pre class=\"brush:java\">\npublic class Item implements Serializable {\n\tprivate String name;\t\n\tprivate String descr;\n\tprivate Date date;\n\tprivate String note;\n\tprivate TagEnum tag;\n            \/\/ Set and get methods\n}\n<\/pre>\n<p>This will be the basic class that we will handle in our app. Looking at the Android project, we have just created, we can notice that under the layout directory there is a default layout called <code>activity_main.xml<\/code>. This is the default layout created by the tool.<\/p>\n<p>By now we can suppose we have just a list of items in this layout: this layout will be used just for smart phone and we will consider later when the app runs on a tablet. The list item layout is very simple, it is just built by a standard <code>ListView<\/code> widget:<\/p>\n<pre class=\"brush:xml\">\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\n    tools:context=\".MainActivity\" &gt;\n\n    &lt;ListView\n        android:id=\"@+id\/listItmes\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\" \/&gt;\n\n&lt;\/RelativeLayout&gt;\n<\/pre>\n<p>If you notice, we instructed Android to use just the space necessary to hold the items in the list. We know that to use a <code>ListView<\/code> we have to implement an adapter. We could use a standard adapter provided by Android, but in this case these standard adapters are not enough, we want to implement a custom adapter because we would like to show some information for each row in the list. We would like that a row in the list looks like:<\/p>\n<p><figure id=\"attachment_2767\" aria-describedby=\"caption-attachment-2767\" style=\"width: 454px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/item_row_layout11.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/item_row_layout11.png\" alt=\"Figure 3\" width=\"454\" height=\"152\" class=\"size-full wp-image-2767\" \/><\/a><figcaption id=\"caption-attachment-2767\" class=\"wp-caption-text\">Figure 3<\/figcaption><\/figure><\/p>\n<p>As you can notice, each row has an image on the left side that represents the todo priority and some information. By now we do not consider applying any style to our rows. To have a row in our <code>ListView<\/code> like that, we have to create a row layout that we will use in our custom adapter. So we can create a new file called <code>item_layout.xml<\/code> under <code>layout<\/code> directory. This file looks like this:<\/p>\n<pre class=\"brush:xml\">\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\" &gt;\n\n    &lt;ImageView\n        android:id=\"@+id\/tagView\"\n        android:layout_width=\"30dp\"\n        android:layout_height=\"20dp\"\n        android:background=\"@color\/red\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/nameView\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentTop=\"true\"\n        android:layout_toRightOf=\"@id\/tagView\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/descrView\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_below=\"@id\/nameView\"\n        android:layout_toRightOf=\"@id\/tagView\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/dateView\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentBottom=\"true\"\n        android:layout_alignParentRight=\"true\" \/&gt;\n\n&lt;\/RelativeLayout&gt;\n<\/pre>\n<p>In this layout, we use a <a href=\"http:\/\/developer.android.com\/reference\/android\/widget\/RelativeLayout.html\"><code>RelativeLayout<\/code><\/a> manager to place easily  widgets where we want. As you can see in this layout manager, views are placed according to other view positions. For example we want our todo name to be placed just after the image, so we use the attribute:<\/p>\n<pre class=\"brush:xml\">\n android:layout_toRightOf=\"@id\/tagView\"\n<\/pre>\n<p>Moreover, we can place views respect to the parent, for example we want that the date information will be placed on the right side of the row and at the bottom:<\/p>\n<pre class=\"brush:xml\">\nandroid:layout_alignParentRight=\"true\"\nandroid:layout_alignParentBottom=\"true\"\n<\/pre>\n<p>Now that we have the layout, we have to build the adapter. We will extend an <a href=\"http:\/\/developer.android.com\/reference\/android\/widget\/ArrayAdapter.html\"><code>ArrayAdapter<\/code><\/a> and override some methods so we can handle our model data and the new layout. We call this adapter <code>ToDoItemAdaper<\/code>, so we have:<\/p>\n<pre class=\"brush:java\">\npublic class ToDoItemAdapter extends ArrayAdapter&lt;Item&gt; {\n\tprivate Context ctx;\n\tprivate List&lt;Item&gt; itemList; \n\tpublic ToDoItemAdapter(Context context, List&lt;Item&gt; itemList) {\n\t\tsuper(context, R.layout.item_layout);\n\t\tthis.ctx = context;\n\t\tthis.itemList = itemList;\n\t}\n}\n<\/pre>\n<p>The constructor receives the <a href=\"http:\/\/developer.android.com\/reference\/android\/content\/Context.html\"><code>Context<\/code><\/a> and the <code>itemList<\/code> as parameters, the last one param holds the todo item list. You can notice that when we call the super method, we pass out custom layout called <code>R.layout.item_layout<\/code>. Now we have to override one of the most important method called <code>getView<\/code>, used to create the <code>View<\/code> and render the row layout:<\/p>\n<pre class=\"brush:java\">\n\t@Override\n\tpublic View getView(int position, View convertView, ViewGroup parent) {\n\t\tView v = convertView;\n\t\tItemHolder h = null;\n\t\tif (v == null) {\n\t\t\t\/\/ Inflate row layout\n\t\t\tLayoutInflater inf = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);\n\t\t\tv = inf.inflate(R.layout.item_layout, parent, false);\n\t\t\t\/\/ Look for Views in the layout\n\t\t\tImageView iv = (ImageView) v.findViewById(R.id.tagView);\n\t\t\tTextView nameTv = (TextView) v.findViewById(R.id.nameView);\n\t\t\tTextView descrView = (TextView) v.findViewById(R.id.descrView);\n\t\t\tTextView dateView = (TextView) v.findViewById(R.id.dateView);\n\t\t\th = new ItemHolder();\n\t\t\th.tagView = iv;\n\t\t\th.nameView = nameTv;\n\t\t\th.descrView = descrView;\n\t\t\th.dateView = dateView;\n\t\t\tv.setTag(h);\n\t\t}\n\t\telse\t\t\n\t\t   h = (ItemHolder) v.getTag();\n\n\t\th.nameView.setText(itemList.get(position).getName());\t\t\n\t\th.descrView.setText(itemList.get(position).getDescr());\n\t\th.tagView.setBackgroundResource(itemList.get(position).getTag().getTagColor());\n\t\th.dateView.setText(sdf.format(itemList.get(position).getDate()));\n\t\t\n\t\treturn v;\n\t}\n<\/pre>\n<p>In this method, we check at the beginning if the View we receive as parameter is null. In this case, we have to inflate our layout. If you notice, we used the <code>ViewHolder<\/code> pattern to make the <code>ListView<\/code> scrolling smoother. We have created a small inner class called <code>ItemHolder<\/code> that holds the references to the <code>View<\/code> inside our custom layout:<\/p>\n<pre class=\"brush:java\">\n\/\/ ViewHolder pattern\nstatic class ItemHolder {\n\tImageView tagView;\n\tTextView nameView;\n\tTextView descrView;\n\tTextView dateView;\t\t\n}\n<\/pre>\n<p>One thing you should notice is how we handled the background color of the <a href=\"http:\/\/developer.android.com\/reference\/android\/widget\/ImageView.html\"><code>ImageView<\/code><\/a>. We used <a href=\"http:\/\/developer.android.com\/reference\/android\/view\/View.html#setBackgroundResource%28int%29\"><code>setBackgroundResource<\/code><\/a> to set the <code>imageview<\/code> background. This method accepts an int representing the resource id we want to use as background:<\/p>\n<pre class=\"brush:java\">\nh.tagView.setBackgroundResource(itemList.get(position).getTag().getTagColor());\n<\/pre>\n<p>Looking at our model class we can notice that the <code>getTag()<\/code> method returns an instance of <code>TagEnum<\/code> class. This is an enumeration defined in this way:<\/p>\n<pre class=\"brush:java\">\npublic enum TagEnum {\n\tBLACK(R.color.black,\"Black\"), RED(R.color.red, \"Red\"), \n\tGREEN(R.color.green, \"Green\"), BLUE(R.color.blue, \"Blue\"),YELLOW(R.color.yellow,\"Yellow\");\n\tprivate int code;\n\tprivate String name;\n\tprivate TagEnum(int code, String name) {\n\t\tthis.code = code;\n\t\tthis.name = name;\n\t}\n\tpublic int getTagColor() {\n\t\treturn this.code;\n\t}\n}\n<\/pre>\n<p>In the enumeration  we define the different colors we want to support and as first parameter we pass a resource id. If you remember in a <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-themes-and-styles.html\">previous article<\/a> we talked about how to define resource color in XML format. We know, already, we have to create a XML file under <code>res\/values<\/code> that we can call <code>colors.xml<\/code>:<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<pre class=\"brush:xml\">\n&lt;resources&gt;\n\n    &lt;color name=\"red\" &gt;#FF0000\n    &lt;\/color&gt;\n\n    &lt;color name=\"green\" &gt;#00FF00\n    &lt;\/color&gt;\n\n    &lt;color name=\"blue\" &gt;#0000FF\n    &lt;\/color&gt;\n\n    &lt;color name=\"black\" &gt;#000000\n    &lt;\/color&gt;\n\n    &lt;color name=\"yellow\" &gt;#FFAA00\n    &lt;\/color&gt;\n\n&lt;\/resources&gt;\n<\/pre>\n<p>In the enumeration color definition we referenced this color using <code>R.color.color_name<\/code>, so that when we use <code>getTagColor<\/code> method in the custom adapter <code>getView<\/code>, we receive the resource id that will be used by the image background. An important aspect to understand is that we did not hard-code the colors in the constructor: for example, we could use directly the color hex code like #FF0000 for red and so on. <\/p>\n<p>Even if the result would be the same, it is not recommended to use hard-coded values in the source code. For example, if we want to change the red color to another one, we will have to find the hex color in the source code and change it, but if we had used resources to define colors, we would go directly to the file holding the color definitions and change the color we like.<\/p>\n<p>Notice that in the enumeration, we used a bad practice: we wrote directly the color name. We used it purposely to show to you something you should not do. In this case, if we want to support multi-language app, we have to change the way we initialize the enumeration using name written in a string resource file.<\/p>\n<h3><a name=\"multidevice\"><\/a>2.2. Multi-device support and layout considerations<\/h3>\n<p>Remember that one of our requirements is that we have to build an app that supports both smart phones and tablets. Thinking about tablet screen dimensions, we realize that the screen is too big to hold just a list of items, so we could consider splitting the screen in two areas: one that holds the list and another one that we can use to show item details or even to show the user interface to add a new item. This is true if we use tablets, but if we have a smart phone the screen dimensions are not big enough to be divided in two areas. <\/p>\n<p>At the same time, we do not want to develop two different code branches: one for smart phone and one for tablet. We would rewrite the same code changing just some details and dimensions. Android helps us to solve this problem: we talked about <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/Fragment.html\"><code>Fragment<\/code><\/a> in a <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-layouts-with-view-groups-and-fragments.html\">previous article<\/a>. So we could create a fragment that handles the user interface to add a new item to the list. A fragment encapsulates a set of components and activity behaviors so that we can reuse this piece of code in different activities. The figures below depict the situation we have to handle:<\/p>\n<p><figure id=\"attachment_2761\" aria-describedby=\"caption-attachment-2761\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/smartphnone_fragment1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/smartphnone_fragment1.png\" alt=\"Figure 4\" width=\"1024\" height=\"768\" class=\"size-full wp-image-2761\" \/><\/a><figcaption id=\"caption-attachment-2761\" class=\"wp-caption-text\">Figure 4<\/figcaption><\/figure><br \/>\n<figure id=\"attachment_2762\" aria-describedby=\"caption-attachment-2762\" style=\"width: 960px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/tablet_fragment1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/tablet_fragment1.png\" alt=\"Figure 5\" width=\"960\" height=\"622\" class=\"size-full wp-image-2762\" \/><\/a><figcaption id=\"caption-attachment-2762\" class=\"wp-caption-text\">Figure 5<\/figcaption><\/figure><\/p>\n<p>When the app runs in a smart phone we have to handle two activities one for the list item and another that handles the user input, while in a tablet we can have only one activity.<\/p>\n<p>We can suppose that the screen size is at least 600dp so we want to split the screen in a different areas and we define a new layout under <code>res\/layout-sw600dp<\/code>:<\/p>\n<pre class=\"brush:xml\">\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\n    tools:context=\".MainActivity\" &gt;\n\n    &lt;ListView\n        android:id=\"@+id\/listItmes\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_weight=\"1\" \/&gt;\n\n    &lt;FrameLayout\n        android:id=\"@+id\/frm1\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_weight=\"1\" \/&gt;\n\n&lt;\/LinearLayout&gt;\n<\/pre>\n<p>where the <code>FrameLayout<\/code> will be \u201cfilled\u201d dynamically depending on the navigation flow. <\/p>\n<p>Of course, we can customize the layout in more details, according to the different screen sizes. In this case, we can simply create different layouts in different directories under res.<\/p>\n<h3><a name=\"additem\"><\/a>2.3. Add item user interface layout<\/h3>\n<p>If we run the app we have as a result an empty list with no items. We have to create a new user interface. So keeping in mind the considerations we made before, we create a <code>Fragment<\/code> that handles the add item functionality, calling it as <code>NewItemFragment<\/code>. A fragment has a complex life cycle but for this purpose we can override just <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/Fragment.html#onCreateView%28android.view.LayoutInflater,%20android.view.ViewGroup,%20android.os.Bundle%29\"><code>onCreateView<\/code><\/a> method. This method is responsible for creating the user interface. As always, we have to create the layout first. In our IDE under <code>res\/layout<\/code> we create another xml file that we call <code>add_item_layout.xml<\/code>:<\/p>\n<pre class=\"brush:xml\">\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\" &gt;\n\n    &lt;TextView\n        android:id=\"@+id\/txtTitle\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_centerHorizontal=\"true\"\n        android:text=\"@string\/addItem\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/itemName\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_below=\"@id\/txtTitle\"\n        android:layout_marginStart=\"10dp\"\n        android:text=\"@string\/addItemName\" \/&gt;\n\n    &lt;EditText\n        android:id=\"@+id\/edtName\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/itemName\"\n        android:hint=\"@string\/addItemNameHint\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/itemDescr\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/edtName\"\n        android:layout_marginTop=\"10dp\"\n        android:text=\"@string\/addItemDescr\" \/&gt;\n\n    &lt;EditText\n        android:id=\"@+id\/edtDescr\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/itemDescr\"\n        android:hint=\"@string\/addItemDescrHint\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/itemNote\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/edtDescr\"\n        android:layout_marginTop=\"10dp\"\n        android:text=\"@string\/addItemNote\" \/&gt;\n\n    &lt;EditText\n        android:id=\"@+id\/edtNote\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/itemNote\"\n        android:hint=\"@string\/addItemNoteHint\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/itemDate\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/edtNote\"\n        android:layout_marginTop=\"10dp\"\n        android:text=\"@string\/addItemDate\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/inDate\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/itemDate\"\n        android:layout_marginTop=\"10dp\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/itemTime\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/inDate\"\n        android:layout_marginTop=\"10dp\"\n        android:text=\"@string\/addItemTime\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/inTime\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/itemTime\"\n        android:layout_marginTop=\"10dp\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/itemTag\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/inTime\"\n        android:layout_marginTop=\"10dp\"\n        android:text=\"@string\/addItemTag\" \/&gt;\n\n    &lt;Spinner\n        android:id=\"@+id\/tagSpinner\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentLeft=\"true\"\n        android:layout_below=\"@id\/itemTag\" \/&gt;\n\n    &lt;!-- ADD button --&gt;\n\n    &lt;Button\n        android:id=\"@+id\/addBtn\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignParentBottom=\"true\"\n        android:layout_centerHorizontal=\"true\"\n        android:text=\"@string\/addButton\" \/&gt;\n\n&lt;\/RelativeLayout&gt;\n<\/pre>\n<p>It is a very simple layout made by <a href=\"http:\/\/developer.android.com\/reference\/android\/widget\/TextView.html\"><code>TextView<\/code><\/a> and <a href=\"http:\/\/developer.android.com\/reference\/android\/widget\/EditText.html\"><code>EditText<\/code><\/a>: the first one is used to show text messages on the user interface and the other one is used to accept user inputs. There are two components that are important in this layout: the <a href=\"http:\/\/developer.android.com\/reference\/android\/widget\/Spinner.html\"><code>Spinner<\/code><\/a> and the <code>Date\/Time picker<\/code>. <\/p>\n<p>A <strong>spinner<\/strong> is a UI component that shows only one item at time and lets the user to select one item among them. We use this component to show different tag colors\/priorities. It suits perfectly our purpose, in fact we want the user to select one color among a color list.<\/p>\n<h3><a name=\"tagcolor\"><\/a>2.4. Tag Color\/Priority Spinner<\/h3>\n<p>To work correctly, a <code>Spinner<\/code> needs an array adapter behind it. Android provides a list of adapters we can use, but we want to customize them because we want to show an image with a color. Then, we have to create a custom adapter in the same way we did for the <code>ListView<\/code>. First we create the row layout called <code>spinner_tag_layout.xml<\/code>:<\/p>\n<pre class=\"brush:xml\">\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\" &gt;\n\n    &lt;ImageView\n        android:id=\"@+id\/tagSpinnerImage\"\n        android:layout_width=\"30dp\"\n        android:layout_height=\"20dp\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tagNameSpinner\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_toRightOf=\"@id\/tagSpinnerImage\" \/&gt;\n\n&lt;\/RelativeLayout&gt;\n<\/pre>\n<p>and finally we create our adapter:<\/p>\n<pre class=\"brush:java\">\npublic class TagSpinnerAdapter extends ArrayAdapter&lt;TagEnum&gt; {\n\n\tprivate Context ctx;\n\tprivate List&lt;TagEnum&gt; tagList;\n\t\n\tpublic TagSpinnerAdapter(Context ctx, List&lt;TagEnum&gt; tagList) {\n\t\tsuper(ctx, R.layout.spinner_tag_layout);\n\t\tthis.ctx = ctx;\n\t\tthis.tagList = tagList;\n\t}\n\n\t\n\t@Override\n\tpublic View getDropDownView(int position, View convertView, ViewGroup parent) {\n\t\treturn _getView(position, convertView, parent);\n\t}\n\n\t@Override\n\tpublic View getView(int position, View convertView, ViewGroup parent) {\n\t\treturn _getView(position, convertView, parent);\n\t}\n\n\tprivate View _getView(int position, View convertView, ViewGroup parent) {\n\t\tView v = convertView;\n\t\tif (v == null) {\n\t\t\t\/\/ Inflate spinner layout\n\t\t\tLayoutInflater inf = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);\n\t\t\tv = inf.inflate(R.layout.spinner_tag_layout, parent, false);\n\t\t}\n\t\t\n\t\t\/\/ We should use ViewHolder pattern\n\t\tImageView iv = (ImageView) v.findViewById(R.id.tagSpinnerImage);\n\t\tTextView tv = (TextView) v.findViewById(R.id.tagNameSpinner);\n\t\t\n\t\tTagEnum t = tagList.get(position);\n\t\tiv.setBackgroundResource(t.getTagColor());\n\t\ttv.setText(t.getName());\n\t\treturn v;\n\t}\n\n}\n<\/pre>\n<p>Analyzing the code above, we notice that this adapter handles <code>TagEnum<\/code> objects and we override two methods <code>getView<\/code> and <code>getDropDownView<\/code>. We handle these methods in the same way. As you can notice we did almost the same things already done for the ListView. <\/p>\n<p>In the fragment that holds this UI components, we have to find the reference to the <code>Spinner<\/code> and set the custom layout we defined above:<\/p>\n<pre class=\"brush:java\">\nSpinner sp = (Spinner) v.findViewById(R.id.tagSpinner);\nTagSpinnerAdapter tsa = new TagSpinnerAdapter(getActivity(), tagList);\nsp.setAdapter(tsa);\n<\/pre>\n<p>When user selects one item in the <code>Spinner<\/code>, we have to find a way to know which one item was selected. <\/p>\n<p>As you remember, we can use listener to be informed when some events occur in a component. In this case we are interested on item selection event, so we create a listener for it:<\/p>\n<pre class=\"brush:java\">\nsp.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {\n\t@Override\n\tpublic void onItemSelected(AdapterView&lt;?&gt; adptView, View view,\n\t\tint pos, long id) {\n\t\tcurrentTag = (TagEnum) adptView.getItemAtPosition(pos);\n\t}\n\n\t@Override\n\tpublic void onNothingSelected(AdapterView&lt;?&gt; arg0) {\n\t\t\/\/ TODO Auto-generated method stub\n\t\t\t\t\n\t\t}\n\t});\n<\/pre>\n<p>and we store the result in a class attribute.<br \/>\n[ulp id=&#8217;luHisu6VPL9Mt6IB&#8217;]<br \/>\n&nbsp;<\/p>\n<h3><a name=\"picker\"><\/a>2.5. Date and Time picker<\/h3>\n<p>When we add a new todo item to the list, we want the user to select the date and the time. Android provides two components called <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/DatePickerDialog.html\"><code>DatePickerDialog<\/code><\/a> and <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/TimePickerDialog.html\"><code>TimePickerDialog<\/code><\/a>. As the name implies, these are two dialogs that can be opened to select the date and the time.<\/p>\n<p>We are using fragments so we have to create two inner class that present to the user the date and time pickers. In this case we extend for both pickers the <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/DialogFragment.html\"><code>DialogFragment<\/code><\/a> class and override the <code>onCreateDialog<\/code> method. In this method, we simply initialize the <code>Date<\/code> picker and return it as result:<\/p>\n<pre class=\"brush:java\">\npublic static class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {\n\t@Override\n\t    public Dialog onCreateDialog(Bundle savedInstanceState) {\n\t        \/\/ Use the current date as the default date in the picker\n\t        final Calendar c = Calendar.getInstance();\n\t        c.setTime(selDate);\n\t        int year = c.get(Calendar.YEAR);\n\t        int month = c.get(Calendar.MONTH);\n\t        int day = c.get(Calendar.DAY_OF_MONTH);\n\n\t        \/\/ Create a new instance of DatePickerDialog and return it\n\t        return new DatePickerDialog(getActivity(), this, year, month, day);\n\t    }\n\t\t\n\t@Override\n\tpublic void onDateSet(DatePicker view, int year, int monthOfYear,\n\t\t\t\tint dayOfMonth) {\n\t\t\t\n\t\tCalendar c = Calendar.getInstance();\n\t\tc.set(year, monthOfYear, dayOfMonth, 9, 0);\n\t\tselDate = c.getTime();\n\t\ttvDate.setText(sdfDate.format(selDate));\n\t}\n}\n<\/pre>\n<p>From the code above you can notice that we simply set the current date to the <code>DatePickerDialog<\/code> in the <code>onCreateDialog<\/code>. We implement the <code>DatePickerDialog.OnDateSetListener<\/code> to be notified when user selects the date. In the callback method of this interface we simply store the date selected by the user. <\/p>\n<p>In the same way, we handle the <code>TimePickerFragment<\/code>, but in this case we extend <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/TimePickerDialog.html\"><code>TimePickerDialog<\/code><\/a>:<\/p>\n<pre class=\"brush:java\">\npublic static class TimePickerFragment extends DialogFragment implements TimePickerDialog.OnTimeSetListener {\n\t@Override\n\t public Dialog onCreateDialog(Bundle savedInstanceState) {\n\t        \/\/ Use the current date as the default date in the picker\n\t        final Calendar c = Calendar.getInstance();\n\t        c.setTime(selDate);\n\t        int hour = c.get(Calendar.HOUR_OF_DAY);\n\t        int minute = c.get(Calendar.MINUTE);\n\t    \/\/ Create a new instance of TimePickerDialog and return it\n\t     return new TimePickerDialog(getActivity(), this, hour, minute,\n\t\t                DateFormat.is24HourFormat(getActivity()));\n            }\n\n          @Override\n          public void onTimeSet(TimePicker view, int hourOfDay, int minute) {\n\t\tCalendar c = Calendar.getInstance();\n\t\tc.setTime(selDate);\n\t\tc.set(Calendar.HOUR_OF_DAY, hourOfDay);\n\t\tc.set(Calendar.MINUTE, minute);\t\n\t\tselDate = c.getTime();\n\t\t\/\/ We set the hour\n\t\ttvTime.setText(sdfTime.format(selDate));\n\t}\n}\n<\/pre>\n<p>These are two dialogs that they do not appear by themselves, but we have to check if the user clicks on a date\/time textview to open these dialogs, so we have:<\/p>\n<pre class=\"brush:java\">\ntvDate = (TextView) v.findViewById(R.id.inDate);\ntvTime = (TextView) v.findViewById(R.id.inTime);\n<\/pre>\n<p>to get the reference to the <code>TextView<\/code> and then we have simply implement a listener:<\/p>\n<pre class=\"brush:java\">\ntvDate.setOnClickListener(new View.OnClickListener() {\n\t@Override\n\tpublic void onClick(View v) {\n\t\tDatePickerFragment dpf = new DatePickerFragment();\n\t\tdpf.show(getFragmentManager(), \"datepicker\");\n\t}\n});\n<\/pre>\n<p>As result we have:<\/p>\n<p><figure id=\"attachment_2763\" aria-describedby=\"caption-attachment-2763\" style=\"width: 453px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/datepicker1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/datepicker1.png\" alt=\"Figure 6\" width=\"453\" height=\"432\" class=\"size-full wp-image-2763\" \/><\/a><figcaption id=\"caption-attachment-2763\" class=\"wp-caption-text\">Figure 6<\/figcaption><\/figure><\/p>\n<p>The last part in developing this fragment is dedicated to handling the event when the user clicks on the add button. When this event occurs, the fragment should create an instance of Item class holding the data inserted by user and send it back to the activity that holds the fragment. The best practice suggests to use an interface and callback methods.<\/p>\n<p>We can define this interface in the fragment class:<\/p>\n<pre class=\"brush:java\">\npublic interface AddItemListener {\n\tpublic void onAddItem(Item item);\n}\n<\/pre>\n<p>It is a very simple interface made by just only one method. Now we have:<\/p>\n<pre class=\"brush:java\">\nButton addBtn = (Button) v.findViewById(R.id.addBtn);\naddBtn.setOnClickListener(new View.OnClickListener() {\n\t@Override\n\tpublic void onClick(View v) {\n\t\t\/\/ We retrieve data inserted\n\t\tItem i = new Item();\n\t\ti.setName(edtName.getText().toString());\n\t\ti.setDescr(edtDescr.getText().toString());\n\t\ti.setNote(edtNote.getText().toString());\n\t\ti.setTag(currentTag);\n\t\ti.setDate(selDate);\n\t\t\/\/ Safe cast\n\t\t( (AddItemListener) getActivity()).onAddItem(i);\n\t}\n});\n<\/pre>\n<p>By using an interface we decouple the fragment from the activity that holds it and this will be very useful as we will see later.<\/p>\n<p>Coming back to the note made regarding smart phones and tablets and remembering the picture shown above, we know that if the app runs in a smart phone we have to use two activities so we create another one called <code>NewItemActivity<\/code> that will hold the fragment described above. This activity is very simple because it acts as a fragment container.<\/p>\n<pre class=\"brush:java\">\npublic class NewItemActivity extends Activity implements NewItemFragment.AddItemListener{\n\t@Override\n\tprotected void onCreate(Bundle savedInstanceState) {\n\t\tsuper.onCreate(savedInstanceState);\n\t\tNewItemFragment nif = new NewItemFragment();\n\t\tgetFragmentManager().beginTransaction().add(android.R.id.content, nif).commit();\n\t}\n\n\t@Override\n\tpublic void onAddItem(Item item) {\n\t\t\/\/ We get the item and return to the main activity\n\t\tLog.d(\"TODO\", \"onAddItem\");\n\t\tIntent i = new Intent();\n\t\ti.putExtra(\"item\", item);\n\t\tsetResult(RESULT_OK,i);\n\t\tfinish();\n\t}\n}\n<\/pre>\n<p>In the <code>onCreate<\/code> method, we create a new instance of our fragment class and the using <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/FragmentManager.html\"><code>FragmentManager<\/code><\/a> we show the fragment on the screen.<\/p>\n<p>Notice that this activity implements the interface defined in the fragment because it has to be notified when the user wants to add a new item, so it implements the <code>onAddItem<\/code> method. We will cover the functionality of this method later.<\/p>\n<h3><a name=\"mainactivity\"><\/a>2.6. Main Activity<\/h3>\n<p>The main activity is the heart of the app, it is the activity that is called at the start up. It sets up the initial layout and shows the item list that we previously described:<\/p>\n<pre class=\"brush:java\">\nitemListView = (ListView) findViewById(R.id.listItmes);\nadpt = new ToDoItemAdapter(this, itemList);\nitemListView.setAdapter(adpt);\n<\/pre>\n<p>Now we have to check if our app runs on a smart phone or a tablet so that we can change the activity behavior. We can do it by verifying if there is a <code>FrameLayout<\/code> component in the layout definition:<\/p>\n<pre class=\"brush:java\">\nif (findViewById(R.id.frm1) != null) \n   isTablet = true;\n<\/pre>\n<h3><a name=\"actionbar\"><\/a>2.7. Action bar<\/h3>\n<p>In this activity we add a action bar (a well-known Android pattern) with an action: add new item. To define it, we create (if not exists) a XML file under <code>res\/menu<\/code>:<\/p>\n<pre class=\"brush:xml\">\n&lt;menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\" &gt;\n\n    &lt;item\n        android:id=\"@+id\/action_add\"\n        android:icon=\"@android:drawable\/ic_menu_add\"\n        android:orderInCategory=\"0\"\n        android:showAsAction=\"always\"\/&gt;\n\n&lt;\/menu&gt;\n<\/pre>\n<p>As a result we obtain:<\/p>\n<p><figure id=\"attachment_2768\" aria-describedby=\"caption-attachment-2768\" style=\"width: 514px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/action_bar1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/action_bar1.png\" alt=\"Figure 7\" width=\"514\" height=\"207\" class=\"size-full wp-image-2768\" \/><\/a><figcaption id=\"caption-attachment-2768\" class=\"wp-caption-text\">Figure 7<\/figcaption><\/figure><\/p>\n<p>As a user clicks on the plus sign, we should show the user interface for adding a new item. The first thing we have to handle is the event when user clicks on &#8216;plus&#8217; icon so we have to override a method in the activity class:<\/p>\n<pre class=\"brush:java\">\n@Override\npublic boolean onOptionsItemSelected(MenuItem item) {\n\tint menuId = item.getItemId();\n\tswitch (menuId) {\n\t\tcase R.id.action_add: {\n\t\t\tif (!isTablet) {\n\t\t\t\tIntent i = new Intent(this, NewItemActivity.class);\n\t\t\t\tstartActivityForResult(i, ADD_ITEM);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tLog.d(\"TODO\", \"Tablet\");\n\t\t\t\tFragmentTransaction ft = getFragmentManager().beginTransaction();\n\t\t\t\tNewItemFragment nif = new NewItemFragment();\n\t\t\t\tft.replace(R.id.frm1, nif);\n\t\t\t\tft.commit();\n\t\t\t}\n\t\t}\n\t}\n}\n<\/pre>\n<p>This method is very important because we define how our activity should behave. If the button clicked by the user is our add button, we first verify if our app is running on a smart phone. In this case, we know we have to start another activity and we start it waiting for a result. <\/p>\n<p>If we start an activity waiting for its result in the called activity we should return the result and we do it in the <code>NewItemActivity<\/code> in this way:<\/p>\n<pre class=\"brush:java\">\n@Override\npublic void onAddItem(Item item) {\n\t\/\/ We get the item and return to the main activity\n\tLog.d(\"TODO\", \"onAddItem\");\n\tIntent i = new Intent();\n\ti.putExtra(\"item\", item);\n\tsetResult(RESULT_OK,i);\n\tfinish();\n}\n<\/pre>\n<p>In this method we create an Intent that holds the result and pass it back to the calling activity (<code>MainActivity<\/code>) and we finish the activity. In the <code>MainActivity<\/code>, then, we have to be ready to handle the result:<\/p>\n<pre class=\"brush:java\">\nprotected void onActivityResult(int requestCode, int resultCode, Intent data) {\n\tLog.d(\"TODO\", \"OnResult\");\n\tif (requestCode == ADD_ITEM) {\n\t\tif (resultCode == RESULT_OK) {\n\t\t\tLog.d(\"TODO\", \"OK\");\n\t\t\tItem i = (Item) data.getExtras().getSerializable(\"item\");\n\t\t\titemList.add(i);\n\t\t\tadpt.notifyDataSetChanged();\n\t\t}\n\t}\n}\n<\/pre>\n<p>In this activity we extract the item object stored inside the <code>Intent<\/code> that we receive as result and add it to the item list. When we finish we call <code>notifyDataSetChange<\/code> method so that the <code>ListView<\/code> can be updated.<\/p>\n<p>If our app is running on a tablet we simply \u201cfill\u201d the <code>FrameLayout<\/code> with the <code>NewItemFragment<\/code> described above. In this case we start a transaction and replace the <code>FrameLayout<\/code> with the fragment and at the end we commit the transaction. In this case, we do not need to start another activity because we use the <code>FrameLayout<\/code> to show the fragment that handles the user interface for adding a new item. So we have:<\/p>\n<p><figure id=\"attachment_2765\" aria-describedby=\"caption-attachment-2765\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/tablet_add_item1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/tablet_add_item1.png\" alt=\"Figure 8\" width=\"800\" height=\"1280\" class=\"size-full wp-image-2765\" \/><\/a><figcaption id=\"caption-attachment-2765\" class=\"wp-caption-text\">Figure 8<\/figcaption><\/figure><\/p>\n<p>In this case, we have to simply implement the interface specified by the fragment as we did before:<\/p>\n<pre class=\"brush:java\">\n@Override\npublic void onAddItem(Item item) {\n\titemList.add(item);\n\tadpt.notifyDataSetChanged();\n\tNewItemFragment nif = (NewItemFragment) getFragmentManager().findFragmentById(R.id.frm1);\n\tgetFragmentManager().beginTransaction().remove(nif).commit();\n}\n<\/pre>\n<p>Notice in the last part that we removed the fragment at the end.<\/p>\n<h2><a name=\"styleOfApp\"><\/a>3. Styling the app<\/h2>\n<p>By now we have not considered the application&#8217;s style, but we know we can apply style to every UI component. We can modify all the UI colors and looks, implementing our style and branding the app. For example we want to apply a style to the listView row making them a little more appealing. We create (if it does not already exist), a file called <code>style.xml<\/code> under <code>res\/values<\/code> and here we can define our style as we discussed in a <a href=\"http:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-themes-and-styles.html\">previous article<\/a>:<\/p>\n<pre class=\"brush:xml\">\n&lt;style name=\"dateStyle\"&gt;\n        &lt;item name=\"android:textAppearance\"&gt;?android:textAppearanceSmall&lt;\/item&gt;\n        &lt;item name=\"android:textColor\"&gt;@color\/red&lt;\/item&gt;\n    &lt;\/style&gt;\n\n     &lt;style name=\"descrStyle\"&gt;\n        &lt;item name=\"android:textStyle\"&gt;italic&lt;\/item&gt;\n        &lt;item name=\"android:textAppearance\"&gt;?android:textAppearanceSmall&lt;\/item&gt;\n    &lt;\/style&gt;\n    \n     &lt;style name=\"nameStyle\"&gt;\n         &lt;item name=\"android:textAppearance\"&gt;?android:textAppearanceMedium&lt;\/item&gt;\n         &lt;item name=\"android:textStyle\"&gt;bold&lt;\/item&gt;\n     &lt;\/style&gt;\n<\/pre>\n<p>We defined three different styles and we want to apply them to our listview row:<\/p>\n<pre class=\"brush:xml\">\n&lt;TextView\n    android:id=\"@+id\/nameView\"\n    style=\"@style\/nameStyle\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_alignParentTop=\"true\"\n    android:layout_toRightOf=\"@id\/tagView\" \/&gt;\n&lt;TextView\n    android:id=\"@+id\/descrView\"\n    style=\"@style\/descrStyle\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_below=\"@id\/nameView\"\n    android:layout_toRightOf=\"@id\/tagView\" \/&gt;\n&lt;TextView\n    android:id=\"@+id\/dateView\"\n    style=\"@style\/dateStyle\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_alignParentBottom=\"true\"\n    android:layout_alignParentRight=\"true\" \/&gt;\n\n<\/pre>\n<p>Running the app with this style we have:<\/p>\n<p><figure id=\"attachment_2764\" aria-describedby=\"caption-attachment-2764\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/app_style1.png\"><img decoding=\"async\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/app_style1.png\" alt=\"Figure 9\" width=\"768\" height=\"1280\" class=\"size-full wp-image-2764\" \/><\/a><figcaption id=\"caption-attachment-2764\" class=\"wp-caption-text\">Figure 9<\/figcaption><\/figure><\/p>\n<h2><a name=\"conclusion\"><\/a>4. Conclusion<\/h2>\n<p>In this Android UI course we covered some important UI aspects, concepts and best practices we should follow when developing an Android app. In this last article we saw how to apply all this knowledge to build a real app using all the topics covered in the previous articles. Of course, this simple app can be improved and you can have it as an exercise to try to add new functionalities. For example, we did not cover how to modify or delete the items in the list. In this case we could listen when a user clicks on an item and you could show a menu with several options, or we could use the action bar changing it according to the user actions. For example we could create a multiple selection list view and when user clicks on \u201ctrash\u201d icon in the action bar we remove all the items selected.<\/p>\n<p>There are different aspects we can improve in this app and it will be a good exercise if you want to go deeper in Android development aspects.<\/p>\n<h2><a name=\"download\"><\/a>5. Download the Source Code<\/h2>\n<p>This was a lesson on how to create an Android app UI from scratch. You may download the source code here: <a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/09\/6.-ToDO.zip\">AndroidApp.zip<\/a><\/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. App structure &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-43498","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: Full Sample App - 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-full-sample-app.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Android UI: Full Sample App - 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-full-sample-app.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-13T18:57:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-06T09:21:20+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=\"17 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-full-sample-app.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.html\"},\"author\":{\"name\":\"Francesco Azzola\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/1b8d9e567a8adf5007f58dc3674856da\"},\"headline\":\"Android UI: Full Sample App\",\"datePublished\":\"2015-09-13T18:57:29+00:00\",\"dateModified\":\"2023-12-06T09:21:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.html\"},\"wordCount\":3373,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.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-full-sample-app.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.html\",\"name\":\"Android UI: Full Sample App - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/android-logo.jpg\",\"datePublished\":\"2015-09-13T18:57:29+00:00\",\"dateModified\":\"2023-12-06T09:21:20+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-full-sample-app.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2015\\\/09\\\/android-ui-full-sample-app.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-full-sample-app.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: Full Sample App\"}]},{\"@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: Full Sample App - 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-full-sample-app.html","og_locale":"en_US","og_type":"article","og_title":"Android UI: Full Sample App - 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-full-sample-app.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2015-09-13T18:57:29+00:00","article_modified_time":"2023-12-06T09:21:20+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":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html"},"author":{"name":"Francesco Azzola","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/1b8d9e567a8adf5007f58dc3674856da"},"headline":"Android UI: Full Sample App","datePublished":"2015-09-13T18:57:29+00:00","dateModified":"2023-12-06T09:21:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html"},"wordCount":3373,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.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-full-sample-app.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html","url":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html","name":"Android UI: Full Sample App - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/android-logo.jpg","datePublished":"2015-09-13T18:57:29+00:00","dateModified":"2023-12-06T09:21:20+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-full-sample-app.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2015\/09\/android-ui-full-sample-app.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-full-sample-app.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: Full Sample App"}]},{"@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\/43498","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=43498"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/43498\/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=43498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=43498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=43498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}