Tuesday, January 31, 2012

Create Launcher Icon For Your Android App

If you followed my last blog on Writing Your First Android App - Body Mass Index Calculator, 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).

1. Prepare the Icons

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 set of template icons, that you can use to start designing your icons. They are photoshop files with .ps extensions. You can also use free tools like GIMP to open these template files and modify them, or you can create the icon images from the scratch.

Here are the specified dimension (width x height) and the resolution (dpi) of the icon for different types of displays.
  • Low density screens (ldpi): 36x36px, 120dpi
  • Medium density screens (mdpi): 48x48px, 160dpi
  • High density screens (hdpi): 72x72px, 240dpi
  • Extra high density screens (xdpi): 96x96px, 320dpi
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.

Here is the set of icons I prepared for the BMI Calculator app.

2. Add Icons to your project

Open the 'res' directory in your project and copy the icons into the corresponding sub directories listed heer.
  • Low density screen icon : res/drawable-ldpi
  • Medium density screen icon : res/drawable-mdpi
  • High density screen icon : res/drawable-hdpi
  • Extra high density screen icon : res/drawable-xdpi
Make sure you rename all your icons to "ic_launcher.png". Once you finish, the directory structure should look like the following screenshot.


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.

2. Test the launcher icon in your phone

Check reinstalling the app on your phone. (You can redo the step5 mentioned in the previous blog (Writing Your First Android App - Body Mass Index Calculator) to reinstall the app on your phone. Click the app drawer and see how well the icon of your app goes with other apps.

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

Sunday, January 22, 2012

Writing Your First Android App - Body Mass Index Calculator

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

1. Create the Eclipse Project for the Android App

First make sure you have installed the Android Development Tools by following my previous blog post, Installing Android Development Tools in Windows. After the setup, start eclipse, and click the menu File->New->Android Project.

Creating an Eclipse Project for Android Developments

In the "New Android Project" wizard, give a name to your project.

Giving a project name for the Android App

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.

Select the Android version you want to run the app. I will keep the Android 4.0 checked.
Selecting the Target Android SDK version

From the next window fill the information as following and click 'Finish' to finalize creating the project.

Adding Your Application Information

2. Design the User Interface (UI)
 
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.
Locating the XML file to design the UI

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.

Get Familiar with the UI Editor


Now drag a medium size label widgets from the Platte to the form to get the following look for the UI.

Drag and Drop a Label (TextView Widget)

To edit the text of the label, right click on it and select "Edit Text...". That will give you the "Resource Chooser" form.

The resource selection panel
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".
Adding a new string


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.

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.
Drag and Drop a Text field (EditText widget)

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

Now add the following widgets to the form in the same order mentioned.
  1. 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.)
  2. A text field with decimal numbers. Give it the id "heightText". (By right clicking the text field and clicking "Edit ID".)
  3. 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".
  4. a Large Label. Give it the id "resultLabel". Set the text property of the label to a empty string. (with the R.String: emptyString)
That is the UI for the BMI Calculator app. Check whether you get the UI similar to this one.

The final UI for the App

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.

<?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="@string/weightLabel"

        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <EditText
        android:id="@+id/weightText"
        android:layout_width="match_parent"

        android:layout_height="wrap_content"
        android:inputType="numberDecimal" >
 
        <requestFocus />
    </EditText>

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

        android:text="@string/heightLabel"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <EditText
        android:id="@+id/heightText"

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal" />

 
    <Button
        android:id="@+id/calculateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:onClick="calculateClickHandler"
        android:text="@string/calculateButton" />
 
    <TextView
        android:id="@+id/resultLabel"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/EmptyString"
        android:textAppearance="?android:attr/textAppearanceLarge" />

 
</LinearLayout>


3. Writing Code for Your App

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.

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.

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

import android.widget.EditText;
import android.widget.TextView;
 
public class BMICalculatorActivity extends Activity {
    /** Called when the activity is first created. */

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

 
    public void calculateClickHandler(View view) {
     // make sure we handle the click of the calculator button

     if (view.getId() == R.id.calculateButton) {

      // get the references to the widgets
      EditText weightText = (EditText)findViewById(R.id.weightText);
      EditText heightText = (EditText)findViewById(R.id.heightText);
      TextView resultText = (TextView)findViewById(R.id.resultLabel);
 
      // get the users values from the widget references

      float weight = Float.parseFloat(weightText.getText().toString());
      float height = Float.parseFloat(heightText.getText().toString());
 
      // calculate the bmi value

      float bmiValue = calculateBMI(weight, height);
 
      // interpret the meaning of the bmi value
      String bmiInterpretation = interpretBMI(bmiValue);
 
      // now set the value in the result text

      resultText.setText(bmiValue + "-" + bmiInterpretation);
     }
    }
 
    // 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 * 4.88 / (height * height));
    }

 
    // interpret what BMI means
    private String interpretBMI(float bmiValue) {

     if (bmiValue < 16) {
      return "Severely underweight";
     } else if (bmiValue < 18.5) {

      return "Underweight";
     } else if (bmiValue < 25) {

      return "Normal";
     } else if (bmiValue < 30) {

      return "Overweight";
     } else {
      return "Obese";
     }

    }
}

4. Running Your App in an Android Simulator

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

Creating an Android virtual device (Simulator) to run your App

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.

Android Virtual Device


Then then click the "Application Drawer" of the virtual device at the bottom and click the "BMI Calculator" app.

Running our App on Android Virtual Device


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


5. Running Your App in Your Android Phone

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.

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.

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.

Running the App on a Manual Target (To select run it on the phone)


From there select "Manual" as the deployment target selection mode (as shown above), and press the "Run" button.

Selecting the phone as the running target


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.

Running the app on the phone

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!!!

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.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 arrange the widgets in your app using layouts, read Tutorial: Using Layouts in your Android App. To add an icon to your app, read Create Launcher Icon For Your Android App. To add themes to the app, read Tutorial: Theming an Android App.

Saturday, January 21, 2012

Installing Android Development Tools in Windows

To start a series of tutorial on Android development tools, I will write about installing Android development tools in a windows computer.

Download and Install Android SDK
First Download the Android SDK for Windows from the Android developer website. There are two files for windows, a zip files and exe. Download the exe version shown below, as it is easier to setup.


Run the downloaded exe and install the SDK to your computer. It will take 45.1MB of your space.



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


Setup SDK Versions
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.


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.

android-sdk directory

  • AVD Manager.exe: Allow to create/edit/delete Android Virtual Devices that help you to simulate your program.
  • SDK Manager.exe: Installing/Uninstalling Android versions.

android-sdk/platform-tools directory



Download and Install Eclipse
You will be using Eclipse as the IDE to develop Android Apps. Download eclipse form http://www.eclipse.org/downloads/. You can use either "Eclipse IDE for Java Developer" or "Eclipse IDE for Java EE Developer" to develop android apps.


When you run eclipse, you will be asked to provide the workspace folder. Select a folder that you expect to keep the project files.

Installing ADT (Android Development Toolkit) Plugin for Eclipse

In Eclipse menu select Help -> Install New Software..


From the 'Install' form, click 'Add' to add a new repository that host Android related packages from Google.

From the "Add Repository" dialog box, fill the following details.

Name: ADT Plugin
Location: https://dl-ssl.google.com/android/eclipse/

When you click 'OK', it will download the list of packages in the repository. Check 'Developer Tools' and click 'Next' to continue.

Then it will allow you to review the packages to be installed. Click 'Next' to continue.

After you agree to the license agreement and a warning to install unsigned content, eclipse will start to download and install the ADT packages.

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.

Configure the SDK in your Eclipse
Once you restart the eclipse, it will ask you to configure the Android SDK.


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

And click 'Next' to complete the Installation.

That's it. 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.