Install the demo application
This application is also available on the Android Marketplace under Android Temperature converter .Alternatively you can also scan the following barcode with your Android smartphone to install it via the Google Play application.
Select
→ → → →
and
create the
Android project "de.vogella.android.temperature".
Enter
the
following.
Press "Finish". This should create the following directory structure.
Press "Finish". This should create the following directory structure.
As described in the Android Development Tools (ADT) chapter,
ADT
provides specialized editors for resources files, e.g. layout
files.
These editors allow to switch between the XML representation of the
file and a
richer user interface via tabs on the bottom of the editor.
The following description uses the rich user interface to build layout files. For validation purposes, the resulting XML is also included in the description.
The following description uses the rich user interface to build layout files. For validation purposes, the resulting XML is also included in the description.
Android allows you to create static attributes, e.g.
Strings or
colors. These attributes can for example be used in your XML
layout
files or referred to via
Java source code.
Select the file "res/values/string.xml" and press the button. Select "Color" and enter "myColor" as the name and "#3399CC" as the value.
Add the following "String" attributes. String attributes allow the developer to translate the application at a later point.
Switch to the XML representation and validate that the values are correct.
Select the file "res/values/string.xml" and press the button. Select "Color" and enter "myColor" as the name and "#3399CC" as the value.
Add the following "String" attributes. String attributes allow the developer to translate the application at a later point.
Switch to the XML representation and validate that the values are correct.
<?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 layout 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 Eclipse
"Outline" view.
The following shows a screenshot of the "Palette" view from which you can drag and drop new user interface components into your layout. Please note that the "Palette" view changes frequently so your view might be a bit different.
You will now create your new layout.
Right-click on the existing text object “Hello World, Hello!” in the layout. Select "Delete" from 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.
Afterwards 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
The following shows a screenshot of the "Palette" view from which you can drag and drop new user interface components into your layout. Please note that the "Palette" view changes frequently so your view might be a bit different.
You will now create your new layout.
Right-click on the existing text object “Hello World, Hello!” in the layout. Select "Delete" from 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.
Afterwards 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 user interface component (an instance of
Open your
Use the right mouse click on the first radio button to assign the "celsius" String attribute to its "text" property. Assign the "fahrenheit" string attribute to the second radio button.
From now on, I assume you are able to use the properties menu on user interface components. You can always 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
Set the "Input type" property to "numberSigned" and "numberDecimal" on your EditText.
All your user interface components are contained in a
Switch to the
View
), you can change its properties via
the Eclipse "Properties" view.
Most of the
properties can be changed via
the
right mouse menu. You can
also edit
properties of fields directly in
XML. Changing
properties
in
the XML file
is much faster, if you know what you want to change. But
the
right mouse
functionality is nice, if you are
searching for a
certain
property.
Open your
main.xml
layout file . The
EditText
control
shows currently a default text. We want to delete this initial
text in
the XML code.
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 "fahrenheit" string attribute to the second radio button.
From now on, I assume you are able to use the properties menu on user interface components. You can always 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 user interface components 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
→ → .
Select
“Color” and
then select "myColor" "in the list which is
displayed.
Switch to the
main.xml
tab and verify that the XML is
correct.
<?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
Change your code in
Activity
called
ConvertActivity
should be created. The project wizard created the corresponding
Java
class.
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
→ . If an emulator is not yet running, it will be started. 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.
(vogella.com)
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.