UI and Event Handling in Android
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:
package
com.android.temperature;
import
android.app.Activity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.EditText;
import
android.widget.RadioButton;
import
android.widget.Toast;
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).