Saturday, February 18, 2012

Tutorial: Theming an Android App

In my last blog post (Tutorial: Using Layouts in your Android App), 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 early tutorial - BMI Calculator.

Here is the look and feel of the app before and after applying our custom theme.

Before Applying the Theme
After Applying the Theme

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.

You can use the following links to download the eclipse project and the android app that we are creating in this tutorial.

Download the eclipse project files (zipped) com.blogger.android.meda.bmicalculator-version2.1.zip
Access the Source code from github github repo
Download the free BMI Calculator app (the latest version) from the Android Market. Available in Android Market


Adding a custom Title bar

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)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.blogger.android.meda.bmicalculator"
    android:versionCode="6"
    android:versionName="2.1" >
 
    <uses-sdk android:minSdkVersion="4" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".BMICalculatorActivity" 
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Black.NoTitleBar">

            <intent-filter >
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>
        </activity>
    </application>
</manifest>
 
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.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorBG" >
 
        <ImageView
            android:id="@+id/test_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dip"
            android:src="@drawable/ic_launcher" />
 
        <TextView
            android:id="@+id/textView0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="4dip"
            android:layout_marginLeft="15dip"
            android:layout_marginRight="5dip"
            android:layout_marginTop="9dip"
            android:text="@string/app_name"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="@color/colorFonts" />

    </LinearLayout>


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, Create Launcher Icon For Your Android App). 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.

These steps would give you the following design to the title of the BMI Calculator App.

Custom Title bar


Theming the Widgets

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.
  • Normal: When the button is neither pressed nor focussed.
  • Pressed: When the button is pressed.
  • 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.
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.

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).
Set of Images used in theming Widgets

Drawing 9-Patch Images

Before applying these images for the widgets, we should convert them in to a format called 9-patch images. 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.

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.

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.

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.
Lets run the draw9patch editor and open the "onesided_spinner_normal.png" that we prepared earlier.

draw9patch editor
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.

Making 9-patch Image (red and blue arrows are added for clarity)
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.

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)

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.

Copy all the 9-patch images to the res/drawable directory of the project.

Applying Styles to Widgets

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.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" 
       android:state_pressed="false" 
       android:drawable="@drawable/button_focused" />

    <item android:state_focused="true" 
       android:state_pressed="true"
       android:drawable="@drawable/button_pressed" />

    <item android:state_focused="false" 
       android:state_pressed="true"
   android:drawable="@drawable/button_pressed" />

    <item android:drawable="@drawable/button_normal" />
</selector>

Here the "@drawable/button_focused" refers to the button_focused.9.png file in the res/drawable directory.

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).

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.)


    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

 
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:layout_marginTop="15dip" >
 
            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dip"
                android:text="@string/weightLabel"
                android:textAppearance="?android:attr/textAppearanceMedium" />
 
            <Spinner
                android:id="@+id/spinner1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="@drawable/bmi_twosided_spinner"
                android:prompt="@string/weightLabel" />
 
            <Spinner
                android:id="@+id/spinner2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dip"
                android:layout_weight="1"
                android:background="@drawable/bmi_onesided_spinner"
                android:drawSelectorOnTop="true"
                android:entries="@array/weightUnitsArray" />
        </TableRow>
 
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:layout_marginTop="15dip" >
 
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dip"
                android:text="@string/heightLabel"
                android:textAppearance="?android:attr/textAppearanceMedium" />
 
            <Spinner
                android:id="@+id/spinner3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="@drawable/bmi_twosided_spinner"
                android:prompt="@string/heightLabel" />
 
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dip"
                android:layout_weight="1" >
 
                <Spinner
                    android:id="@+id/spinner4"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/bmi_onesided_spinner"
                    android:entries="@array/heightUnitsArray" />
 
                <Button
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignRight="@+id/spinner4"
                    android:layout_below="@+id/spinner4"
                    android:layout_marginTop="15dip"
                    android:background="@drawable/bmi_button"
                    android:onClick="calculateClickHandler"
                    android:text="@string/calculateButton" />

            </RelativeLayout>

        </TableRow>

    </TableLayout>

Here the "@drawable/bmi_button" refers to the bmi_button.xml in the res/drawable directory that we prepared earlier.

That is all you have to do. Now run the app in your phone and check the new look and feel.

New Look and Feel of the app

Saturday, February 11, 2012

Tutorial: Using Layouts in your Android App

This 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, Writing Your First Android App - Body Mass Index Calculator and then come back here.

In this tutorial, we would be writing a better looking BMI Calculator. For that I'm using the same eclipse project, used in my early post on BMI Calculator. But you can follow this tutorial by creating a new project, as we are making this new BMI Calculator from scratch.

To give a heads up, here is the final UI we are going to create for our App.

The layout of the target Application
While creating this simple UI, we would be using several layouts available in Android API.

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.

Switching between Graphical Layout(WYSIWYG) and XML edtors

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.

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,
  • 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.
  • 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.
  • wrap_content: Widgets will be the smallest it can get, limited by the size of the content inside.
  • fill_parent/match_parent: Widgets will be largest it can get, limited by the size of the container.
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.

Linear Layout (Default)

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.
(Vertical) Linear Layout
Now go to the XML editor and see the corresponding XML.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" /> 

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal" >
        <requestFocus />

    </EditText> 

</LinearLayout>

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".)

(Horizontal) Linear Layout

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)

GridLayout (For Android 4.0+)

Switch to the XML editor and replace the main.xml content with the following content.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" > 

    <GridLayout
        android:id="@+id/gridLayout1"
        android:rowCount="2"
        android:columnCount="3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" > 

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Spinner
            android:id="@+id/spinner2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" /> 

        <Spinner
            android:id="@+id/spinner3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" /> 

        <Spinner
            android:id="@+id/spinner4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" /> 

    </GridLayout> 

</LinearLayout>

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.

Example of GridLayout

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.

TableLayout 
 
Now replace the contents on your main.xml with the following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
 
            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Medium Text"
                android:textAppearance="?android:attr/textAppearanceMedium" />
 
            <Spinner
                android:id="@+id/spinner1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
 
            <Spinner
                android:id="@+id/spinner2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" /> 

        </TableRow>
 
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
 
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Medium Text"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <Spinner
                android:id="@+id/spinner3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
 
            <Spinner
                android:id="@+id/spinner4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </TableRow> 

    </TableLayout>
 
</LinearLayout>

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.

I'm changing above code to do the following modifications.

To have a margin between rows By adding "marginTop" attribute to the TableRow elements
To have a margin between the vertical edges By adding "marginLeft" and "marginRight" attrbitues to the TableRow elements
To have a margin between TextView and spinners By adding "marginRight" attribute to the TextView elements
To stretch the spinners to get the remaining space By setting "layout_width" attribute to "fill_parent" of Spinner elements
In each row, the first spinner should stretch twice as the second spinner. 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"

Here is the modified xml (changes are underlined) and the corresponding graphical layouts for both portrait and landscape views.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dip"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip" >
 
            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Medium Text"
             android:layout_marginRight="5dip"
                android:textAppearance="?android:attr/textAppearanceMedium" />
 
            <Spinner
                android:id="@+id/spinner1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2" />
 
            <Spinner
                android:id="@+id/spinner2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

        </TableRow>
 
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dip" 
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip" >
 
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Medium Text"
             android:layout_marginRight="5dip"
                android:textAppearance="?android:attr/textAppearanceMedium" />
 
            <Spinner
                android:id="@+id/spinner3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2" />
 
            <Spinner
                android:id="@+id/spinner4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
        </TableRow>
 
    </TableLayout>
 
</LinearLayout>

Example of TableLayout (Portrait View)
Example of TableLayout (Landscape View)

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.

Next we will add a button, for that I will use RelativeLayout.

RelativeLayout

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).

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >
 
                <Spinner
                    android:id="@+id/spinner4"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" />
 
                <Button
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignRight="@+id/spinner4"
                    android:layout_below="@+id/spinner4"
                    android:layout_marginTop="15dip"
                    android:text="Button" />

            </RelativeLayout>

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.

Example of RelativeLayout

Linear Layout (Nested)

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.

   <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
        android:layout_marginTop="15dip"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginRight="5dip"
            android:gravity="center_vertical"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />
 
        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
 
            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

        </LinearLayout>
    </LinearLayout>

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".

This will complete our layout arrangement. Finally, It will give the following look in the Graphical Layout editor.

Layout Arrangement (Portrait View)
Layout Arrangement (Landscape View)
Defining Strings in Widgets

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.

Android provide a file res/values/strings.xml in your project to store your strings.
Similar to main.xml (The Layout XML file), it also has a graphical editor and a xml editor to directly edit the file.

strings.xml editor

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')

Press "Add.." button next to the strings list.



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.



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.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">BMI Calculator</string>
    <string name="weightLabel">Weight</string>
</resources>

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.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">BMI Calculator</string>
 
        <!--  labels for widgets -->
    <string name="heightLabel">Height</string>
    <string name="calculateButton">Calculate</string>
    <string name="EmptyString"></string>
    <string name="weightLabel">Weight</string>
    <string name="bmiLabel">Body Mass Index</string>
 
     <!--  the BMI descriptions -->
    <string name="bmiNormal">Normal</string>
    <string name="bmiOver">Overweight</string>
    <string name="bmiUnder">Underweight</string>
    <string name="bmiSUnder">Severely Underweight</string>
    <string name="bmiObese">Obese</string>

 
    <!--  Strings arrays used in Spinner widgets -->
    <string-array name="heightUnitsArray">
        <item >feet/inch</item>
        <item >m/cm</item>

    </string-array>
    <string-array name="weightUnitsArray">
        <item >lb</item>
        <item >kg</item>
    </string-array>
 
    <!--  Colors used to used in the labels and the backgrouds -->
    <color name="colorRed">#ff0000</color>
    <color name="colorYellow">#00ffff</color>
    <color name="colorGreen">#00ff00</color>
    <color name="colorBG">#323232</color>
 
</resources>

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.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@color/colorBG" >
 
    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:layout_marginTop="15dip" >
 
            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dip"
                android:text="@string/weightLabel"
                android:textAppearance="?android:attr/textAppearanceMedium" />
 
            <Spinner
                android:id="@+id/spinner1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:prompt="@string/weightLabel"
                android:layout_weight="2" />
 
            <Spinner
                android:id="@+id/spinner2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:entries="@array/weightUnitsArray" />
        </TableRow>
 
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:layout_marginTop="15dip" >
 
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dip"
                android:text="@string/heightLabel"
                android:textAppearance="?android:attr/textAppearanceMedium" />
 
            <Spinner
                android:id="@+id/spinner3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:prompt="@string/heightLabel"
                android:layout_weight="2" />
 
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >
 
                <Spinner
                    android:id="@+id/spinner4"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:entries="@array/heightUnitsArray" />
 
                <Button
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignRight="@+id/spinner4"
                    android:layout_below="@+id/spinner4"
                    android:layout_marginTop="15dip"
                    android:onClick="calculateClickHandler"
                    android:text="@string/calculateButton" />
 
            </RelativeLayout>
        </TableRow>

    </TableLayout>
 
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
        android:layout_marginTop="15dip"
        android:orientation="horizontal" >

 
        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"

            android:layout_marginRight="5dip"
            android:gravity="center_vertical"
            android:text="@string/bmiLabel"
            android:textAppearance="?android:attr/textAppearanceMedium" />

 
        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:orientation="vertical" >
 
            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"

                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text=""
                android:textAppearance="?android:attr/textAppearanceLarge" />

 
            <TextView
                android:id="@+id/textView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:gravity="center_horizontal"
                android:text=""
                android:textAppearance="?android:attr/textAppearanceLarge" />

        </LinearLayout>

    </LinearLayout>
 
</LinearLayout>

To set the background color 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.
To set the texts of TextViews and Button 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
To change the background color 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.

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.

The Code

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)

package com.blogger.android.meda.bmicalculator;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;

import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;
 
public class BMICalculatorActivity extends Activity {

 /** Called when the activity is first created. */
 
 // declare adaptors to bind with spinners
 ArrayAdapter<String> heightFeetsAdapter;
 ArrayAdapter<String> heightMetersAdapter;
 ArrayAdapter<String> weightLibsAdapter;
 ArrayAdapter<String> weightKgsAdapter;
 
 // declare the references for the UI elements

 Spinner weightSpinner;
 Spinner heightSpinner;
 Spinner weightUnitSpinner;
 Spinner heightUnitSpinner;
 TextView bmiValueText;
 TextView bmiDescriptionText;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
 
  // load the references to the widgets

  weightSpinner = (Spinner) findViewById(R.id.spinner1);
  weightUnitSpinner = (Spinner) findViewById(R.id.spinner2);
  heightSpinner = (Spinner) findViewById(R.id.spinner3);
  heightUnitSpinner = (Spinner) findViewById(R.id.spinner4);
  bmiValueText = (TextView) findViewById(R.id.textView4);
  bmiDescriptionText = (TextView) findViewById(R.id.textView5);
 
  // initialize the value range for the spinners

  initializeSpinnerAdapters();
 
  // load the default values for the spinners
  loadLibsValueRange();
  loadFeetsValueRange();
 
  // add listeners to the unit changes

  addListernsToUnitChanges();
 }
 
 // handler that we defined in "onClick" attribute of the button
 // get called when the button is clicked
 public void calculateClickHandler(View view) {

  // make sure we handle the click of the calculator button
  if (view.getId() == R.id.button1) {

 
   // get the users values from the spinners (converted to floats and
   // metrics units)
   float weight = getSelectedWeight();
   float height = getSelectedHeight();
 
   // calculate the bmi value and set it in the text

   float bmiValue = calculateBMI(weight, height);
   bmiValueText.setText(bmiValue + "");
 
   // interpret the meaning of the bmi value and set it in the text
   int bmiInterpretation = interpretBMI(bmiValue);
   bmiDescriptionText.setText(getResources().getString(

     bmiInterpretation));
 
   // color for the bmi text fields
   int bmiColor = colorBMI(bmiValue);
   bmiValueText.setTextColor(getResources().getColor(bmiColor));
   bmiDescriptionText.setTextColor(getResources().getColor(bmiColor));
  }

 }
 
 // retrieve the weight from the spinner control converted to kg
 public float getSelectedWeight() {

  String selectedWeightValue = (String) weightSpinner.getSelectedItem();
  if (weightUnitSpinner.getSelectedItemPosition() == 0) {

   // the position is libs, so convert to kg and return
   return (float) (Float.parseFloat(selectedWeightValue) * 0.45359237);
  } else {

   // already kg is selected, so no need to covert (just cast to float)
   return Float.parseFloat(selectedWeightValue);
  }
 }

 
 // retrieve the hight from the spinner control convented to me
 public float getSelectedHeight() {
  String selectedHeightValue = (String) heightSpinner.getSelectedItem();
  if (heightUnitSpinner.getSelectedItemPosition() == 0) {

   // the position is feets and inches, so convert to meters and return
   String feets = selectedHeightValue.substring(0, 1);
   String inches = selectedHeightValue.substring(2, 4);
   return (float) (Float.parseFloat(feets) * 0.3048)

     + (float) (Float.parseFloat(inches) * 0.0254);
  } else {

   // already meters is selected, so no need to covert (just cast to
   // float)
   return Float.parseFloat(selectedHeightValue);
  }

 }
 
 // the formula to calculate the BMI index
 // check for http://en.wikipedia.org/wiki/Body_mass_index
 private float calculateBMI(float weight, float height) {

  return (float) (weight / (height * height));
 }
 
 // returns the string name defined in strings.xml

 // that interpret the BMI
 private int interpretBMI(float bmiValue) {

  if (bmiValue < 16) {
   return R.string.bmiSUnder;
  } else if (bmiValue < 18.5) {

   return R.string.bmiUnder;
  } else if (bmiValue < 25) {

   return R.string.bmiNormal;
  } else if (bmiValue < 30) {

   return R.string.bmiOver;
  } else {
   return R.string.bmiObese;
  }

 }
 
 // returns the color name defined in strings.xml
 // that represent the BMI
 private int colorBMI(float bmiValue) {

  if (bmiValue < 16) {
   return R.color.colorRed;
  } else if (bmiValue < 18.5) {

   return R.color.colorYellow;
  } else if (bmiValue < 25) {

   return R.color.colorGreen;
  } else if (bmiValue < 30) {

   return R.color.colorYellow;
  } else {
   return R.color.colorRed;
  }

 }
 
 // adding listers to unit changing spinners, as we need to change the
 // value range accordingly
 public void addListernsToUnitChanges() {

  // listener to the weight unit
  weightUnitSpinner
    .setOnItemSelectedListener(new OnItemSelectedListener() {
     public void onItemSelected(AdapterView<?> parent,
       View view, int row, long id) {

      // load the relevent units and the values
      if (row == 0) {
       // libs is selected
       loadLibsValueRange();
      } else {

       // kg is selected
       loadKgsValueRange();
      }
     }
 
     public void onNothingSelected(AdapterView<?> arg0) {

      // Nothing to do here
     }
    });
 
  // listener to the height unit
  heightUnitSpinner
    .setOnItemSelectedListener(new OnItemSelectedListener() {

     public void onItemSelected(AdapterView<?> parent,
       View view, int row, long id) {

      // load the relevent units and the values
      if (row == 0) {
       // feets is selected
       loadFeetsValueRange();
      } else {

       // meters is selected
       loadMetersValueRange();
      }
     }
 
     public void onNothingSelected(AdapterView<?> arg0) {

      // Nothing to do here
     }
    });
 }
 
 // load the libs value range to the weight spinner
 public void loadLibsValueRange() {

  weightSpinner.setAdapter(weightLibsAdapter);
  // set the default lib value
  weightSpinner.setSelection(weightLibsAdapter.getPosition("170"));
 }

 
 // load the kg value range to the weight spinner
 public void loadKgsValueRange() {
  weightSpinner.setAdapter(weightKgsAdapter);
  // set the default vaule for kg

  weightSpinner.setSelection(weightKgsAdapter.getPosition(" 77"));
 }
 
 // load the feets value range to the height spinner
 public void loadFeetsValueRange() {

  heightSpinner.setAdapter(heightFeetsAdapter);
  // set the default value to feets
  heightSpinner.setSelection(heightFeetsAdapter.getPosition("5\"05'"));
 }

 
 // load the meters value range to the height spinner
 public void loadMetersValueRange() {
  heightSpinner.setAdapter(heightMetersAdapter);
  // set the default value to meters

  heightSpinner.setSelection(heightMetersAdapter.getPosition("1.65"));
 }
 
 // load the value range of all the units to adapters
 // we would assign adapters to the spinners based on the users selection

 public void initializeSpinnerAdapters() {
 
  String[] weightLibs = new String[300];
  // loading 1.0 to 300 to the weight in libs

  int k = 299;
  for (int i = 1; i <= 300; i++) {

   weightLibs[k--] = String.format("%3d", i);
  }

  // initialize the weightLibsAdapter with the weightLibs values
  weightLibsAdapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, weightLibs);
 
  String[] weightKgs = new String[200];
  // loading 1.0 to 200 to the weight in kgs

  k = 199;
  for (int i = 1; i <= 200; i++) {

   weightKgs[k--] = String.format("%3d", i);
  }

  // initialize the weightKgsAdapter with the weightKgs values
  weightKgsAdapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, weightKgs);
 
  String[] heightFeets = new String[60];
  // loading 3"0' to 7"11' to the height in feet/inch

  k = 59;
  for (int i = 3; i < 8; i++) {

   for (int j = 0; j < 12; j++) {
    heightFeets[k--] = i + "\"" + String.format("%02d", j) + "'";
   }

  }
  // initialize the heightFeetAdapter with the heightFeets values
  heightFeetsAdapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, heightFeets);
 
  String[] heightMeters = new String[300];
  // loading 0.0 to 2.9 to the height in m/cm

  k = 299;
  for (int i = 0; i < 3; i++) {

   for (int j = 0; j < 100; j++) {
    heightMeters[k--] = i + "." + j;
   }

  }
  // initialize the heightMetersAdapter with the heightMeters values
  heightMetersAdapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, heightMeters);
 
 }

}

Run it on the Phone

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.

The BMI Calculator look and feeling in Portrait view
The BMI Calculator look and feeling in Landscape view

You can download the eclipse project and the android app that we created in this post from following links.
Download the eclipse project files (zipped) com.blogger.android.meda.bmicalculator-version2.zip
Access the Source code from github github repo
Download the free BMI Calculator app (the latest version) from the Android Market. Available in Android Market

Next Steps

To add themes to the app for a better look and feel, read Tutorial: Theming an Android App.