Android

Ultimate Temperature Converter – Sample Android App

Prerequisites :
1. Working Eclipse IDE with ADT installed (Tutorial)
2. Basics of Java
 

Part 1: Understanding Views

Start a new Android Project. File >> New >> Android Project.

Major Components of the new Android Project screen are

Project Name : Just the name displayed in Eclipse
Build Target : Supported Version, We chose to build for Android 2.2
Application Name : Name Displayed in the Application Header
Package Name : Follow the international reverse hierarchy nomenclature as in java packages (can be anything)
Create Activity :  Keeping activity checked will create a java file in the “src” folder which will have a function that will be called as soon as the application starts. Give any name (it will be name of the primary java file)
Min SDK version : We will keep it 8
 
New Android Project
 

Part 2. Designing the GUI

 

Next, Go to res >> values >> strings.xml . It already has app_name as specified above. You can change hello (string) – this is displayed as a message on top inside the app screen area.

Add the following values now :

Name                                                    Type                                      Value
celsius                                              String                                    toCelsius
fahrenheit                                       String                                    toFahrenheit
kelvin                                                String                                    toKelvin
rankin                                               String                                    toRankin
calc                                                    String                                    calculate
myColor                                          Color                                     #3399CC

Strings.xml

Strings.xml has 2 views. Resources which we were working just now, and text – which you should check to have an idea of the code.

Now go to res >> layout >> main.xml . In the Graphical Layout, from the toolbox on the side drag and drop from the side.

1. Edit Text from the View section
2. Radio Group from Layout section
3. 4 Radio Button from the View Section
 

There are issues with drag-drop on Eclipse. In case you are facing trouble, you need to edit main.xml manually in text mode. Code is pretty much self explanatory.

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

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
<EditText android:text="" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1"></EditText>
<RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioGroup1">
        <RadioButton android:text="Celcius" android:id="@+id/radioButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="toCelcius"></RadioButton>
        <RadioButton android:text="Fahrenheit" android:id="@+id/radioButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="toFahrenheit"></RadioButton>
        <RadioButton android:text="Kelvin" android:id="@+id/radioButton3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="toKelvin"></RadioButton>
        <RadioButton android:text="Rankin" android:id="@+id/radioButton4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="toRankin"></RadioButton>
</RadioGroup>

</LinearLayout>

Now if you noticed we also have included a background. android:background=”@drawable/temperature_background”

It supports having different sized optimized backgrounds for different devices. Inside src folder

drawable-hdpi (tablets) | drawable-ldpi (larger display phones) | drawable-mdpi (smaller display phones). We have to upload a image temperature_background.png in 2 different sizes accordingly to those folder (drag n drop, keeping the same file name)

Temperature Background High Res | Temperate Background Low Res

Now comes the main Java Coding. Go to src >> Create.java . The code is pretty simple and self explanatory.

1. OnCreate() is the method which is executed automatically when the app is executed
2. All buttons / layout items is referenced using the R.java file. You can see references like R.id.edittext1 .

public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		text = (EditText)findViewById(R.id.editText1);
		text.setText("0");
		RadioButton celsiusButton = (RadioButton)findViewById(R.id.radioButton1);
		celsiusButton.setChecked(true);
	}

There are still few glitches in the working of the app. For example, if you start with 0 C, do a few conversions, and convert it back to C, it will not be equal to zero but rather a very small number. It is now upto the readers to analyze the code and fix if required.

To test the app, select the project (left click) and click on the Run (play, green) button on top. It will launch a compatible emulator. It may take some time to start depending on your configuration. Have Patience!

Tagged , , , , , , , , , , , ,