tag:blogger.com,1999:blog-29168261415505761802024-03-16T11:52:46.524-07:00Android(meda)Anything on AndroidDimuthuhttp://www.blogger.com/profile/14112312266389635163noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-2916826141550576180.post-38318508516886568852012-02-18T19:10:00.000-08:002012-02-18T19:15:48.807-08:00Tutorial: Theming an Android AppIn my last blog post (<a href="http://android-meda.blogspot.com/2012/02/tutorial-using-layouts-in-your-android.html">Tutorial: Using Layouts in your Android App</a>), I showed how to arrange UI widgets in an Android app using different types of layouts. In this blog post I will show how to change the look and feel of an app using custom widget designs. We will continue using the same app we used in the <a href="http://android-meda.blogspot.com/2012/02/tutorial-using-layouts-in-your-android.html">early tutorial</a> - BMI Calculator.<br />
<br />
Here is the look and feel of the app before and after applying our custom theme.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-jO42-1lcNo5YKWmyLh-CXYmKq91hJIPR_zO-ZilYvZX6PeQP_NO8H9V__JIQMSU7wCE1ALMOe-ahe-tfnmfYZknccFfXX7luBtDnRI6ga9AHJotqx3RDrxjMJLFaY77ujVhGvOICqU/s1600/screenshot2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-jO42-1lcNo5YKWmyLh-CXYmKq91hJIPR_zO-ZilYvZX6PeQP_NO8H9V__JIQMSU7wCE1ALMOe-ahe-tfnmfYZknccFfXX7luBtDnRI6ga9AHJotqx3RDrxjMJLFaY77ujVhGvOICqU/s320/screenshot2.png" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Before Applying the Theme</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-gnjQtsiTtqUp-33Aid3zcNuuzeQFyGIU2oxeqxtKGoyj4Nky36x3IuKQFPfjEFj55u2jy2s1d9PodkqqNqRNQhPmDqopjKUFcBLx6uFs_oP5ZLu0sWnYjzIkrFqAGZHSyM4CtC3RD4/s1600/screenshot4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-gnjQtsiTtqUp-33Aid3zcNuuzeQFyGIU2oxeqxtKGoyj4Nky36x3IuKQFPfjEFj55u2jy2s1d9PodkqqNqRNQhPmDqopjKUFcBLx6uFs_oP5ZLu0sWnYjzIkrFqAGZHSyM4CtC3RD4/s320/screenshot4.png" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">After Applying the Theme</td></tr>
</tbody></table>
<br />
You can see we have changed the background colors, added a custom title bar, and changed the theme of widgets. We have already talked about changing the background color. So here I will show you how to add a custom title bar and how to change the theme of widgets.<br />
<br />
You can use the following links to download the eclipse project and the android app that we are creating in this tutorial.<br />
<br />
<table border="1px solid">
<tbody>
<tr>
<td>Download the eclipse project files (zipped)
</td>
<td><a href="https://sites.google.com/site/androidmedablogger/files/com.blogger.android.meda.bmicalculator-version2.1.zip?attredirects=0&d=1">com.blogger.android.meda.bmicalculator-version2.1.zip</a>
</td>
</tr>
<tr>
<td>Access the Source code from github
</td>
<td><a href="https://github.com/androidmeda-blogger/Androidmeda-Blog/tree/6d72d3a30c019167f86891b6eff159c8c9019121" target="_blank">github repo</a>
</td>
</tr>
<tr>
<td>Download the free BMI Calculator app (the latest version) from the Android Market.
</td>
<td><a href="http://market.android.com/details?id=com.blogger.android.meda.bmicalculator" target="_blank">
<img alt="Available in Android Market" src="http://www.android.com/images/brand/45_avail_market_logo2.png" />
</a>
</td>
</tr>
</tbody></table>
<br />
<br />
<b>Adding a custom Title bar</b><br />
<br />
Before adding a custom title bar, we will remove the default title bar added for our application. This can be easily done by modifying the AndroidManifest.xml in the root directory of the eclipse project. (Have a look at the underlined attribute of the activity element in the following code)<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><manifest</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #000066;">package</span>=<span style="color: red;">"com.blogger.android.meda.bmicalculator"</span>
<span style="color: #000066;">android:versionCode</span>=<span style="color: red;">"6"</span>
<span style="color: #000066;">android:versionName</span>=<span style="color: red;">"2.1"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><uses-sdk</span> <span style="color: #000066;">android:minSdkVersion</span>=<span style="color: red;">"4"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><application</span>
<span style="color: #000066;">android:icon</span>=<span style="color: red;">"@drawable/ic_launcher"</span>
<span style="color: #000066;">android:label</span>=<span style="color: red;">"@string/app_name"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><activity</span>
<span style="color: #000066;">android:label</span>=<span style="color: red;">"@string/app_name"</span>
<span style="color: #000066;">android:name</span>=<span style="color: red;">".BMICalculatorActivity"</span>
<span style="color: #000066;">android:screenOrientation</span>=<span style="color: red;">"portrait"</span>
<u><span style="color: #000066;">android:theme</span>=<span style="color: red;">"@android:style/Theme.Black.NoTitleBar"</span></u><span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><intent-filter</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><action</span> <span style="color: #000066;">android:name</span>=<span style="color: red;">"android.intent.action.MAIN"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><category</span> <span style="color: #000066;">android:name</span>=<span style="color: red;">"android.intent.category.LAUNCHER"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></intent-filter<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></activity<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></application<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></manifest<span style="color: black; font-weight: bold;">></span></span></span>
</pre>
Next we add a new linear layout at the top (just after the root linearLayout element) of the res/layout/main.xml file. And inside the layout we will add the project icon and the title.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"> <span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:background</span>=<span style="color: red;">"@color/colorBG"</span></u> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><ImageView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/test_image"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"8dip"</span>
<u><span style="color: #000066;">android:src</span>=<span style="color: red;">"@drawable/ic_launcher"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView0"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginBottom</span>=<span style="color: red;">"4dip"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"15dip"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"9dip"</span>
<u><span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/app_name"</span></u>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceLarge"</span>
<span style="color: #000066;">android:textColor</span>=<span style="color: red;">"@color/colorFonts"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
<br />
Here the ImageView contain the icon that is shown in the title bar. It is same as the launcher icon in this case (See how to add a launcher icon for the app by following this tutorial, <a href="http://android-meda.blogspot.com/2012/01/create-launcher-icon-for-your-android.html">Create Launcher Icon For Your Android App</a>). In the second text view, we show the string "@string/app_name", which is defined in the "res/values/strings.xml" as "BMI Calculator". And the background of the title bar is set by adding the backgroud attribute to the "@color/colorBG" which is again defined in the strings.xml.<br />
<br />
These steps would give you the following design to the title of the BMI Calculator App.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRI_BJm6T7pdHlN35FRf4fTkW0IeDEZHvZ8fAI2KPEEGvGf8qTnF5_HMaRSg1fxfAY1d0Fas-lj3NoGiU8y5KL_bDY76AKdGPtzBM6qaUcW2dCZr5sN5cyFpw4HDW98AAZOLoYbA5XhvU/s1600/titlebar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRI_BJm6T7pdHlN35FRf4fTkW0IeDEZHvZ8fAI2KPEEGvGf8qTnF5_HMaRSg1fxfAY1d0Fas-lj3NoGiU8y5KL_bDY76AKdGPtzBM6qaUcW2dCZr5sN5cyFpw4HDW98AAZOLoYbA5XhvU/s320/titlebar.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Custom Title bar</td></tr>
</tbody></table>
<br />
<br />
<b>Theming the Widgets</b><br />
<br />
To get a custom look and feeling for buttons, we can provide custom images for the different states of the button. We will prepare images for the following states of the button.<br />
<ul>
<li>Normal: When the button is neither pressed nor focussed.</li>
<li>Pressed: When the button is pressed.</li>
<li>Focused: When the button is in focus. Normally this state occurs, when a user select and jump between buttons using array keys in their phone.</li>
</ul>
Since we have Button and Spinner widgets, we have to create different images for each of these widget types. Not only that, I thought it is better to have different images for two kind of Spinner widgets. Spinners that show the units (in right corner) only have one downward arrow, where as the spinners show the numbers would have two arrow signs.<br />
<br />
To prepare the images in photoshop, I started with 50X40 size image, added a rounded rectangle shape, and styled it with bevel and emboss. Here is the set of images I could come up with. (I think they are not that good looking, but just enough for our work).<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3sVZUzgiyWEjHutB5axPoSi9gDASlMIzulcZIbJGWvV2Qb6g0hx2wfuXX3tXxxfHsfhMw_JYxye_UcT0RGttOY4AhqkeAhCZl3IvQXoCGAPue_vIvTYRlfUNNRYWSe32lIRXcwwkZ40/s1600/images.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3sVZUzgiyWEjHutB5axPoSi9gDASlMIzulcZIbJGWvV2Qb6g0hx2wfuXX3tXxxfHsfhMw_JYxye_UcT0RGttOY4AhqkeAhCZl3IvQXoCGAPue_vIvTYRlfUNNRYWSe32lIRXcwwkZ40/s400/images.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Set of Images used in theming Widgets</td></tr>
</tbody></table>
<br />
<b>Drawing 9-Patch Images</b><br />
<br />
Before applying these images for the widgets, we should convert them in to a format called <a href="http://developer.android.com/guide/developing/tools/draw9patch.html">9-patch images</a>. This was necessary because with the different sizes of widgets (and different screen sizes of android phones/tablets), the images may stretch giving a unhandy look.<br />
<br />
With the 9-patch format, we can control the stretching by specifying which part should be repeated when the image is stretched. For example in the onesided_spinner_normal.png shown above, we can specify not to stretch the arrow sign part, while stretching the button.<br />
<br />
Additionally in 9-patch format, we can specify in which section in the image the text/content should be shown. For example this is useful in images like onesided_spinner_normal.png. When we apply it to a button, we want the text of the button to not cover its arrow sign.<br />
<br />
To create 9-patch images, android SDK provide 9-patch image editor. You can find it in tools/draw9patch (tools/draw9patch.exe) in the android SDK directory.<br />
Lets run the draw9patch editor and open the "onesided_spinner_normal.png" that we prepared earlier.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAoEnftBrek6AcwG_3NgVDSdI8Cbz_aszp61XONqQIaoNgreSR1G0RbCLevu4FWwHBZO0pATY_2cdZvHpaledue2G2SrIswhu8rLa-wm57Oly6kqOc8UifxyjFMzzQESIkJWuQBoywIz4/s1600/draw9patch1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAoEnftBrek6AcwG_3NgVDSdI8Cbz_aszp61XONqQIaoNgreSR1G0RbCLevu4FWwHBZO0pATY_2cdZvHpaledue2G2SrIswhu8rLa-wm57Oly6kqOc8UifxyjFMzzQESIkJWuQBoywIz4/s400/draw9patch1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">draw9patch editor</td><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
You can see the image is opened in the left side panel. The right hand side panel shows the different looks it will get when it is stretched vertically, horizontally, and diagonally. Here what we do is put some patches (just by clicking) in the border of the image (in the left side panel) as shown below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQPvkRO-4tFBSXRsFyfd0-ufKTgPvYRIG1WZrhRVdWygqttw0Tl7-i10tvdIHBrEEf__A6tUuKH6UrJyTcrWrNdxnUacvgQbdarIBIKSLxgAo0glnSnRbzJdt3XVEpj4mwTHj4Dx1aoU/s1600/draw9patch2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQPvkRO-4tFBSXRsFyfd0-ufKTgPvYRIG1WZrhRVdWygqttw0Tl7-i10tvdIHBrEEf__A6tUuKH6UrJyTcrWrNdxnUacvgQbdarIBIKSLxgAo0glnSnRbzJdt3XVEpj4mwTHj4Dx1aoU/s400/draw9patch2.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Making 9-patch Image (red and blue arrows are added for clarity)</td></tr>
</tbody></table>
Patches shown in red arrows (top and left borders) are to say that the image should be stretched only in these sections. For example there is only one patch in the top border. That mean when the image is stretched horizontally, the line of pixel below the patch would be repeated and non of the other pixels will be repeated. And the patches in the left border, make sure the arrow sign and the circle will not be stretched. You can see the sample stretched images in the right hand side panel after our patches are applied.<br />
<br />
The blue arrows in the above screenshot (bottom and right borders) shows the patches that indicate which part should contain the text (or any other content) of the widget. (Note the patches in the bottom border; we make sure the content will not appear near the arrow sign)<br />
<br />
When we save the image, the editor will add 9.png (in this case onesided_spinner_normal.9.png) as the extension of the image. This extension is used by android UI to identify 9-patch images and stretched accordingly. We will convert all the prepared images to 9-patch format.<br />
<br />
Copy all the 9-patch images to the res/drawable directory of the project.<br />
<br />
<b>Applying Styles to Widgets</b><br />
<br />
To specify the images corresponding to different states (normal, pressed, focussed) of the button widget, we will create an xml called bmi_button.xml with the following content.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><selector</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span><span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <span style="color: #000066;">android:state_focused</span>=<span style="color: red;">"true"</span>
<span style="color: #000066;">android:state_pressed</span>=<span style="color: red;">"false"</span>
<u><span style="color: #000066;">android:drawable</span>=<span style="color: red;">"@drawable/button_focused"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <span style="color: #000066;">android:state_focused</span>=<span style="color: red;">"true"</span>
<span style="color: #000066;">android:state_pressed</span>=<span style="color: red;">"true"</span>
<u><span style="color: #000066;">android:drawable</span>=<span style="color: red;">"@drawable/button_pressed"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <span style="color: #000066;">android:state_focused</span>=<span style="color: red;">"false"</span>
<span style="color: #000066;">android:state_pressed</span>=<span style="color: red;">"true"</span>
<u><span style="color: #000066;">android:drawable</span>=<span style="color: red;">"@drawable/button_pressed"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <u><span style="color: #000066;">android:drawable</span>=<span style="color: red;">"@drawable/button_normal"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></selector<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
Here the "@drawable/button_focused" refers to the button_focused.9.png file in the res/drawable directory.<br />
<br />
Similar to button, we would prepare two more XML files called bmi_onesided_spinner.xml and bmi_twosided_spinner.xml for each of the spinner types. (The content would be the same as above except the drawable attribute should refer to the corresponding 9-patch images). <br />
<br />
Next we have to set the style XMLs we have created here as the backgroud of the widgets. This is simply done by changing or adding the backgroud attribute to the widgets in main.xml (The UI XML). Here is the updated section of the main.xml. (The changes are underlined.)<br />
<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"> <span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableLayout1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/weightLabel"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"2"</span>
<u><span style="color: #000066;">android:background</span>=<span style="color: red;">"@drawable/bmi_twosided_spinner"</span></u>
<span style="color: #000066;">android:prompt</span>=<span style="color: red;">"@string/weightLabel"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"1"</span>
<u><span style="color: #000066;">android:background</span>=<span style="color: red;">"@drawable/bmi_onesided_spinner"</span></u>
<span style="color: #000066;">android:drawSelectorOnTop</span>=<span style="color: red;">"true"</span>
<span style="color: #000066;">android:entries</span>=<span style="color: red;">"@array/weightUnitsArray"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/heightLabel"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner3"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"2"</span>
<u><span style="color: #000066;">android:background</span>=<span style="color: red;">"@drawable/bmi_twosided_spinner"</span></u>
<span style="color: #000066;">android:prompt</span>=<span style="color: red;">"@string/heightLabel"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><RelativeLayout</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"1"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:background</span>=<span style="color: red;">"@drawable/bmi_onesided_spinner"</span></u>
<span style="color: #000066;">android:entries</span>=<span style="color: red;">"@array/heightUnitsArray"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Button</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/button1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_alignRight</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_below</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span>
<u><span style="color: #000066;">android:background</span>=<span style="color: red;">"@drawable/bmi_button"</span></u>
<span style="color: #000066;">android:onClick</span>=<span style="color: red;">"calculateClickHandler"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/calculateButton"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></RelativeLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
Here the "@drawable/bmi_button" refers to the bmi_button.xml in the res/drawable directory that we prepared earlier.<br />
<br />
That is all you have to do. Now run the app in your phone and check the new look and feel.
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-gnjQtsiTtqUp-33Aid3zcNuuzeQFyGIU2oxeqxtKGoyj4Nky36x3IuKQFPfjEFj55u2jy2s1d9PodkqqNqRNQhPmDqopjKUFcBLx6uFs_oP5ZLu0sWnYjzIkrFqAGZHSyM4CtC3RD4/s1600/screenshot4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-gnjQtsiTtqUp-33Aid3zcNuuzeQFyGIU2oxeqxtKGoyj4Nky36x3IuKQFPfjEFj55u2jy2s1d9PodkqqNqRNQhPmDqopjKUFcBLx6uFs_oP5ZLu0sWnYjzIkrFqAGZHSyM4CtC3RD4/s320/screenshot4.png" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">New Look and Feel of the app</td></tr>
</tbody></table>
<br />Android(meda) Bloggerhttp://www.blogger.com/profile/17511014932858390956noreply@blogger.com35tag:blogger.com,1999:blog-2916826141550576180.post-25347017549055097952012-02-11T21:05:00.000-08:002012-02-18T19:14:22.091-08:00Tutorial: Using Layouts in your Android AppThis tutorial is to present you how to organise the UI of an android app using layouts. By this time I assume you have a basic idea on how to write a simple app in android. If you have not written a simple app yet, you better follow this blog post first, <a href="http://android-meda.blogspot.com/2012/01/writing-your-first-android-app-body.html">Writing Your First Android App - Body Mass Index Calculator </a> and then come back here.<br />
<br />
In this tutorial, we would be writing a better looking BMI Calculator. For that I'm using the same eclipse project, used in my <a href="http://android-meda.blogspot.com/2012/01/writing-your-first-android-app-body.html">early post on BMI Calculator.</a> But you can follow this tutorial by creating a new project, as we are making this new BMI Calculator from scratch.<br />
<br />
To give a heads up, here is the final UI we are going to create for our App.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgj9MPMvopFqPJ6hU0TqfNkWqQ503jbsqHQPTaFO21FTzGaGpAFk6axBgubOt2bk4_yUTc8UD4IkV0xuF_jdvRxXkOM4cPvnnmlRn1hN2kI7GknjJuDvjH-zU-gtv-ptvB9-o6DkJ0mSc/s1600/screenshot1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgj9MPMvopFqPJ6hU0TqfNkWqQ503jbsqHQPTaFO21FTzGaGpAFk6axBgubOt2bk4_yUTc8UD4IkV0xuF_jdvRxXkOM4cPvnnmlRn1hN2kI7GknjJuDvjH-zU-gtv-ptvB9-o6DkJ0mSc/s320/screenshot1.png" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The layout of the target Application</td></tr>
</tbody></table>
While creating this simple UI, we would be using several layouts available in Android API.<br />
<br />
To learn layout, we would be using the XML editor more than the WYSIWYG (Graphical Layout) editor in our eclipse project. To switch the editors you can go to the GUI file, that is res/layou/main.xml in your project, and click the tabs named 'Graphical Layout' to go to WYSIWYG editor and the 'main.xml' to got the XML editor as shown below.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFMujhz-6O1XilgJmRTKZrmXV_U6PBA9IG7QRAwRs9Hvv3VgjFPr4ibzmSTKfU0j8ECA6U_TR3Lqf8dQEVP0LFWA5qtpAoztdaBwVyCOCku3JC_SQlH2W9FQ7RiEit3Qbi-PQQJsnYd1E/s1600/editors.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFMujhz-6O1XilgJmRTKZrmXV_U6PBA9IG7QRAwRs9Hvv3VgjFPr4ibzmSTKfU0j8ECA6U_TR3Lqf8dQEVP0LFWA5qtpAoztdaBwVyCOCku3JC_SQlH2W9FQ7RiEit3Qbi-PQQJsnYd1E/s400/editors.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Switching between Graphical Layout(WYSIWYG) and XML edtors</td></tr>
</tbody></table>
<br />
In the main.xml, you can see the form widgets in your UI, represented as an XML.The names of the XML element, such as TextView and EditText, are the names of the widgets. Each element has properties like layout_width, layout_height represented there as attributes in XML.<br />
<br />
layout_width and layout_height defines the width and the height of the widget. It can get either exact value or a relative value based on its content or container. For example, possible values layout_width can get are,<br />
<ul>
<li>Number followed by 'px': Number in pixels. In phone screens with higher pixel density, as the size of pixel is small, the widgets will look smaller.</li>
<li>Number followed by 'dip': Number in density independent pixels. Android provide the unit dip to make sure the widget size is same for different densities of pixels.</li>
<li>wrap_content: Widgets will be the smallest it can get, limited by the size of the content inside.</li>
<li>fill_parent/match_parent: Widgets will be largest it can get, limited by the size of the container.</li>
</ul>
There are different layout we can use to organise the UI widgets in the app, namely Linear Layout, Grid Layout, Table Layout, Relative Layout. We would be using mix of these layout in our example app.<br />
<br />
<b>Linear Layout (Default)</b><br />
<br />
Go to the 'Graphical Layout' editor and delete all the widgets you have got so far. And then add a 'text view' (a label) and a 'text field' as shown below.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0B4u7-6YdHyJSF3PwKpiRFnBJcOchKFk16DZnAkODvtqKyDh70QVxRWRkJtkAEPLj-Rc1J-WwrNbfgABXRktxNFP3EdHrJ0G66f8cIMV4h3cKcf1lQLzqcwRW-eiEB1CV0Qk7H5YrDs/s1600/linear-layout.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0B4u7-6YdHyJSF3PwKpiRFnBJcOchKFk16DZnAkODvtqKyDh70QVxRWRkJtkAEPLj-Rc1J-WwrNbfgABXRktxNFP3EdHrJ0G66f8cIMV4h3cKcf1lQLzqcwRW-eiEB1CV0Qk7H5YrDs/s320/linear-layout.png" width="191" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(Vertical) Linear Layout</td></tr>
</tbody></table>
Now go to the XML editor and see the corresponding XML.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"fill_parent"</span>
<u><span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span></u> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><EditText</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/editText1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:inputType</span>=<span style="color: red;">"numberDecimal"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><requestFocus</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></EditText<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
You can see the TextView and EditText widgets are placed inside the LinearLayout. In the UI, you noticed the widgets are placed vertically one after the other. This is because the layout orientation (the android:orientation attribute underlined in above code) is set to "vertical". If we change it to "horizontal", the widgets would arranged horizontally one after the other. (If you don't have the android:orientation attribute, the LinearLayout will get the default orientation, which is "vertical".)<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbex8bql1qD80sXWr7UQ16yl3RMqXUifrEFTq8TkdYZlpJD-iFWBvioL3CBNYglRoHiEy2Ww_i0Mndq7_Fkz8bxRC_0FPPmW3_4hGbZK8ep_vK1tWZ6W8rtpOWbCZKRoLO_02GZZXyko/s1600/linearlayout2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbex8bql1qD80sXWr7UQ16yl3RMqXUifrEFTq8TkdYZlpJD-iFWBvioL3CBNYglRoHiEy2Ww_i0Mndq7_Fkz8bxRC_0FPPmW3_4hGbZK8ep_vK1tWZ6W8rtpOWbCZKRoLO_02GZZXyko/s320/linearlayout2.png" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(Horizontal) Linear Layout</td></tr>
</tbody></table>
<br />
In situations where we want to place set of widgets vertically or horizontally, linear layout is an ideal solution. But if we want to align set of items as in a grid or a table, this will not give a good look, because the widgets across columns and rows will not aligned correctly. For that we can use either GridLayout or TableLayout. Since our BMI calculator app requires arrangement of widgets in a grid or a table we would see how we can use each of those layouts. (We will delete all the widgets we added so far, before going to the next section)<br />
<br />
<b>GridLayout (For Android 4.0+)</b><br />
<br />
Switch to the XML editor and replace the main.xml content with the following content.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><GridLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/gridLayout1"</span>
<u><span style="color: #000066;">android:rowCount</span>=<span style="color: red;">"2"</span></u>
<u><span style="color: #000066;">android:columnCount</span>=<span style="color: red;">"3"</span></u>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner3"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></GridLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
Here we have put 6 widgets in a GridLayout (which is placed inside the LinearLayout container). Note that we have specified the row count and column count in the GridLayout element. So when the widgets are rendered, they will be arranged in the specified columns and rows as shown below.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWvlW23gQtDEhApYHScvrjFpFLFAxiCD1ydHelOfZ4u_FYwu5TqhblD7fvV1ge3SQcqbsIPwv8i7FJme0JTnWnwZ2mNx1mVpPVTLJ5b2PdAE7Q1DKK9hdasG4c5jPsVMWEt4IRSCR2bxc/s1600/gridlayout.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWvlW23gQtDEhApYHScvrjFpFLFAxiCD1ydHelOfZ4u_FYwu5TqhblD7fvV1ge3SQcqbsIPwv8i7FJme0JTnWnwZ2mNx1mVpPVTLJ5b2PdAE7Q1DKK9hdasG4c5jPsVMWEt4IRSCR2bxc/s320/gridlayout.png" width="191" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of GridLayout</td></tr>
</tbody></table>
<br />
As you can see, GridLayout is very easy to use layout. But unfortunately this layout is only available in Android 4.0+ versions. My old phone, which is running on Android 2.2 (and many phones used android versions below 4) won't run any app that use GridLayout. So I'm switching to the TableLayout, which do the same thing as GridLayout, but work with any android version.<br />
<br />
<b>TableLayout </b><br />
<b> </b>
<br />
Now replace the contents on your main.xml with the following code.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableLayout1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner3"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
Unlike GridLayout, TableLayout does not have rowCount or columnCount, it rather has TableRow element to group the widgets in a single row. If you look at the Graphical Layout (WYSIWYG Editor) to see how it is rendered, you will see it look same as how GridLayout is rendered.<br />
<br />
I'm changing above code to do the following modifications.<br />
<br />
<table border="1px solid">
<tbody>
<tr>
<td>To have a margin between rows
</td>
<td>By adding "marginTop" attribute to the TableRow elements
</td>
</tr>
<tr>
<td>To have a margin between the vertical edges
</td>
<td>By adding "marginLeft" and "marginRight" attrbitues to the TableRow elements
</td>
</tr>
<tr>
<td>To have a margin between TextView and spinners
</td>
<td>By adding "marginRight" attribute to the TextView elements
</td>
</tr>
<tr>
<td>To stretch the spinners to get the remaining space</td>
<td>By setting "layout_width" attribute to "fill_parent" of Spinner elements
</td>
</tr>
<tr>
<td>In each row, the first spinner should stretch twice as the second spinner. </td>
<td>By adding "layout_weight" attribute to the spinners, and gravity in first spinner is set to "2" and the second spinner is set to "1"
</td>
</tr>
</tbody></table>
<br />
Here is the modified xml (changes are underlined) and the corresponding graphical layouts for both portrait and landscape views.<br />
<br />
<br />
<pre class="xml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableLayout1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span>
</u> <u><span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
</u> <u><span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span></u> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<u><span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span></u>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner1"</span>
<u><span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span></u>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"2"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner2"</span>
<u><span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span></u>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"1"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span></u>
<u><span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span></u>
<u><span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span></u> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<u><span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span></u>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner3"</span>
<u><span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span></u>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"2"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner4"</span>
<u><span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span></u>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"1"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Gx_VAkH3DsmGUwSPye4uGejVkjE9NE7gndiPUTO5wHn8iFdEb3CKBUGRXaskl6JlA02Z70yyQAMkWuF5Wagh2bop7yjZwYqhSOA1neBxKBvBQq5AXL3w40AbL-3TRKVeXzn_f_ruWto/s1600/tablelayout1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Gx_VAkH3DsmGUwSPye4uGejVkjE9NE7gndiPUTO5wHn8iFdEb3CKBUGRXaskl6JlA02Z70yyQAMkWuF5Wagh2bop7yjZwYqhSOA1neBxKBvBQq5AXL3w40AbL-3TRKVeXzn_f_ruWto/s320/tablelayout1.png" width="191" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of TableLayout (Portrait View)</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4JZTvHE8mlGbD7hKW2lsBbC1WhxMLOmZq5HAOQIdR3eWVDmcTXCD_Z1A-uS12kooKb3Ped10sIQ8n-eFwjMEMrYeGCT7vbHY48YTQOg5p8jCDfqe0X64RwluRfhFM0YnPO2ZJkV7nGLI/s1600/tablelayout2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4JZTvHE8mlGbD7hKW2lsBbC1WhxMLOmZq5HAOQIdR3eWVDmcTXCD_Z1A-uS12kooKb3Ped10sIQ8n-eFwjMEMrYeGCT7vbHY48YTQOg5p8jCDfqe0X64RwluRfhFM0YnPO2ZJkV7nGLI/s320/tablelayout2.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of TableLayout (Landscape View)</td></tr>
</tbody></table>
<br />
As you can see in there the weight of the spinners have no effect on the UI in portrait view as there are no much free space in there, But in Landscape view, the first spinner has stretched twice as the other.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Next we will add a button, for that I will use RelativeLayout.<br />
<br />
<b>RelativeLayout</b><br />
<br />
I thought it looks better to add the button right-aligned with the 4th Spinner widget. In such cases, where we want to align a widget relative to another widget (sibling or parent widget), we can use the relative layout. What we do here is replace the spinner4 widget with the RelativeLayout element which contain both the spinner4 and the button. Here is the replacing piece of code (in place of the spinner4 element in the TableLayout example).<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"> <span style="color: #009900;"><span style="color: black; font-weight: bold;"><RelativeLayout</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"1"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Button</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/button1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:layout_alignRight</span>=<span style="color: red;">"@+id/spinner4"</span></u>
<u><span style="color: #000066;">android:layout_below</span>=<span style="color: red;">"@+id/spinner4"</span></u>
<u><span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span></u>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Button"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></RelativeLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
You can see the button is set to place below the spinner (using "layout_below" attribute), put a margin on top of 15dip (using "layout_marginTop" attribute) and alignRight with spinner4 (using "layout_alignRight" attribute). That will give the following look.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4AyVLVDpReofbicdMM4qP86lWB2PrPtKF0W0o8IYH8nYBmNn3w7X1AnRrEkcvSc9gHKdpXtABYNJi_GiPMVe2NgCL8X-ZQW0D1mMEXga5VvYgIr1VIKsBvr-c3tWMjbfnz2W8sh3xZQ/s1600/relativelayout.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4AyVLVDpReofbicdMM4qP86lWB2PrPtKF0W0o8IYH8nYBmNn3w7X1AnRrEkcvSc9gHKdpXtABYNJi_GiPMVe2NgCL8X-ZQW0D1mMEXga5VvYgIr1VIKsBvr-c3tWMjbfnz2W8sh3xZQ/s320/relativelayout.png" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of RelativeLayout</td></tr>
</tbody></table>
<br />
<b>Linear Layout (Nested)</b><br />
<br />
Next we want to add TextViews to show a label, the calculated BMI value and a description. To place that we will be using two linear layouts, one nested inside the other. Here is the xml to get that done. (We add the following code, just behind the end of TableLayout element.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"> <span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/linearLayout1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span>
<u><span style="color: #000066;">android:orientation</span>=<span style="color: red;">"horizontal"</span></u> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView3"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<u><span style="color: #000066;">android:gravity</span>=<span style="color: red;">"center_vertical"</span></u>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Medium Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/linearLayout2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView4"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:gravity</span>=<span style="color: red;">"center_horizontal"</span></u>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Large Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceLarge"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView5"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:gravity</span>=<span style="color: red;">"center_horizontal"</span></u>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"Large Text"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceLarge"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
As you can see, from the first LinearLayout, we make two horizontal columns (by setting "orientation" attribute to "horizontal", and adding two children elements). And in the first column, we add a TextView in the center of the vertical space (by setting the "gravity" attribute to "center_vertical". And in the second column, we add another LinearLayout with orientation is set to "vertical", and add two TextViews. They both are horizontally centred by setting the "gravity" attribute value to "center_horizontal".<br />
<br />
This will complete our layout arrangement. Finally, It will give the following look in the Graphical Layout editor.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArA4arbyO2Ia-1vKuGo6-mPn0YLD_WvvbQEPZzaUgo4Iq8lgYm3e0g1XVrlzDnR_J4TRn1wCt0V0zuDqHMbLlRG6OIdOytdEMsHLVg8o6bp8EXw2CWbHurc2iBMrALqYeRFKE9wlD_jQ/s1600/layout-arrangement.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArA4arbyO2Ia-1vKuGo6-mPn0YLD_WvvbQEPZzaUgo4Iq8lgYm3e0g1XVrlzDnR_J4TRn1wCt0V0zuDqHMbLlRG6OIdOytdEMsHLVg8o6bp8EXw2CWbHurc2iBMrALqYeRFKE9wlD_jQ/s320/layout-arrangement.png" width="193" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Layout Arrangement (Portrait View)</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgyrNpig6amdjr-o9-dedOCESGjciRD-lpDD2iDRpc_lnI3Mc5N2137LVGo2kUYOJSFS5V7jEHE-sqt9XkdL9xeJDTUYOdzEIsiiZnXKBKzb4WRu9JCwzmxYqsEX36JS_Kp3T77ccosY/s1600/layout-arrangement2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgyrNpig6amdjr-o9-dedOCESGjciRD-lpDD2iDRpc_lnI3Mc5N2137LVGo2kUYOJSFS5V7jEHE-sqt9XkdL9xeJDTUYOdzEIsiiZnXKBKzb4WRu9JCwzmxYqsEX36JS_Kp3T77ccosY/s320/layout-arrangement2.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Layout Arrangement (Landscape View)</td></tr>
</tbody></table>
<b>Defining Strings in Widgets</b><br />
<br />
To define strings that would be using as labels in widgets, we have two options. One is directly hard-coding them in the layout xml as text attributes. This approach is not recommended, because that will make difficult to localize your app. The recommended way is to use a separate file to keep your strings and refer them from widgets.<br />
<br />
Android provide a file res/values/strings.xml in your project to store your strings.<br />
Similar to main.xml (The Layout XML file), it also has a graphical editor and a xml editor to directly edit the file.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasp2iT_Fj2Kde18frrIzYrfSONjDqxDqYpOb5FcH2RCxYK7D8zTqTotI6-f0gBWlS8w3ASz2rG1GbPYfuN1Bu5zu6G7KwHAnDiRaabzunZpZMVCxYWk76-pzB-JyjP-jfyMqHB9r2TsY/s1600/stringxmlpng.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasp2iT_Fj2Kde18frrIzYrfSONjDqxDqYpOb5FcH2RCxYK7D8zTqTotI6-f0gBWlS8w3ASz2rG1GbPYfuN1Bu5zu6G7KwHAnDiRaabzunZpZMVCxYWk76-pzB-JyjP-jfyMqHB9r2TsY/s400/stringxmlpng.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">strings.xml editor</td></tr>
</tbody></table>
<br />
There will already be few strings added. Remove the strings with the name hello, by selecting it and pressing 'Remove..' button. The string 'app_name' is the name of your app. You can change the app name by changing this value. Now we will add strings using the visual editor. (Delete all the strings except 'app_name')<br />
<br />
Press "Add.." button next to the strings list.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_6DH31q9sb-aoP1n6N_SXjyXv8w1HdCQeS-f05sNFQtawuWW1Dmrw7CWffvFbTZO5d5NitJsu58FKqSHI9D5Hj93PCuy2sAEkTAib80am2tZNMQrdrFioo6FbXxikQN9zZG635tNrfA/s1600/stringsxml3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_6DH31q9sb-aoP1n6N_SXjyXv8w1HdCQeS-f05sNFQtawuWW1Dmrw7CWffvFbTZO5d5NitJsu58FKqSHI9D5Hj93PCuy2sAEkTAib80am2tZNMQrdrFioo6FbXxikQN9zZG635tNrfA/s320/stringsxml3.png" width="293" /></a></div>
<br />
<br />
This will allow you to select the type of element you want to add. In fact we will create 'Color' and 'String Array type' elements for our app in the coming sections. We would first create a String for the first TextView named 'Weight'. Press OK after selecting the type as String. This will return to the strings.xml editor with a new String element added. On the right hand side space, fill a "name" and "value" for the String. The "name" can be used to refer to the string from the code and the UI. The "value" is the actual value displayed in the UI. For the first string we would use "weightLabel" as the name and the the "Weight" as the value as shown below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4JQtAj7gr6GPONnSpfF1-XzVb8un0FWZKL2BRQbLuFTTclEWbzPFJPC4Ylb5Msn2Vm24kWzgCQ0PDy2ui2849Jy4Yh2K3RZBOmKacn75A-89Rb_jDc-WrKm-e2cpNQCnGDYXSe4Cfpw/s1600/stringsxml4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4JQtAj7gr6GPONnSpfF1-XzVb8un0FWZKL2BRQbLuFTTclEWbzPFJPC4Ylb5Msn2Vm24kWzgCQ0PDy2ui2849Jy4Yh2K3RZBOmKacn75A-89Rb_jDc-WrKm-e2cpNQCnGDYXSe4Cfpw/s400/stringsxml4.png" width="400" /></a></div>
<br />
<br />
Now click the strings.xml tab in the bottom of the panel and you can see the strings.xml content with the new string you just added.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><resources<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"app_name"</span><span style="color: black; font-weight: bold;">></span></span>BMI Calculator<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"weightLabel"</span><span style="color: black; font-weight: bold;">></span></span>Weight<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></resources<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
For our app, we would be adding few more strings, string arrays and colors. Here is how it look like when all the required strings are added.<br />
<br />
<pre class="xml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><resources<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"app_name"</span><span style="color: black; font-weight: bold;">></span></span>BMI Calculator<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: grey; font-style: italic;"><!-- labels for widgets --></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"heightLabel"</span><span style="color: black; font-weight: bold;">></span></span>Height<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"calculateButton"</span><span style="color: black; font-weight: bold;">></span></span>Calculate<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"EmptyString"</span><span style="color: black; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"weightLabel"</span><span style="color: black; font-weight: bold;">></span></span>Weight<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"bmiLabel"</span><span style="color: black; font-weight: bold;">></span></span>Body Mass Index<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: grey; font-style: italic;"><!-- the BMI descriptions --></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"bmiNormal"</span><span style="color: black; font-weight: bold;">></span></span>Normal<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"bmiOver"</span><span style="color: black; font-weight: bold;">></span></span>Overweight<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"bmiUnder"</span><span style="color: black; font-weight: bold;">></span></span>Underweight<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"bmiSUnder"</span><span style="color: black; font-weight: bold;">></span></span>Severely Underweight<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string</span> <span style="color: #000066;">name</span>=<span style="color: red;">"bmiObese"</span><span style="color: black; font-weight: bold;">></span></span>Obese<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: grey; font-style: italic;"><!-- Strings arrays used in Spinner widgets --></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string-array</span> <span style="color: #000066;">name</span>=<span style="color: red;">"heightUnitsArray"</span><span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <span style="color: black; font-weight: bold;">></span></span>feet/inch<span style="color: #009900;"><span style="color: black; font-weight: bold;"></item<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <span style="color: black; font-weight: bold;">></span></span>m/cm<span style="color: #009900;"><span style="color: black; font-weight: bold;"></item<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string-array<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><string-array</span> <span style="color: #000066;">name</span>=<span style="color: red;">"weightUnitsArray"</span><span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <span style="color: black; font-weight: bold;">></span></span>lb<span style="color: #009900;"><span style="color: black; font-weight: bold;"></item<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><item</span> <span style="color: black; font-weight: bold;">></span></span>kg<span style="color: #009900;"><span style="color: black; font-weight: bold;"></item<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></string-array<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: grey; font-style: italic;"><!-- Colors used to used in the labels and the backgrouds --></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><color</span> <span style="color: #000066;">name</span>=<span style="color: red;">"colorRed"</span><span style="color: black; font-weight: bold;">></span></span>#ff0000<span style="color: #009900;"><span style="color: black; font-weight: bold;"></color<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><color</span> <span style="color: #000066;">name</span>=<span style="color: red;">"colorYellow"</span><span style="color: black; font-weight: bold;">></span></span>#00ffff<span style="color: #009900;"><span style="color: black; font-weight: bold;"></color<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><color</span> <span style="color: #000066;">name</span>=<span style="color: red;">"colorGreen"</span><span style="color: black; font-weight: bold;">></span></span>#00ff00<span style="color: #009900;"><span style="color: black; font-weight: bold;"></color<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><color</span> <span style="color: #000066;">name</span>=<span style="color: red;">"colorBG"</span><span style="color: black; font-weight: bold;">></span></span>#323232<span style="color: #009900;"><span style="color: black; font-weight: bold;"></color<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></resources<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
Then we would modify the main.xml (The UI xml that we added widgets and layouts) to refer these strings for their labels. Here is the modified main.xml (the modifications are underlined) followed by the explanation.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span>
<u><span style="color: #000066;">android:background</span>=<span style="color: red;">"@color/colorBG"</span></u> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableLayout1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<u><span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/weightLabel"</span></u>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:prompt</span>=<span style="color: red;">"@string/weightLabel"</span></u>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"2"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"1"</span>
<u><span style="color: #000066;">android:entries</span>=<span style="color: red;">"@array/weightUnitsArray"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TableRow</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/tableRow2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<u><span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/heightLabel"</span></u>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner3"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:prompt</span>=<span style="color: red;">"@string/heightLabel"</span></u>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"2"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><RelativeLayout</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_weight</span>=<span style="color: red;">"1"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Spinner</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<u><span style="color: #000066;">android:entries</span>=<span style="color: red;">"@array/heightUnitsArray"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Button</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/button1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_alignRight</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_below</span>=<span style="color: red;">"@+id/spinner4"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span>
<u><span style="color: #000066;">android:onClick</span>=<span style="color: red;">"calculateClickHandler"</span></u>
<u><span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/calculateButton"</span></u> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></RelativeLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableRow<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></TableLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/linearLayout1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_marginLeft</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:layout_marginTop</span>=<span style="color: red;">"15dip"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"horizontal"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView3"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_marginRight</span>=<span style="color: red;">"5dip"</span>
<span style="color: #000066;">android:gravity</span>=<span style="color: red;">"center_vertical"</span>
<u><span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/bmiLabel"</span></u>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/linearLayout2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView4"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:gravity</span>=<span style="color: red;">"center_horizontal"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">""</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceLarge"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView5"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:gravity</span>=<span style="color: red;">"center_horizontal"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">""</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceLarge"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
<table border="1px solid">
<tbody>
<tr>
<td>To set the background color
</td>
<td>We are changing "backgroud" attribute of the top most layout element to the "@color/colorBG". We defined the colorBG in the Strings.xml as a color.
</td>
</tr>
<tr>
<td>To set the texts of TextViews and Button
</td>
<td>We are changing "text" attribute of the element (For example in the TextView1) to "@string/weight". We defined the 'weight' as a string in the Strings.xml</td>
</tr>
<tr>
<td>To change the background color
</td>
<td>We are changing "entries" attribute of the element (For example in the Spinner2) to the "@array/weightUnitsArray". We defined the 'weightUnitsArray' (and its items) in the Strings.xml as a string array.
</td>
</tr>
</tbody></table>
<br />
In addition to the above list, we have added "onClick" attribute to the button to handle the onClick action from the code. We would define calculateClickHandler method in our Activity class. This is all we have to do for the UI. Now we would move to the code to get the logic done.<br />
<br />
<b>The Code </b><br />
<br />
As we have created a bit sophisticated UI, it takes some code to handle the required functionality shown in the UI. As we have created spinners to select the weight and height in two different units, first we have to load the spinners with necessary value ranges. And when the BMI is calculated, we show the BMI value, the text of interpretation of the BMI value in two text views and change the color of the text views according to the healthiness read in BMI value. Here is the code that we do all these. (The comments in the code will help you to understand the logic)<br />
<br />
<pre><span style="color: black; font-weight: bold;">package</span> com.<span style="color: #006600;">blogger</span>.<span style="color: #006600;">android</span>.<span style="color: #006600;">meda</span>.<span style="color: #006600;">bmicalculator</span>;
<span style="color: #a1a100;">import android.app.Activity;</span>
<span style="color: #a1a100;">import android.os.Bundle;</span>
<span style="color: #a1a100;">import android.view.View;</span>
<span style="color: #a1a100;">import android.widget.AdapterView;</span>
<span style="color: #a1a100;">import android.widget.AdapterView.OnItemSelectedListener;</span>
<span style="color: #a1a100;">import android.widget.ArrayAdapter;</span>
<span style="color: #a1a100;">import android.widget.Spinner;</span>
<span style="color: #a1a100;">import android.widget.TextView;</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: black; font-weight: bold;">class</span> BMICalculatorActivity <span style="color: black; font-weight: bold;">extends</span> Activity <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">/** Called when the activity is first created. */</span>
<span style="color: grey; font-style: italic;">// declare adaptors to bind with spinners</span>
ArrayAdapter<String> heightFeetsAdapter;
ArrayAdapter<String> heightMetersAdapter;
ArrayAdapter<String> weightLibsAdapter;
ArrayAdapter<String> weightKgsAdapter;
<span style="color: grey; font-style: italic;">// declare the references for the UI elements</span>
Spinner weightSpinner;
Spinner heightSpinner;
Spinner weightUnitSpinner;
Spinner heightUnitSpinner;
TextView bmiValueText;
TextView bmiDescriptionText;
@Override
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> onCreate<span style="color: #66cc66;">(</span>Bundle savedInstanceState<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">super</span>.<span style="color: #006600;">onCreate</span><span style="color: #66cc66;">(</span>savedInstanceState<span style="color: #66cc66;">)</span>;
setContentView<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">layout</span>.<span style="color: #006600;">main</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// load the references to the widgets</span>
weightSpinner = <span style="color: #66cc66;">(</span>Spinner<span style="color: #66cc66;">)</span> findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">spinner1</span><span style="color: #66cc66;">)</span>;
weightUnitSpinner = <span style="color: #66cc66;">(</span>Spinner<span style="color: #66cc66;">)</span> findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">spinner2</span><span style="color: #66cc66;">)</span>;
heightSpinner = <span style="color: #66cc66;">(</span>Spinner<span style="color: #66cc66;">)</span> findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">spinner3</span><span style="color: #66cc66;">)</span>;
heightUnitSpinner = <span style="color: #66cc66;">(</span>Spinner<span style="color: #66cc66;">)</span> findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">spinner4</span><span style="color: #66cc66;">)</span>;
bmiValueText = <span style="color: #66cc66;">(</span>TextView<span style="color: #66cc66;">)</span> findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">textView4</span><span style="color: #66cc66;">)</span>;
bmiDescriptionText = <span style="color: #66cc66;">(</span>TextView<span style="color: #66cc66;">)</span> findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">textView5</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// initialize the value range for the spinners</span>
initializeSpinnerAdapters<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// load the default values for the spinners</span>
loadLibsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
loadFeetsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// add listeners to the unit changes</span>
addListernsToUnitChanges<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// handler that we defined in "onClick" attribute of the button</span>
<span style="color: grey; font-style: italic;">// get called when the button is clicked</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> calculateClickHandler<span style="color: #66cc66;">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3AView+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">View</span></a> view<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// make sure we handle the click of the calculator button</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>view.<span style="color: #006600;">getId</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> == R.<span style="color: #006600;">id</span>.<span style="color: #006600;">button1</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// get the users values from the spinners (converted to floats and</span>
<span style="color: grey; font-style: italic;">// metrics units)</span>
<span style="color: #993333;">float</span> weight = getSelectedWeight<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #993333;">float</span> height = getSelectedHeight<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// calculate the bmi value and set it in the text</span>
<span style="color: #993333;">float</span> bmiValue = calculateBMI<span style="color: #66cc66;">(</span>weight, height<span style="color: #66cc66;">)</span>;
bmiValueText.<span style="color: #006600;">setText</span><span style="color: #66cc66;">(</span>bmiValue + <span style="color: red;">""</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// interpret the meaning of the bmi value and set it in the text</span>
<span style="color: #993333;">int</span> bmiInterpretation = interpretBMI<span style="color: #66cc66;">(</span>bmiValue<span style="color: #66cc66;">)</span>;
bmiDescriptionText.<span style="color: #006600;">setText</span><span style="color: #66cc66;">(</span>getResources<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">getString</span><span style="color: #66cc66;">(</span>
bmiInterpretation<span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// color for the bmi text fields</span>
<span style="color: #993333;">int</span> bmiColor = colorBMI<span style="color: #66cc66;">(</span>bmiValue<span style="color: #66cc66;">)</span>;
bmiValueText.<span style="color: #006600;">setTextColor</span><span style="color: #66cc66;">(</span>getResources<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">getColor</span><span style="color: #66cc66;">(</span>bmiColor<span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
bmiDescriptionText.<span style="color: #006600;">setTextColor</span><span style="color: #66cc66;">(</span>getResources<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">getColor</span><span style="color: #66cc66;">(</span>bmiColor<span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// retrieve the weight from the spinner control converted to kg</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">float</span> getSelectedWeight<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> selectedWeightValue = <span style="color: #66cc66;">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">)</span> weightSpinner.<span style="color: #006600;">getSelectedItem</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>weightUnitSpinner.<span style="color: #006600;">getSelectedItemPosition</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// the position is libs, so convert to kg and return</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">float</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3AFloat+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">Float</span></a>.<span style="color: #006600;">parseFloat</span><span style="color: #66cc66;">(</span>selectedWeightValue<span style="color: #66cc66;">)</span> * <span style="color: #cc66cc;">0.45359237</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// already kg is selected, so no need to covert (just cast to float)</span>
<span style="color: black; font-weight: bold;">return</span> <a href="http://www.google.com/search?hl=en&q=allinurl%3AFloat+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">Float</span></a>.<span style="color: #006600;">parseFloat</span><span style="color: #66cc66;">(</span>selectedWeightValue<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// retrieve the hight from the spinner control convented to me</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">float</span> getSelectedHeight<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> selectedHeightValue = <span style="color: #66cc66;">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">)</span> heightSpinner.<span style="color: #006600;">getSelectedItem</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>heightUnitSpinner.<span style="color: #006600;">getSelectedItemPosition</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// the position is feets and inches, so convert to meters and return</span>
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> feets = selectedHeightValue.<span style="color: #006600;">substring</span><span style="color: #66cc66;">(</span><span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">)</span>;
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> inches = selectedHeightValue.<span style="color: #006600;">substring</span><span style="color: #66cc66;">(</span><span style="color: #cc66cc;">2</span>, <span style="color: #cc66cc;">4</span><span style="color: #66cc66;">)</span>;
<span style="color: black; font-weight: bold;">return</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">float</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3AFloat+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">Float</span></a>.<span style="color: #006600;">parseFloat</span><span style="color: #66cc66;">(</span>feets<span style="color: #66cc66;">)</span> * <span style="color: #cc66cc;">0.3048</span><span style="color: #66cc66;">)</span>
+ <span style="color: #66cc66;">(</span><span style="color: #993333;">float</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3AFloat+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">Float</span></a>.<span style="color: #006600;">parseFloat</span><span style="color: #66cc66;">(</span>inches<span style="color: #66cc66;">)</span> * <span style="color: #cc66cc;">0.0254</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// already meters is selected, so no need to covert (just cast to</span>
<span style="color: grey; font-style: italic;">// float)</span>
<span style="color: black; font-weight: bold;">return</span> <a href="http://www.google.com/search?hl=en&q=allinurl%3AFloat+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">Float</span></a>.<span style="color: #006600;">parseFloat</span><span style="color: #66cc66;">(</span>selectedHeightValue<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// the formula to calculate the BMI index</span>
<span style="color: grey; font-style: italic;">// check for http://en.wikipedia.org/wiki/Body_mass_index</span>
<span style="color: black; font-weight: bold;">private</span> <span style="color: #993333;">float</span> calculateBMI<span style="color: #66cc66;">(</span><span style="color: #993333;">float</span> weight, <span style="color: #993333;">float</span> height<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">float</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">(</span>weight / <span style="color: #66cc66;">(</span>height * height<span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// returns the string name defined in strings.xml</span>
<span style="color: grey; font-style: italic;">// that interpret the BMI</span>
<span style="color: black; font-weight: bold;">private</span> <span style="color: #993333;">int</span> interpretBMI<span style="color: #66cc66;">(</span><span style="color: #993333;">float</span> bmiValue<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">16</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">string</span>.<span style="color: #006600;">bmiSUnder</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">18.5</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">string</span>.<span style="color: #006600;">bmiUnder</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">25</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">string</span>.<span style="color: #006600;">bmiNormal</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">30</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">string</span>.<span style="color: #006600;">bmiOver</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">string</span>.<span style="color: #006600;">bmiObese</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// returns the color name defined in strings.xml</span>
<span style="color: grey; font-style: italic;">// that represent the BMI</span>
<span style="color: black; font-weight: bold;">private</span> <span style="color: #993333;">int</span> colorBMI<span style="color: #66cc66;">(</span><span style="color: #993333;">float</span> bmiValue<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">16</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">color</span>.<span style="color: #006600;">colorRed</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">18.5</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">color</span>.<span style="color: #006600;">colorYellow</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">25</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">color</span>.<span style="color: #006600;">colorGreen</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">30</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">color</span>.<span style="color: #006600;">colorYellow</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> R.<span style="color: #006600;">color</span>.<span style="color: #006600;">colorRed</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// adding listers to unit changing spinners, as we need to change the</span>
<span style="color: grey; font-style: italic;">// value range accordingly</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> addListernsToUnitChanges<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// listener to the weight unit</span>
weightUnitSpinner
.<span style="color: #006600;">setOnItemSelectedListener</span><span style="color: #66cc66;">(</span><span style="color: black; font-weight: bold;">new</span> OnItemSelectedListener<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> onItemSelected<span style="color: #66cc66;">(</span>AdapterView<?> parent,
<a href="http://www.google.com/search?hl=en&q=allinurl%3AView+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">View</span></a> view, <span style="color: #993333;">int</span> row, <span style="color: #993333;">long</span> id<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// load the relevent units and the values</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>row == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// libs is selected</span>
loadLibsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// kg is selected</span>
loadKgsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> onNothingSelected<span style="color: #66cc66;">(</span>AdapterView<?> arg0<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// Nothing to do here</span>
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// listener to the height unit</span>
heightUnitSpinner
.<span style="color: #006600;">setOnItemSelectedListener</span><span style="color: #66cc66;">(</span><span style="color: black; font-weight: bold;">new</span> OnItemSelectedListener<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> onItemSelected<span style="color: #66cc66;">(</span>AdapterView<?> parent,
<a href="http://www.google.com/search?hl=en&q=allinurl%3AView+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">View</span></a> view, <span style="color: #993333;">int</span> row, <span style="color: #993333;">long</span> id<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// load the relevent units and the values</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>row == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// feets is selected</span>
loadFeetsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// meters is selected</span>
loadMetersValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> onNothingSelected<span style="color: #66cc66;">(</span>AdapterView<?> arg0<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// Nothing to do here</span>
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// load the libs value range to the weight spinner</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> loadLibsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
weightSpinner.<span style="color: #006600;">setAdapter</span><span style="color: #66cc66;">(</span>weightLibsAdapter<span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// set the default lib value</span>
weightSpinner.<span style="color: #006600;">setSelection</span><span style="color: #66cc66;">(</span>weightLibsAdapter.<span style="color: #006600;">getPosition</span><span style="color: #66cc66;">(</span><span style="color: red;">"170"</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// load the kg value range to the weight spinner</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> loadKgsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
weightSpinner.<span style="color: #006600;">setAdapter</span><span style="color: #66cc66;">(</span>weightKgsAdapter<span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// set the default vaule for kg</span>
weightSpinner.<span style="color: #006600;">setSelection</span><span style="color: #66cc66;">(</span>weightKgsAdapter.<span style="color: #006600;">getPosition</span><span style="color: #66cc66;">(</span><span style="color: red;">" 77"</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// load the feets value range to the height spinner</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> loadFeetsValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
heightSpinner.<span style="color: #006600;">setAdapter</span><span style="color: #66cc66;">(</span>heightFeetsAdapter<span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// set the default value to feets</span>
heightSpinner.<span style="color: #006600;">setSelection</span><span style="color: #66cc66;">(</span>heightFeetsAdapter.<span style="color: #006600;">getPosition</span><span style="color: #66cc66;">(</span><span style="color: red;">"5\"05'"</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// load the meters value range to the height spinner</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> loadMetersValueRange<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
heightSpinner.<span style="color: #006600;">setAdapter</span><span style="color: #66cc66;">(</span>heightMetersAdapter<span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// set the default value to meters</span>
heightSpinner.<span style="color: #006600;">setSelection</span><span style="color: #66cc66;">(</span>heightMetersAdapter.<span style="color: #006600;">getPosition</span><span style="color: #66cc66;">(</span><span style="color: red;">"1.65"</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// load the value range of all the units to adapters</span>
<span style="color: grey; font-style: italic;">// we would assign adapters to the spinners based on the users selection</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> initializeSpinnerAdapters<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> weightLibs = <span style="color: black; font-weight: bold;">new</span> <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #cc66cc;">300</span><span style="color: #66cc66;">]</span>;
<span style="color: grey; font-style: italic;">// loading 1.0 to 300 to the weight in libs</span>
<span style="color: #993333;">int</span> k = <span style="color: #cc66cc;">299</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">int</span> i = <span style="color: #cc66cc;">1</span>; i <= <span style="color: #cc66cc;">300</span>; i++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
weightLibs<span style="color: #66cc66;">[</span>k--<span style="color: #66cc66;">]</span> = <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a>.<span style="color: #006600;">format</span><span style="color: #66cc66;">(</span><span style="color: red;">"%3d"</span>, i<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// initialize the weightLibsAdapter with the weightLibs values</span>
weightLibsAdapter = <span style="color: black; font-weight: bold;">new</span> ArrayAdapter<String><span style="color: #66cc66;">(</span><span style="color: black; font-weight: bold;">this</span>,
android.<span style="color: #006600;">R</span>.<span style="color: #006600;">layout</span>.<span style="color: #006600;">simple_spinner_item</span>, weightLibs<span style="color: #66cc66;">)</span>;
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> weightKgs = <span style="color: black; font-weight: bold;">new</span> <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #cc66cc;">200</span><span style="color: #66cc66;">]</span>;
<span style="color: grey; font-style: italic;">// loading 1.0 to 200 to the weight in kgs</span>
k = <span style="color: #cc66cc;">199</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">int</span> i = <span style="color: #cc66cc;">1</span>; i <= <span style="color: #cc66cc;">200</span>; i++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
weightKgs<span style="color: #66cc66;">[</span>k--<span style="color: #66cc66;">]</span> = <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a>.<span style="color: #006600;">format</span><span style="color: #66cc66;">(</span><span style="color: red;">"%3d"</span>, i<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// initialize the weightKgsAdapter with the weightKgs values</span>
weightKgsAdapter = <span style="color: black; font-weight: bold;">new</span> ArrayAdapter<String><span style="color: #66cc66;">(</span><span style="color: black; font-weight: bold;">this</span>,
android.<span style="color: #006600;">R</span>.<span style="color: #006600;">layout</span>.<span style="color: #006600;">simple_spinner_item</span>, weightKgs<span style="color: #66cc66;">)</span>;
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> heightFeets = <span style="color: black; font-weight: bold;">new</span> <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #cc66cc;">60</span><span style="color: #66cc66;">]</span>;
<span style="color: grey; font-style: italic;">// loading 3"0' to 7"11' to the height in feet/inch</span>
k = <span style="color: #cc66cc;">59</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">int</span> i = <span style="color: #cc66cc;">3</span>; i < <span style="color: #cc66cc;">8</span>; i++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">int</span> j = <span style="color: #cc66cc;">0</span>; j < <span style="color: #cc66cc;">12</span>; j++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
heightFeets<span style="color: #66cc66;">[</span>k--<span style="color: #66cc66;">]</span> = i + <span style="color: red;">"\""</span> + <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a>.<span style="color: #006600;">format</span><span style="color: #66cc66;">(</span><span style="color: red;">"%02d"</span>, j<span style="color: #66cc66;">)</span> + <span style="color: red;">"'"</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// initialize the heightFeetAdapter with the heightFeets values</span>
heightFeetsAdapter = <span style="color: black; font-weight: bold;">new</span> ArrayAdapter<String><span style="color: #66cc66;">(</span><span style="color: black; font-weight: bold;">this</span>,
android.<span style="color: #006600;">R</span>.<span style="color: #006600;">layout</span>.<span style="color: #006600;">simple_spinner_item</span>, heightFeets<span style="color: #66cc66;">)</span>;
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> heightMeters = <span style="color: black; font-weight: bold;">new</span> <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a><span style="color: #66cc66;">[</span><span style="color: #cc66cc;">300</span><span style="color: #66cc66;">]</span>;
<span style="color: grey; font-style: italic;">// loading 0.0 to 2.9 to the height in m/cm</span>
k = <span style="color: #cc66cc;">299</span>;
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">int</span> i = <span style="color: #cc66cc;">0</span>; i < <span style="color: #cc66cc;">3</span>; i++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">int</span> j = <span style="color: #cc66cc;">0</span>; j < <span style="color: #cc66cc;">100</span>; j++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
heightMeters<span style="color: #66cc66;">[</span>k--<span style="color: #66cc66;">]</span> = i + <span style="color: red;">"."</span> + j;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// initialize the heightMetersAdapter with the heightMeters values</span>
heightMetersAdapter = <span style="color: black; font-weight: bold;">new</span> ArrayAdapter<String><span style="color: #66cc66;">(</span><span style="color: black; font-weight: bold;">this</span>,
android.<span style="color: #006600;">R</span>.<span style="color: #006600;">layout</span>.<span style="color: #006600;">simple_spinner_item</span>, heightMeters<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span></pre>
<br />
<b>Run it on the Phone</b><br />
<br />
After all these done, we are here to run this app on the phone and check how the UI looks in both portrait and landscape mode.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9paEyVrYo3qlrtIr1EAhhRj2dtDrBo9mX6WIY6v5sImXHx8xu2TZeOP2IVAp8_9D5A1Dof_hu3o7LJwgopz5Fv9kAY-tWDJ8BBXXzIiPYQe-JkQbIZnhK8pj1RCAKoY1U6OjzWB_INao/s1600/screenshot2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9paEyVrYo3qlrtIr1EAhhRj2dtDrBo9mX6WIY6v5sImXHx8xu2TZeOP2IVAp8_9D5A1Dof_hu3o7LJwgopz5Fv9kAY-tWDJ8BBXXzIiPYQe-JkQbIZnhK8pj1RCAKoY1U6OjzWB_INao/s320/screenshot2.png" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The BMI Calculator look and feeling in Portrait view</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigQC3SbFOzhO6ROZ74QNVLO39ODb937TFa9LHev6UIG-mkmDIETgioD65CeE1q9cgt0K-Bfbo99IQxLFTNCJT_keKEEDcZKvIDqzJqv4aSNES4w26oShlvaKDidemuNpnxPOUvAi-wdig/s1600/screenshot3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigQC3SbFOzhO6ROZ74QNVLO39ODb937TFa9LHev6UIG-mkmDIETgioD65CeE1q9cgt0K-Bfbo99IQxLFTNCJT_keKEEDcZKvIDqzJqv4aSNES4w26oShlvaKDidemuNpnxPOUvAi-wdig/s320/screenshot3.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The BMI Calculator look and feeling in Landscape view</td></tr>
</tbody></table>
<br />
You can download the eclipse project and the android app that we created in this post from following links.
<br />
<table border="1px solid">
<tbody>
<tr>
<td>Download the eclipse project files (zipped)
</td>
<td><a href="https://sites.google.com/site/androidmedablogger/files/com.blogger.android.meda.bmicalculator-version2.zip?attredirects=0&d=1">com.blogger.android.meda.bmicalculator-version2.zip</a>
</td>
</tr>
<tr>
<td>Access the Source code from github
</td>
<td><a href="https://github.com/androidmeda-blogger/Androidmeda-Blog/tree/60ff3f948cc272f5a9835a6495653faff2deb2c4" target="_blank">github repo</a>
</td>
</tr>
<tr>
<td>Download the free BMI Calculator app (the latest version) from the Android Market.
</td>
<td><a href="http://market.android.com/details?id=com.blogger.android.meda.bmicalculator" target="_blank">
<img alt="Available in Android Market" src="http://www.android.com/images/brand/45_avail_market_logo2.png" />
</a>
</td>
</tr>
</tbody></table>
<br />
<b>Next Steps</b><br />
<br />
To add themes to the app for a better look and feel, read <a href="http://android-meda.blogspot.com/2012/02/tutorial-theming-android-app.html">Tutorial: Theming an Android App</a>.Android(meda) Bloggerhttp://www.blogger.com/profile/17511014932858390956noreply@blogger.com13tag:blogger.com,1999:blog-2916826141550576180.post-33101935357333942922012-01-31T10:05:00.000-08:002012-02-11T22:03:12.559-08:00Create Launcher Icon For Your Android AppIf you followed my last blog on <a href="http://android-meda.blogspot.com/2012/01/writing-your-first-android-app-body.html">Writing Your First Android App - Body Mass Index Calculator</a>, you should have a good idea on creating simple nice apps for Android. In this post, I will cover how to add a launcher icon for the app (instead of the android robot icon shown by default).<br />
<br />
<b>1. Prepare the Icons</b><br />
<br />
You need to create a set of icons with different resolutions and dimensions to suit with different types of phone displays. Android developer website provides a <a href="http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#templatespack">set of template icons</a>, that you can use to start designing your icons. They are photoshop files with .ps extensions. You can also use free tools like <a href="http://www.gimp.org/">GIMP</a> to open these template files and modify them, or you can create the icon images from the scratch.<br />
<br />
Here are the specified dimension (width x height) and the resolution (dpi) of the icon for different types of displays.<br />
<ul>
<li>Low density screens (ldpi): 36x36px, 120dpi</li>
<li>Medium density screens (mdpi): 48x48px, 160dpi</li>
<li>High density screens (hdpi): 72x72px, 240dpi</li>
<li>Extra high density screens (xdpi): 96x96px, 320dpi</li>
</ul>
Android developer website recommends you make use of alpha channel in your icons for transparency. That gives the icons a cool look with any background image. <br />
<ul>
</ul>
<br />
Here is the set of icons I prepared for the BMI Calculator app.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-VVkHoFuUgEcPdARop6O6CQNdAytFmI2tNoyxRfsPE8plQy8II-O_T-gRi7KOIGLkJij9AVBauzaxJi6auzIXv9M4LvAq-YQJ8h9BtizGRO3tX-kEWnc9Z9LCbLiVsgSS9eNoC4hNpg/s1600/iconset2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-VVkHoFuUgEcPdARop6O6CQNdAytFmI2tNoyxRfsPE8plQy8II-O_T-gRi7KOIGLkJij9AVBauzaxJi6auzIXv9M4LvAq-YQJ8h9BtizGRO3tX-kEWnc9Z9LCbLiVsgSS9eNoC4hNpg/s400/iconset2.png" width="400" /></a></div>
<b>2. Add Icons to your project</b><br />
<br />
Open the 'res' directory in your project and copy the icons into the corresponding sub directories listed heer.<br />
<ul>
<li>Low density screen icon : res/drawable-ldpi</li>
<li>Medium density screen icon : res/drawable-mdpi</li>
<li>High density screen icon : res/drawable-hdpi</li>
<li>Extra high density screen icon : res/drawable-xdpi</li>
</ul>
Make sure you rename all your icons to "ic_launcher.png". Once you finish, the directory structure should look like the following screenshot.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEislv0x5aSFpBj0VmAvBvALxB2rMCpTnzC3FnvwKQP8BLKd1GR4pAD3Kbbgy1c2Hmq-RMmZCXsDrjzsGkC2QBjbW-6XvmFQsfn9aw29_d0eTBYaNGzOvj0r3uUoxKYC2XhqHrm6vCo6XJo/s1600/icon-directory.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEislv0x5aSFpBj0VmAvBvALxB2rMCpTnzC3FnvwKQP8BLKd1GR4pAD3Kbbgy1c2Hmq-RMmZCXsDrjzsGkC2QBjbW-6XvmFQsfn9aw29_d0eTBYaNGzOvj0r3uUoxKYC2XhqHrm6vCo6XJo/s320/icon-directory.png" width="266" /></a></div>
<br />
That's it. If you put the icons in the correct directory with the correct name, the android development kit will pick them and use for the launcher icon of you app.<br />
<br />
<b>2. Test the launcher icon in your phone</b><br />
<br />
Check reinstalling the app on your phone. (You can redo the step5 mentioned in the previous blog (<a href="http://android-meda.blogspot.com/2012/01/writing-your-first-android-app-body.html">Writing Your First Android App - Body Mass Index Calculator</a>) to reinstall the app on your phone. Click the app drawer and see how well the icon of your app goes with other apps.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9M4w2w5wm5e1U6Hpk9Z_mPp_9J3YbuDeNmlK7TAXHfxeJbe46TkJryWFGKCN0X7pG9ZU5B3HrVKeeX-0cwgQhNnKwY1MSX6P4N7pY4woclo2HWlxTMpJ1D6ArKSHJonnZ7liowxZ9QY/s1600/device-screenshot2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9M4w2w5wm5e1U6Hpk9Z_mPp_9J3YbuDeNmlK7TAXHfxeJbe46TkJryWFGKCN0X7pG9ZU5B3HrVKeeX-0cwgQhNnKwY1MSX6P4N7pY4woclo2HWlxTMpJ1D6ArKSHJonnZ7liowxZ9QY/s400/device-screenshot2.png" width="240" /></a></div>
You can download the eclipse project and the android app that we created in this post from following links.
<table border="1px solid">
<tbody>
<tr>
<td>Download the eclipse project files (zipped)
</td>
<td><a href="https://sites.google.com/site/androidmedablogger/files/com.blogger.android.meda.bmicalculator-updated.zip?attredirects=0&d=1">com.blogger.android.meda.bmicalculator-updated.zip</a>
</td>
</tr>
<tr>
<td>Access the Source code from github
</td>
<td><a target="_blank" href="https://github.com/androidmeda-blogger/Androidmeda-Blog/tree/279f8b209deeb8bce0fc704384992c94b5ef1798">github repo</a>
</td>
</tr>
<tr>
<td>Download the free BMI Calculator app (the latest version) from the Android Market.
</td>
<td><a target="_blank" href="http://market.android.com/details?id=com.blogger.android.meda.bmicalculator">
<img alt="Available in Android Market" src="http://www.android.com/images/brand/45_avail_market_logo2.png" />
</a>
</td>
</tr>
</tbody></table>Android(meda) Bloggerhttp://www.blogger.com/profile/17511014932858390956noreply@blogger.com16tag:blogger.com,1999:blog-2916826141550576180.post-40350886740559399162012-01-22T16:07:00.000-08:002012-02-18T19:12:23.079-08:00Writing Your First Android App - Body Mass Index CalculatorThis tutorial will guide you to write a simple Android app using the available button and text widgets. What our app will do is ask user for his weight and the height and calculate the Body Mass Index (BMI) for him with the information that whether the user is underweight, normal or overweight.<br />
<br />
<b>1. Create the Eclipse Project for the Android App</b><br />
<br />
First make sure you have installed the Android Development Tools by following my previous blog post, <a href="http://android-meda.blogspot.com/2012/01/installing-android-development-tools-in_21.html">Installing Android Development Tools in Windows</a>. After the setup, start eclipse, and click the menu File->New->Android Project.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACxpQdfkwlh2_wEgwZ9tDg1XvY6YNTJMqPdJLaY2f8mpNuSGXjebhccGzO00cCEIrU3_dDS4WINEoRtiJ_SDYZh8HrfoYFsMOlcQCqrgq4HRAuOGwenkL9PADuY4N8xcVMYiY12DycdM/s1600/menu-cropped.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACxpQdfkwlh2_wEgwZ9tDg1XvY6YNTJMqPdJLaY2f8mpNuSGXjebhccGzO00cCEIrU3_dDS4WINEoRtiJ_SDYZh8HrfoYFsMOlcQCqrgq4HRAuOGwenkL9PADuY4N8xcVMYiY12DycdM/s400/menu-cropped.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Creating an Eclipse Project for Android Developments</td><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
In the "New Android Project" wizard, give a name to your project. <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWcPoKwXq1KNDHWs2oDH8sWoeNjdgqcuVp7JKG6-dMDovmoARfTL9lrAijJr-xsspvesAMAIIKbkhFePgsDqYxn-nLnBxmgtp4kfXLvNRzKRVEgOEjDvRSm6vrw9TelUAiqj-coOa48I/s1600/new-project1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWcPoKwXq1KNDHWs2oDH8sWoeNjdgqcuVp7JKG6-dMDovmoARfTL9lrAijJr-xsspvesAMAIIKbkhFePgsDqYxn-nLnBxmgtp4kfXLvNRzKRVEgOEjDvRSm6vrw9TelUAiqj-coOa48I/s400/new-project1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Giving a project name for the Android App</td></tr>
</tbody></table>
<br />
I'm giving the name "com.blogger.android.meda.bmicalculator". Note my name forms from the package name convention of Java, starts with the opposite sequence of my url parts and then the name for the project. This will uniquely identify my project. Click 'Next' to continue.<br />
<br />
Select the Android version you want to run the app. I will keep the Android 4.0 checked.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUmKE2rj2FCVp7YK7gNtXfl9mqnillsDaTImnF8gsMW92qVBI3dCuthJj1mV2aQfqq-KbYk5J0Q0Y6qY9zatBMPo8O9kgZLu473VkdgTh1fqdSKhnLA8tlLDp2kaNL69PjtNdM_iJ_uqY/s1600/android-versions.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUmKE2rj2FCVp7YK7gNtXfl9mqnillsDaTImnF8gsMW92qVBI3dCuthJj1mV2aQfqq-KbYk5J0Q0Y6qY9zatBMPo8O9kgZLu473VkdgTh1fqdSKhnLA8tlLDp2kaNL69PjtNdM_iJ_uqY/s400/android-versions.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Selecting the Target Android SDK version</td></tr>
</tbody></table>
<br />
From the next window fill the information as following and click 'Finish' to finalize creating the project.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBfDPE6-b7NKItMtwgzFNnOgyAG1M_idfQ2TJaM4ZpWYN5JB9oss8A_-mOJTiIuU3-uQ3qbmlrZFoMG1SrY3wzA2uN-F8TLMl-8Hea_XhnI5IoFRjwExS8dqzc1w6MbzflMkYzM5HrbQ/s1600/app-name.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBfDPE6-b7NKItMtwgzFNnOgyAG1M_idfQ2TJaM4ZpWYN5JB9oss8A_-mOJTiIuU3-uQ3qbmlrZFoMG1SrY3wzA2uN-F8TLMl-8Hea_XhnI5IoFRjwExS8dqzc1w6MbzflMkYzM5HrbQ/s400/app-name.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Adding Your Application Information</td></tr>
</tbody></table>
<br />
<b>2. Design the User Interface (UI)</b><br />
<b> </b><br />
Designing a (UI) for an android app is very easy. You can do that by simply drag and drop of widgets like text box, buttons into the form in the WYSIWYG editor in Eclipse. To get to the UI Designer double click the res/main.xml file (shown below) under your project from Package Explorer window.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhsb52lPt1JZYsi21ojrWHUqSOl3UU4TjXNgRypxG3e_zjavoFOpPXmNdzYdyrZkFCRLi-IPkQB-BNcw2zjmjp9NqDVMxki_2g3dp9Y0FS1_nVmRp6ip3UM2C2YTwHlPPYFGUqWSEuqaI/s1600/main-xml-pointer.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhsb52lPt1JZYsi21ojrWHUqSOl3UU4TjXNgRypxG3e_zjavoFOpPXmNdzYdyrZkFCRLi-IPkQB-BNcw2zjmjp9NqDVMxki_2g3dp9Y0FS1_nVmRp6ip3UM2C2YTwHlPPYFGUqWSEuqaI/s400/main-xml-pointer.png" width="285" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Locating the XML file to design the UI</td></tr>
</tbody></table>
<br />
When you open that file by double clicking, you will get to the WYSIWYG (Graphical Layout) editor. You will see there is a hello world greeting has been added by default. Just select the "Hello Wold, BMICalculatorActivity" label and delete it (by pressing the 'delete' button) to clean the form.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVr_yopvoHilFlWuuCr4uzmVyIvypzPHB_RBEneCeNJxrCz_BF-yAIn8Y-GOPyWXKpXaYr1h4eDXY8K0vx-BLF3U03zOE0Yhn5dopQ3Byjmbwl6N6ziPnkxXw0FUkRBpOPyKTgGwTVXGc/s1600/editor1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVr_yopvoHilFlWuuCr4uzmVyIvypzPHB_RBEneCeNJxrCz_BF-yAIn8Y-GOPyWXKpXaYr1h4eDXY8K0vx-BLF3U03zOE0Yhn5dopQ3Byjmbwl6N6ziPnkxXw0FUkRBpOPyKTgGwTVXGc/s400/editor1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Get Familiar with the UI Editor</td><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
<br />
Now drag a medium size label widgets from the Platte to the form to get the following look for the UI.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhOjnn9LHeB84ycgTeSp5dxNwjRGo_eEG2hFVQTQ3yk_EUyiUoGOYWIz3RWlYhIwugZkKW9OzISnJEIBMbPLqkOdVc1shaepQJ6kXLHFrgUeckAawmqAHgjyNpSbTZqG3AnxzxBrDqdw/s1600/medium-label.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhOjnn9LHeB84ycgTeSp5dxNwjRGo_eEG2hFVQTQ3yk_EUyiUoGOYWIz3RWlYhIwugZkKW9OzISnJEIBMbPLqkOdVc1shaepQJ6kXLHFrgUeckAawmqAHgjyNpSbTZqG3AnxzxBrDqdw/s400/medium-label.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Drag and Drop a Label (TextView Widget)</td></tr>
</tbody></table>
<br />
To edit the text of the label, right click on it and select "Edit Text...". That will give you the "Resource Chooser" form. <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2AY1LU52c6IA3XMU7Up2vit9H2gpoc1gvcaZPafscy4Jg6vEHP7QKlJ6lO-xgssrcsuwdNLZwsB7TZSEYAUbypTDCQp0ZTDpuSP6Dl-q9kj6btNQQGsYtpmpCR2jmVu5ZwTPa4aI0UTU/s1600/Resource-Chooser.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2AY1LU52c6IA3XMU7Up2vit9H2gpoc1gvcaZPafscy4Jg6vEHP7QKlJ6lO-xgssrcsuwdNLZwsB7TZSEYAUbypTDCQp0ZTDpuSP6Dl-q9kj6btNQQGsYtpmpCR2jmVu5ZwTPa4aI0UTU/s400/Resource-Chooser.png" width="301" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The resource selection panel</td></tr>
</tbody></table>
From there, Click 'New String.." at the bottom of the form to declare a new string. This label should contain the String "Your Weight (lbs)". So in the new form put "Your Weight (lbs)" as the String and "weightLabel" as the R.String and click "OK".<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTGAClLIdokidoDRiBG_YZqMYra121r-UVxClWJZIdjIK-WDJO-w9FjVcgI2GF4s54vh0W7mGBMKyfTbzoTdg-4mqbbEFTZUteAXR5mZaSlQcL1euFdzfRcEzPHq3uJl56aSpUKWYxbA/s1600/android-string3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTGAClLIdokidoDRiBG_YZqMYra121r-UVxClWJZIdjIK-WDJO-w9FjVcgI2GF4s54vh0W7mGBMKyfTbzoTdg-4mqbbEFTZUteAXR5mZaSlQcL1euFdzfRcEzPHq3uJl56aSpUKWYxbA/s400/android-string3.png" width="371" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Adding a new string</td></tr>
</tbody></table>
<br />
<br />
Click 'OK' in the Resource Chooser dialog box (make sure the string "weightLabel" is selected) and make sure your label contain the desired string value.<br />
<br />
Next Drag a text field to allow user to input the weight. That should be a text field that allow user type decimal numbers (As users enter weight as decimal numbers). For that drag the text field labeled as 42.0 in the Palette to the form.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02KbjhIJtoms8xi2YXnO9CZi9yMA2F7Y6KWXQRs9hQvMpQXlGXfrwTq8QT39cFhkHQaC-1RGWYz4u5m0pI4x8Gd_tkoZF8LPS4WFRlsJHU-rwTc5SV9Fiq9ZKBqXz4kQQIGPKHVrv61s/s1600/text-field.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="383" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02KbjhIJtoms8xi2YXnO9CZi9yMA2F7Y6KWXQRs9hQvMpQXlGXfrwTq8QT39cFhkHQaC-1RGWYz4u5m0pI4x8Gd_tkoZF8LPS4WFRlsJHU-rwTc5SV9Fiq9ZKBqXz4kQQIGPKHVrv61s/s400/text-field.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Drag and Drop a Text field (EditText widget)</td></tr>
</tbody></table>
<br />
Right click on the newly added text field and click "Edit ID". That allows you to provide a meaningful names to the text field. (So it is easier to refer them from your code). Give the ID "weightText" and click "OK".<br />
<br />
Now add the following widgets to the form in the same order mentioned.<br />
<ol>
<li>A "Medium size label" and label with string value "Your Height (feets)" and R.String as "heightLabel". (You have to create a new string resource similar to the "Your Weight (lbs)" label mentioned above.)</li>
<li>A text field with decimal numbers. Give it the id "heightText". (By right clicking the text field and clicking "Edit ID".)</li>
<li>A Button. Right click and from the menu click "Other Properties" -> "All By Name" -> "Text" and add a new String Resource (String: Calculate and R.String: calculateButton). Similarly set the "onClick" property (You can choose it by right clicking and selecting "Other Properties" -> "All By Name"->onClick) to "calculateClickHandler". Set the button's id as "calculateButton".</li>
<li>a Large Label. Give it the id "resultLabel". Set the text property of the label to a empty string. (with the R.String: emptyString)</li>
</ol>
That is the UI for the BMI Calculator app. Check whether you get the UI similar to this one.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCBvsi8UXQ3Gwmxjq_3UTeINZ0B-iK9L1317Uk3C2SIm43-4yfDVsIYt9rrFVx_YhVLORS2fmbCsoUzgkb8tbyOL7CVUnTAtBxRAFNhEAxX_KqsJXhU0J2-GwS_gI_1nP-iYsiH-wqsx4/s1600/finished-editor.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCBvsi8UXQ3Gwmxjq_3UTeINZ0B-iK9L1317Uk3C2SIm43-4yfDVsIYt9rrFVx_YhVLORS2fmbCsoUzgkb8tbyOL7CVUnTAtBxRAFNhEAxX_KqsJXhU0J2-GwS_gI_1nP-iYsiH-wqsx4/s400/finished-editor.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The final UI for the App</td></tr>
</tbody></table>
<br />
If you click the main.xml tab in the bottom of the window, you can review or edit the strings and IDs you have associated with widgets. Check whether you got one similar to this one.<br />
<br />
<pre class="xml" xmlns="http://www.w3.org/1999/xhtml"><span style="color: #009900;"><span style="color: black; font-weight: bold;"><?xml</span> <span style="color: #000066;">version</span>=<span style="color: red;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: red;">"utf-8"</span><span style="color: black; font-weight: bold;">?></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><LinearLayout</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: red;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"fill_parent"</span>
<span style="color: #000066;">android:orientation</span>=<span style="color: red;">"vertical"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView1"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/weightLabel"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><EditText</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/weightText"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:inputType</span>=<span style="color: red;">"numberDecimal"</span> <span style="color: black; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><requestFocus</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></EditText<span style="color: black; font-weight: bold;">></span></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/textView2"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/heightLabel"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceMedium"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><EditText</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/heightText"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"match_parent"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:inputType</span>=<span style="color: red;">"numberDecimal"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><Button</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/calculateButton"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:onClick</span>=<span style="color: red;">"calculateClickHandler"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/calculateButton"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"><TextView</span>
<span style="color: #000066;">android:id</span>=<span style="color: red;">"@+id/resultLabel"</span>
<span style="color: #000066;">android:layout_width</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:layout_height</span>=<span style="color: red;">"wrap_content"</span>
<span style="color: #000066;">android:text</span>=<span style="color: red;">"@string/EmptyString"</span>
<span style="color: #000066;">android:textAppearance</span>=<span style="color: red;">"?android:attr/textAppearanceLarge"</span> <span style="color: black; font-weight: bold;">/></span></span>
<span style="color: #009900;"><span style="color: black; font-weight: bold;"></LinearLayout<span style="color: black; font-weight: bold;">></span></span></span></pre>
<br />
<br />
<b>3. Writing Code for Your App</b><br />
<br />
After designing the UI, we have to write a small piece of code, that trigger BMI calculation when user click the "Calculate" button. This is written in the src/com.blogger.android.meda.bmicalculator/BMICalculatorActivity.java file.<br />
<br />
Check the below code and make sure you understand each step properly, specially on how to get references to the widgets in the UI and how to manipulate their texts.<br />
<br />
<pre class="java" xmlns="http://www.w3.org/1999/xhtml"><span style="color: black; font-weight: bold;">package</span> com.<span style="color: #006600;">blogger</span>.<span style="color: #006600;">android</span>.<span style="color: #006600;">meda</span>.<span style="color: #006600;">bmicalculator</span>;
<span style="color: #a1a100;">import android.app.Activity;</span>
<span style="color: #a1a100;">import android.os.Bundle;</span>
<span style="color: #a1a100;">import android.view.View;</span>
<span style="color: #a1a100;">import android.widget.EditText;</span>
<span style="color: #a1a100;">import android.widget.TextView;</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: black; font-weight: bold;">class</span> BMICalculatorActivity <span style="color: black; font-weight: bold;">extends</span> Activity <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">/** Called when the activity is first created. */</span>
@Override
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> onCreate<span style="color: #66cc66;">(</span>Bundle savedInstanceState<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">super</span>.<span style="color: #006600;">onCreate</span><span style="color: #66cc66;">(</span>savedInstanceState<span style="color: #66cc66;">)</span>;
setContentView<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">layout</span>.<span style="color: #006600;">main</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: black; font-weight: bold;">public</span> <span style="color: #993333;">void</span> calculateClickHandler<span style="color: #66cc66;">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3AView+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">View</span></a> view<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// make sure we handle the click of the calculator button</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>view.<span style="color: #006600;">getId</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> == R.<span style="color: #006600;">id</span>.<span style="color: #006600;">calculateButton</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: grey; font-style: italic;">// get the references to the widgets</span>
EditText weightText = <span style="color: #66cc66;">(</span>EditText<span style="color: #66cc66;">)</span>findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">weightText</span><span style="color: #66cc66;">)</span>;
EditText heightText = <span style="color: #66cc66;">(</span>EditText<span style="color: #66cc66;">)</span>findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">heightText</span><span style="color: #66cc66;">)</span>;
TextView resultText = <span style="color: #66cc66;">(</span>TextView<span style="color: #66cc66;">)</span>findViewById<span style="color: #66cc66;">(</span>R.<span style="color: #006600;">id</span>.<span style="color: #006600;">resultLabel</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// get the users values from the widget references</span>
<span style="color: #993333;">float</span> weight = <a href="http://www.google.com/search?hl=en&q=allinurl%3AFloat+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">Float</span></a>.<span style="color: #006600;">parseFloat</span><span style="color: #66cc66;">(</span>weightText.<span style="color: #006600;">getText</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">toString</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #993333;">float</span> height = <a href="http://www.google.com/search?hl=en&q=allinurl%3AFloat+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">Float</span></a>.<span style="color: #006600;">parseFloat</span><span style="color: #66cc66;">(</span>heightText.<span style="color: #006600;">getText</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">toString</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// calculate the bmi value</span>
<span style="color: #993333;">float</span> bmiValue = calculateBMI<span style="color: #66cc66;">(</span>weight, height<span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// interpret the meaning of the bmi value</span>
<a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> bmiInterpretation = interpretBMI<span style="color: #66cc66;">(</span>bmiValue<span style="color: #66cc66;">)</span>;
<span style="color: grey; font-style: italic;">// now set the value in the result text</span>
resultText.<span style="color: #006600;">setText</span><span style="color: #66cc66;">(</span>bmiValue + <span style="color: red;">"-"</span> + bmiInterpretation<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// the formula to calculate the BMI index</span>
<span style="color: grey; font-style: italic;">// check for http://en.wikipedia.org/wiki/Body_mass_index</span>
<span style="color: black; font-weight: bold;">private</span> <span style="color: #993333;">float</span> calculateBMI <span style="color: #66cc66;">(</span><span style="color: #993333;">float</span> weight, <span style="color: #993333;">float</span> height<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: #66cc66;">(</span><span style="color: #993333;">float</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">(</span>weight * <span style="color: #cc66cc;">4.88</span> / <span style="color: #66cc66;">(</span>height * height<span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: grey; font-style: italic;">// interpret what BMI means</span>
<span style="color: black; font-weight: bold;">private</span> <a href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> interpretBMI<span style="color: #66cc66;">(</span><span style="color: #993333;">float</span> bmiValue<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">16</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: red;">"Severely underweight"</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">18.5</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: red;">"Underweight"</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">25</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: red;">"Normal"</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span>bmiValue < <span style="color: #cc66cc;">30</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: red;">"Overweight"</span>;
<span style="color: #66cc66;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">{</span>
<span style="color: black; font-weight: bold;">return</span> <span style="color: red;">"Obese"</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span></pre>
<br />
<b>4. Running Your App in an Android Simulator</b><br />
<br />
To create a virtual device to run you app, Goto Window -> AVD Manager from the eclipse. Click "New" to create a new android virtual device. Set the configurations similar to the below screenshot and click "CreateAVD".<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNV05DeFuVq8O8gYI4x5uMruHxFEVefMcTHFNZ2QFrh2aeEiFqVo25Z5BYPsvRdThjPGq3sCE71pwggRK5QbhKLU8YXSS381DAIbh5FRbI8jpz0vmakye9l8lAz_dKDkcBDAsl-f06gc/s1600/avd.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNV05DeFuVq8O8gYI4x5uMruHxFEVefMcTHFNZ2QFrh2aeEiFqVo25Z5BYPsvRdThjPGq3sCE71pwggRK5QbhKLU8YXSS381DAIbh5FRbI8jpz0vmakye9l8lAz_dKDkcBDAsl-f06gc/s400/avd.png" width="247" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Creating an Android virtual device (Simulator) to run your App</td></tr>
</tbody></table>
<br />
Then right click the project from the "Package Explorer" window and select "Run As" -> "Run Android Application". Wait for sometime till the devices is booted.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycM_da4y7_vEHLVz9M-6E0ZwBFx42NV9gD3mIYIycGoS8O2lxGQ2iT43IgU7rl4atRO5xiEHnp_q4p-9yZ1o0YxyojkRCXpq4msWtVIEwlKK9Tgx0WsR6-UMO8DxQpIwE6CuOqY_AMRg/s1600/androidvd1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycM_da4y7_vEHLVz9M-6E0ZwBFx42NV9gD3mIYIycGoS8O2lxGQ2iT43IgU7rl4atRO5xiEHnp_q4p-9yZ1o0YxyojkRCXpq4msWtVIEwlKK9Tgx0WsR6-UMO8DxQpIwE6CuOqY_AMRg/s400/androidvd1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Android Virtual Device</td></tr>
</tbody></table>
<br />
<br />
Then then click the "Application Drawer" of the virtual device at the bottom and click the "BMI Calculator" app.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipddQrq_7rdxZJ5hQK9PFT5og2W2ZEdCPE5Rowkur7d2u-Rl8ITinUsBfMU0NQjFBb4IKqag2bnVHwlV1sewsH_CTeaWw_DF-K-QMGv7ULi9Bj3NWOtz2mh3eBclP3Msajpo_6pamsOt8/s1600/androidavd2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipddQrq_7rdxZJ5hQK9PFT5og2W2ZEdCPE5Rowkur7d2u-Rl8ITinUsBfMU0NQjFBb4IKqag2bnVHwlV1sewsH_CTeaWw_DF-K-QMGv7ULi9Bj3NWOtz2mh3eBclP3Msajpo_6pamsOt8/s400/androidavd2.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Running our App on Android Virtual Device</td></tr>
</tbody></table>
<br />
<br />
Put your weight and Height in the text boxes and check your BMI. I'm a bit overweight as all (good?) software developers should be:)<br />
<b><br /></b><br />
<b>5. Running Your App in Your Android Phone</b><br />
<br />
First you have to enable the "USB Debugging" mode in your phone. For that goto Settings -> Applications -> Development and check "USB debugging". And connect your phone to USB port of your computer.<br />
<br />
Before launching the app, make sure the app is built with the SDK that compatible with your device. To check that, right click the project name from the "Package Explorer" window (in the eclipse IDE) and click "Properties". Select the Android tab, check the android version of your phone and click OK. And you have to make sure the min SDK version of the AndroidManifest.xml is also correct.<br />
<br />
Now click, Run->Run Configuration. From the "Run Configuration" form, select the BMI project (named 'com.blogger.android.meda.bmicalculator') under the Android Application and click Target tab.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4eTrDyqobg62kFUdyD5eV6rLPIklw4ePDRwFyxyKmcS_4vtsXLaJ8-ozjRvulT_YzZgMEpmsgLph5upAIsIft1lA4jEFKPiLJvXn5ahPolLAWTwxbHktlMNKDYiedGrn2ZNxdmRnj98c/s1600/target-manual.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4eTrDyqobg62kFUdyD5eV6rLPIklw4ePDRwFyxyKmcS_4vtsXLaJ8-ozjRvulT_YzZgMEpmsgLph5upAIsIft1lA4jEFKPiLJvXn5ahPolLAWTwxbHktlMNKDYiedGrn2ZNxdmRnj98c/s400/target-manual.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Running the App on a Manual Target (To select run it on the phone)</td></tr>
</tbody></table>
<br />
<br />
From there select "Manual" as the deployment target selection mode (as shown above), and press the "Run" button.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kcWDtqsEEiOX1V_kAEUvuvKE-IoDGVGK7iB-dKEHuONufo1fdfPUiwbTEufZ12MbTuW11_uueva23zc84ilRUuo9PF_SeOR0wL0MgDNR2wPXfBJS7m3BCqQ7WE3B3HhEKoZ8WEPOndQ/s1600/mydevice2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kcWDtqsEEiOX1V_kAEUvuvKE-IoDGVGK7iB-dKEHuONufo1fdfPUiwbTEufZ12MbTuW11_uueva23zc84ilRUuo9PF_SeOR0wL0MgDNR2wPXfBJS7m3BCqQ7WE3B3HhEKoZ8WEPOndQ/s400/mydevice2.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Selecting the phone as the running target</td></tr>
</tbody></table>
<br />
<br />
Then it show the connected android device or devices. Select the one you want to run your app and click the "OK" button. That will launch your app into your phone. Here is a screenshot of BMI Calculor app in my phone.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR04WamTJQ4IcbwW9m5TWuArakjxr17YT6MB0Stsy4U2WmAk-z22sbm3l3a0Vlp9_xF5GoIqyETyZiOkQrvGXm_rknjxyrZqYgqT93ZhFfUg-EO4r6PqjF8YLk-L2nvYlZC6wFW9Ek270/s1600/my-screeshot2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR04WamTJQ4IcbwW9m5TWuArakjxr17YT6MB0Stsy4U2WmAk-z22sbm3l3a0Vlp9_xF5GoIqyETyZiOkQrvGXm_rknjxyrZqYgqT93ZhFfUg-EO4r6PqjF8YLk-L2nvYlZC6wFW9Ek270/s400/my-screeshot2.png" width="240" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Running the app on the phone</td></tr>
</tbody></table>
<br />
Hope you had fun developing this nice app and seeing it running on your phone. This is just a start. Hope you explore more and develop more awesome apps!!!<br />
<br />
You can download the eclipse project and the android app that we created in this post from following links.<br />
<br />
<table border="1px solid">
<tbody>
<tr>
<td>Download the eclipse project files (zipped)
</td>
<td><a href="https://sites.google.com/site/androidmedablogger/files/com.blogger.android.meda.bmicalculator.zip?attredirects=0&d=1">com.blogger.android.meda.bmicalculator.zip</a>
</td>
</tr>
<tr>
<td>Access the Source code from github
</td>
<td><a href="https://github.com/androidmeda-blogger/Androidmeda-Blog/tree/814450e20bc4441855ef659dccc7c054ea5d534e" target="_blank">github repo</a>
</td>
</tr>
<tr>
<td>Download the free BMI Calculator app (the latest version) from the Android Market.
</td>
<td><a href="http://market.android.com/details?id=com.blogger.android.meda.bmicalculator" target="_blank">
<img alt="Available in Android Market" src="http://www.android.com/images/brand/45_avail_market_logo2.png" />
</a>
</td>
</tr>
</tbody></table>
<br />
<b>Next Steps</b><br />
<br />
To arrange the widgets in your app using layouts, read <a href="http://android-meda.blogspot.com/2012/02/tutorial-using-layouts-in-your-android.html">Tutorial: Using Layouts in your Android App</a>. To add an icon to your app, read <a href="http://android-meda.blogspot.com/2012/01/create-launcher-icon-for-your-android.html">Create Launcher Icon For Your Android App</a>. To add themes to the app, read <a href="http://android-meda.blogspot.com/2012/02/tutorial-theming-android-app.html">Tutorial: Theming an Android App</a>.Android(meda) Bloggerhttp://www.blogger.com/profile/17511014932858390956noreply@blogger.com178tag:blogger.com,1999:blog-2916826141550576180.post-48876241972256435022012-01-21T20:45:00.001-08:002012-01-21T20:45:57.748-08:00Installing Android Development Tools in WindowsTo start a series of tutorial on Android development tools, I will write about installing Android development tools in a windows computer.<br />
<br />
<u><b>Download and Install Android SDK</b></u><br />
First Download the Android SDK for Windows from the <a href="http://developer.android.com/sdk/index.html">Android developer website</a>. There are two files for windows, a zip files and exe. Download the exe version shown below, as it is easier to setup.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjezG9tyUpXGUAQy5UBlRW2kQ2p6ouuEvcDpZx3w0KmiJW4GDU0le0ElIxLBi59vep1U859rBV_JpgwBM105Tr9rPSWY4VA_QbD-LtIjMIgZchJqRLjJuq9vO78bDF-hIRTqxxyGeowU9pm/s1600/installer-location.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjezG9tyUpXGUAQy5UBlRW2kQ2p6ouuEvcDpZx3w0KmiJW4GDU0le0ElIxLBi59vep1U859rBV_JpgwBM105Tr9rPSWY4VA_QbD-LtIjMIgZchJqRLjJuq9vO78bDF-hIRTqxxyGeowU9pm/s400/installer-location.png" width="352" /></a></div>
<br />
Run the downloaded exe and install the SDK to your computer. It will take 45.1MB of your space.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGzlzUnysMFOQYqYpOm1DGMSsaGre7ZeO0ZtMbkPl8lbWSyCY-kzFDucQOzCVNYdM84AwMzQaWwvJX8PzC00bEODSydD5xYg_sIsC7Mt3qEfFEgXfmk0MGpx2lpXjeFnhD7kPQR4dh5s8F/s1600/installer-setup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGzlzUnysMFOQYqYpOm1DGMSsaGre7ZeO0ZtMbkPl8lbWSyCY-kzFDucQOzCVNYdM84AwMzQaWwvJX8PzC00bEODSydD5xYg_sIsC7Mt3qEfFEgXfmk0MGpx2lpXjeFnhD7kPQR4dh5s8F/s400/installer-setup.png" width="400" /></a></div>
<br />
<br />
At the end of the installation, by default the installer ask you to run the SDK manager to download system images of different android versions. Check that checkbox and start the SDK manager. (You can skip this step now and later run the SDK manager by clicking the "SDK Manager.exe" in the installed folder.)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUYESooKrPraWj_19BFUwsym2_3-i3kmvgV3IljrLogOwEjs1PRgHwTLIIm64zTTMxbV8o-cu39fwFfX2XpJgUrzB23H3aZKwj9uf0cEE0VLa0x-vBKcDfcMwnj-DP0AUg1IOIAtefMUz/s1600/to-sdk-manager.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUYESooKrPraWj_19BFUwsym2_3-i3kmvgV3IljrLogOwEjs1PRgHwTLIIm64zTTMxbV8o-cu39fwFfX2XpJgUrzB23H3aZKwj9uf0cEE0VLa0x-vBKcDfcMwnj-DP0AUg1IOIAtefMUz/s400/to-sdk-manager.png" width="400" /></a></div>
<br />
<b><u>Setup SDK Versions</u></b><br />
SDK Manager shows a list of Android versions of system images to be installed. I prefer to select the latest Android version (by this time it is Android 4.0.3) and an older Android version that actually my phone runs (Android 2.2). You have the freedom to download versions you prefer. But I recommend you to download an older version, because there are lot of phones that run old versions of Android; If you test your android app in those versions, you can get a wider user base for you app. And remember to get the latest version as well, because you can test the newest cool features of Android from that. After selecting the necessary packages, click 'Install X packages' and 'Accept all' for terms of use. Then it will continue to download the packages.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuhdDVYd9NU349n1ECR4-REZu-NVMm7SK9p5mU-4MGDb3AszlsYG2T7TsJAoZ2srNKB6O-MViE7JCnHP9OVJFF2I7x4rikvzTkqlXkpTp5yuhtEb4s5wntvxRRl8cb0HxyLhmwWgIR1yQ/s1600/sdk-manager.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuhdDVYd9NU349n1ECR4-REZu-NVMm7SK9p5mU-4MGDb3AszlsYG2T7TsJAoZ2srNKB6O-MViE7JCnHP9OVJFF2I7x4rikvzTkqlXkpTp5yuhtEb4s5wntvxRRl8cb0HxyLhmwWgIR1yQ/s400/sdk-manager.png" width="400" /></a></div>
<br />
Now if you goto the folder you just installed the SDK (by default "C:\Program Files (x86)\Android\android-sdk") from windows explorer, you will see list of executable files that help you do different tasks.<br />
<br />
android-sdk directory<br />
<br />
<ul>
<li>AVD Manager.exe: Allow to create/edit/delete Android Virtual Devices that help you to simulate your program.</li>
<li>SDK Manager.exe: Installing/Uninstalling Android versions.</li>
</ul>
<br />
android-sdk/platform-tools directory<br />
<br />
<ul>
<li>adb.exe: <a href="http://developer.android.com/guide/developing/tools/adb.html">Android Debug Bridge (ADB)</a>, Allow you to communicate with the android devices that have connected to your computer. You can install programs, issue shell command, view logs through ADB.</li>
<li>aapt.exe: <a href="http://developer.android.com/guide/developing/building/index.html#detailed-build">Android Assert Packaging Tool (AAPT)</a>, Compiles the resource files in your project.</li>
<li>aidl.exe: Compiler for <a href="http://developer.android.com/guide/developing/tools/aidl.html">Android Interface Definition Language (AIDL)</a>.</li>
<li>dexdump.exe: Disassembles dex files (Android bytecodes)</li>
</ul>
<br />
<br />
<b><u>Download and Install Eclipse</u></b><br />
You will be using Eclipse as the IDE to develop Android Apps. Download eclipse form <a href="http://www.eclipse.org/downloads/">http://www.eclipse.org/downloads/</a>. You can use either "Eclipse IDE for Java Developer" or "Eclipse IDE for Java EE Developer" to develop android apps.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0wpjErW2l6IXtQoSQbXXEIns9e6YZnuwaZIJAvyEcjTFV7ze6KqTpTmDlOvqC7x_PIofSrzRmWhdLYQHkW_So537soabzhS-z6GfHuPFZwDM8yFJaMc9kJCEbPVmA6k96atVkPPfKsry/s1600/eclipse-download.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0wpjErW2l6IXtQoSQbXXEIns9e6YZnuwaZIJAvyEcjTFV7ze6KqTpTmDlOvqC7x_PIofSrzRmWhdLYQHkW_So537soabzhS-z6GfHuPFZwDM8yFJaMc9kJCEbPVmA6k96atVkPPfKsry/s400/eclipse-download.png" width="366" /></a></div>
<br />
When you run eclipse, you will be asked to provide the workspace folder. Select a folder that you expect to keep the project files.<br />
<br />
<b><u>Installing ADT (Android Development Toolkit) Plugin for Eclipse</u></b><br />
<br />
In Eclipse menu select Help -> Install New Software..<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CgcLt4qL4zPbMuw83ej5KIVhgtLxcH-dzQfgS10kYlXKxbycIT6PPRxtJdALJ7qAK12hG_pkNJultSy1avvQx9eYOTQtRsivQLlDCbWRxAF5U9H8iUfRi0usEPR9I3LTlonUruMJt0WX/s1600/eclipse-menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CgcLt4qL4zPbMuw83ej5KIVhgtLxcH-dzQfgS10kYlXKxbycIT6PPRxtJdALJ7qAK12hG_pkNJultSy1avvQx9eYOTQtRsivQLlDCbWRxAF5U9H8iUfRi0usEPR9I3LTlonUruMJt0WX/s400/eclipse-menu.png" width="400" /></a></div>
<br />
From the 'Install' form, click 'Add' to add a new repository that host Android related packages from Google.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgebRhKG96apYYX2JjsSujU9bRl75vETbzLQrhLNlJuBng7fuIWF2Y1mBQ0JjikDBiws36SCKEAYzR1gpTMMcV4b5Ed5t9lvtwokuLfq87J0leKTCtER7S9FbyCcjmd0Q0KpbKF0bo7SRC/s1600/eclipse-form-add.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgebRhKG96apYYX2JjsSujU9bRl75vETbzLQrhLNlJuBng7fuIWF2Y1mBQ0JjikDBiws36SCKEAYzR1gpTMMcV4b5Ed5t9lvtwokuLfq87J0leKTCtER7S9FbyCcjmd0Q0KpbKF0bo7SRC/s400/eclipse-form-add.png" width="400" /></a></div>
<br />
From the "Add Repository" dialog box, fill the following details.<br />
<br />
<b>Name</b>: ADT Plugin<br />
<b>Location</b>: https://dl-ssl.google.com/android/eclipse/<br />
<br />
When you click 'OK', it will download the list of packages in the repository. Check 'Developer Tools' and click 'Next' to continue.<br />
<br />
Then it will allow you to review the packages to be installed. Click 'Next' to continue.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTkOhdi_cjKALdBr1Qlcar3pTQ_hzbfdSYQin9xN3aFcO5Wu65dS70csTn6IIZakZ9VSpeyzcKVLURJidEglYk_v42jpoF_GNeP0x2eyVotTEdpkRKM8Qgi21UOSaEKEkgjuXCdFBq7buW/s1600/eclipse-form-review.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTkOhdi_cjKALdBr1Qlcar3pTQ_hzbfdSYQin9xN3aFcO5Wu65dS70csTn6IIZakZ9VSpeyzcKVLURJidEglYk_v42jpoF_GNeP0x2eyVotTEdpkRKM8Qgi21UOSaEKEkgjuXCdFBq7buW/s400/eclipse-form-review.png" width="383" /></a></div>
<br />
After you agree to the license agreement and a warning to install unsigned content, eclipse will start to download and install the ADT packages.<br />
<br />
After the packages are installed, you will be prompted to choose either restart or apply changes without restarting. It is recommended that you restart the system to make sure the packages are installed correctly.<br />
<br />
<b><u>Configure the SDK in your Eclipse</u></b><br />
Once you restart the eclipse, it will ask you to configure the Android SDK.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBqktt1wpP97RDmUFqpe6Bq09_FGV0w1cAvxdSiXovf6X5RoZ5ptfYyV7BAu51eZ20B5uQZbYFB4_E-20mEf62Ewyoua2TVQIvOGbetnSohoDDVMT4kb_7PgSRyrjGShkDhI4KsR6ME8Rj/s1600/configure-sdk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBqktt1wpP97RDmUFqpe6Bq09_FGV0w1cAvxdSiXovf6X5RoZ5ptfYyV7BAu51eZ20B5uQZbYFB4_E-20mEf62Ewyoua2TVQIvOGbetnSohoDDVMT4kb_7PgSRyrjGShkDhI4KsR6ME8Rj/s400/configure-sdk.png" width="400" /></a></div>
<br />
You have two options. 1. Install New SDK, 2. Use Existing SDKs. Since you have already downloaded the SDKs, just point to the directory you have installed in the first step in this tutorial. (In my case, it is "C:\Program Files (x86)\Android\android-sdk").<br />
<br />
And click 'Next' to complete the Installation.<br />
<br />
<b>That's it. </b>You just setup your environment to develop Android apps. Well now you have to learn how to write a simple app. I will cover it in the next blog post.Android(meda) Bloggerhttp://www.blogger.com/profile/17511014932858390956noreply@blogger.com8