9.
Conventions for the tutorials
The tutorials of this document have
been developed and tested with Android 4.0.3, API Level 15. Please use this
version for all tutorials in this book. Higher version usually should also
work. Lower version of the Android API might also work, but if you face issues,
try the recommended version.
The base package for the projects is
always the same as the project name, e.g. if you are asked to create a project
"de.vogella.android.example.test" then the corresponding package name
is "de.vogella.android.example.test".
The Application name, which must be
entered on the Android project generation wizard, will not be predefined.
Choose a name you like.
The Android development tools are show
warnings if you use hard-coded strings, for example in layout files. While for
real application its best practice to use string resource files we use use
Strings directly to simplify the creation of the examples.
This app is also available on the
Android Marketplace. Search for "vogella" for find this example.
Select File → New → Other → Android
→ Android Project and create the Android project
"de.vogella.android.temperature". Enter the following.
Press "Finish". This
should create the following directory structure.
While "res" contains
structured values which are known to the Android platform the directory
"assets" can be used to store any kind of data. In Java you can
access this data via the AssetsManager and the method getAssets().
The Android SDK allows the developer
to define certain artifacts, e.g. strings and UI's, in two ways: via a rich
editor, and directly via XML.
The following description tries to
use the rich UI but for validation the resulting XML is also displayed. You can
switch between both things by clicking on the tab on the lower part of the
screen. For example in the Package Explorer select
"res/layout/main.xml".
Android allows you to create
attributes for resources, e.g. for strings or colors. These attributes can be
used in your UI definition via XML or in your Java source code.
Select the file
"res/values/string.xml" and press "Add". Select
"Color" and enter "myColor" as the name and
"#3399CC" as the value.
Add also the following
"String" attributes. String attributes allow the developer to
translate the application at a later point.
|
Name
|
Value
|
|
celsius
|
to Celsius
|
|
fahrenheit
|
to Fahrenheit
|
|
calc
|
Calculate
|
Switch to the XML representation and
validate the values.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string
name="hello">Hello World, Convert!</string>
<string
name="app_name">Temperature Converter</string>
<color
name="myColor">#3399CC</color>
<string
name="myClickHandler">myClickHandler</string>
<string
name="celsius">to Celsius</string>
<string
name="fahrenheit">to Fahrenheit</string>
<string
name="calc">Calculate</string>
</resources>
Select
"res/layout/main.xml" and open the Android editor via a double-click.
This editor allows you to create the UI via drag and drop or via the XML source
code. You can switch between both representations via the tabs at the bottom of
the editor. For changing the position and grouping elements you can use the
outline view.
The following shows a screenshot of
the Palette view from which you can drag and drop new UI elements into your
layout. Please note that the "Palette" view changes frequently so
your view might be a bit different.
Right-click on the text object
“Hello World, Hello!” in the layout. Select Delete on the popup menu to remove
the text object. Then, from the “Palette” view, select Text Fields and locate
“Plain Text”. Drag this onto the layout to create a text input field. All
object types in the section "Text Fields” derive from the class
"EditText", they just specify via an additional attribute which text
type can be used.
Now select the Palette section “Form
Widgets” and drag a “RadioGroup” object onto the layout. The number of radio
buttons added to the radio button group depends on your version of Eclipse.
Make sure there are two radio buttons by deleting or adding radio buttons to
the group.
From the Palette section Form Widgets,
drag a Button object onto the layout.
The result should look like the
following.
Switch to "main.xml" and
verify that your XML looks like the following.
<?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" >
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EditText" >
</EditText>
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="match_parent"
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="RadioButton"
>
</RadioButton>
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton"
>
</RadioButton>
</RadioGroup>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" >
</Button>
</LinearLayout>
If you select a UI element you can
change its properties via the properties view. Most of the properties can be
changed via the right mouse menu. You can also edit properties of fields
directy in XML. Typically you change properties directly in the XML file as
this is much faster. But the right mouse functionality is nice if you are searching
for a certain property.
Open your file "main.xml"
We will delete the initial text for the EditText field in XML. Switch to the
XML tab called "main.xml" and delete the android:text="EditText" property from the EditText part. Switch back to the
"Graphical Layout" tab and check that the text is removed.
Use the right mouse click on the
first radio button to assign the "celsius" string attribute to its
"text" property. Assign the and "fahrenheit" string
attribute to the second radio button.
From now on I assume you are able to
use the properties menu on the UI elements. You can either edit the XML file or
modify the properties via right mouse click.
Set the property "Checked"
to true for the first RadioButton. Assign "calc" to the text property
of your button and assign "myClickHandler" to the "onClick"
property. Set the "Input type" property to "numberSigned"
and "numberDecimal" on your EditText.
All your other UI controls are
contained in a LinearLayout. We want to assign a background color to this
LinearLayout. Right-click on an empty space in Graphical Layout mode, then
select Other Properties → All by Name → Background. Select “Color” and then
“myColor” in the list.
Switch to the "main.xml"
tab and verify that the XML is correctly maintained.
<?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:background="@color/myColor"
android:orientation="vertical" >
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal|numberSigned" >
</EditText>
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="match_parent"
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_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="myClickHandler"
android:text="@string/calc"
>
</Button>
</LinearLayout>
During the generation of your new
Android project you specified that an Activity called ConvertActivity should get created. The project wizard also created the
corresponding Java classs.
Change your code in ConvertActivity.java to the following. Note that the myClickHandler will be called based on the OnClick property of your
button.
package
de.vogella.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 ConvertActivity 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 myClickHandler(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, and select Run-As → Android
Application. Be patient, the emulator starts up very slowly.
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.
No comments:
Post a Comment