In this article I am going to explain how to create user interface and how to handle event with user interaction. Here I am going to create a simple application that takes input from the user and convert it Fahrenheit to Celsius or Celsius to Fahrenheit.
Create Attributes:
Android allows us to create attributes for resources, e.g. for strings, color, drawable, etc. These attributes can be used in UI definition via XML or in Java source code.
Select the file "res/values/string.xml" and press "Add".
Select String and click OK.
Enter the name and value of added String as shown below:
Add also the following "String" attributes for the application:
Name | Value |
onCalcClick | onCalcClick |
Fahrenheit | To Fahrenheit |
Celsius | To Celsius |
Calculate | Calculate |
We can also directly create the attributes in xml as shown here:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, Convert!</string>
<string name="app_name">Convert Temperature</string>
<string name="onCalcClick">onCalcClick</string>
<string name="Fahrenheit">To Fahrenheit</string>
<string name="Celsius">To Celsius</string>
<string name="Calculate">Calculate</string>
</resources>
Save the string.xml file.
Move to the UI Element:
Select "res/layout/main.xml" and open the Android editor via a double-click. This editor allows us to create the UI via drag and drop or via the XML source code. We can switch between both representations via the tabs at the bottom of the editor. For changing the postion and grouping elements you can use the outline view.
Now for this application drag and drop the following controls from the Palette:
- EditText
- RadioGroup
- Button
Switch to "main.xml" and verify that our XML looks like the following.
<?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">
<EditText android:layout_width="match_parent" android:id="@+id/editText1"
android:layout_height="wrap_content" android:inputType="number">
<requestFocus></requestFocus>
</EditText>
<RadioGroup android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton android:text="RadioButton"
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true">
</RadioButton>
<RadioButton android:text="RadioButton"
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RadioButton>
</RadioGroup>
<Button android:text="Button" android:id="@+id/button1"
android:layout_height="wrap_content"
android:layout_width="114dp">
</Button>
</LinearLayout>
Assign the "Celsius" string attribute to "text" property of the first radio button and "Fahrenheit" to the second radio button and “Calculate” to button. Also assign “onCalcClick” string to the onclick property of button.
<?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">
<EditText android:layout_width="match_parent" android:id="@+id/editText1"
android:layout_height="wrap_content" android:inputType="number">
<requestFocus></requestFocus>
</EditText>
<RadioGroup android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" android:text="@string/Celsius">
</RadioButton>
<RadioButton android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="@string/Fahrenheit">
</RadioButton>
</RadioGroup>
<Button android:id="@+id/button1"
android:layout_height="wrap_content"
android:layout_width="114dp"
android:text="@string/Calculate"
android:onClick="onCalcClick">
</Button>
</LinearLayout>
Select "src/com.android.temperature" and open the Convert.java file. Change "Convert.java" to the following:
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;
package com.android.temperature;
public class Convert extends Activity {
private EditText text;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
text = (EditText) findViewById(R.id.editText1);
}
// This method is called at button click because we assigned the name to the
// "On Click property" of the button
public void onCalcClick(View view) {
switch (view.getId()) {
case R.id.button1:
RadioButton celsiusButton = (RadioButton) findViewById(R.id.radio0);
RadioButton fahrenheitButton = (RadioButton) findViewById(R.id.radio1);
if (text.getText().length() == 0) {
Toast.makeText(this, "Please enter a valid number",
Toast.LENGTH_LONG).show();
return;
}
float inputValue = Float.parseFloat(text.getText().toString());
if (celsiusButton.isChecked()) {
text.setText(String.valueOf(convertFahrenheitToCelsius(inputValue)));
celsiusButton.setChecked(false);
fahrenheitButton.setChecked(true);
}
else {
text.setText(String.valueOf(convertCelsiusToFahrenheit(inputValue)));
fahrenheitButton.setChecked(false);
celsiusButton.setChecked(true);
}
break;
}
}
// Converts to celsius
private float convertFahrenheitToCelsius(float fahrenheit) {
return ((fahrenheit - 32) * 5 / 9);
}
// Converts to fahrenheit
private float convertCelsiusToFahrenheit(float celsius) {
return ((celsius * 9) / 5) + 32;
}
}
To start the Android Application, select your project, right click on it, Run As Android Application. The emulator starts up very slow. You should get the following result.
Type in a number, select your conversion and press the button. The result should be displayed and the other option should get selected. Select To Fahrenheit radiobutton and enter 100 in input box, it will convert it into Celsius (212.0).
Leave Comment