Install the demo application
This application is also available on the Android Market place. To install if via the google play application you can also scan following barcode with your android Smartphone alternatively.
Create Projects
Select file –> New–> other–> Android Project and create the Android Project enter the following.
Press ‘Finish’ this should create the following directory structure.
Modifying resource
ADT provide specialized editor for resource files as described in the android Development Tools. These allows to between XML representation of file and rich user interface through tabs on the button of the editor.
Create attributes
Android allows you to create static attributes. 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 /CXML” and press the ‘Add’ button select ‘color’ and enter my color 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.
Table 1: String Attributes
| Name |
Value |
| celsius |
to Celsius |
| fahrenheit |
to Fahrenheit |
| calc |
Calculate |
Switch to the XML representation and validate that the values are correct.
Hello World, Convert!
Temperature Converter
#3399CC myClickHandler
to Celsius
to Fahrenheit
Calculate
Add Views
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 representation 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 screenshot of the “palette” view from which you can drag and drop new user interface components into your layout. Note that the”Palette” view changes frequently so your view might be a bit different.
You will now create your new layout to remove the text object right click on the existing text object “Hello World Hello” in the layout select “delete” from the popup menu. Then from the “Palette” view select Text fields and locate “Text fields” derive from the class “Edit text” they just specify via an additional attributes which text type can be used.
Then select the Palette section “Form widgets” and drag a “Radio Group” Object onto the layout. The number of radio button 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 from widgets drag a button object onto the layout. The result should look as follows.
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>
Edit View properties
You change user interface components properties via the eclipse ‘properties’ view if you select it most of the properties can be changed via the right mouse menu you can also edit properties of field directly in xml If you know what you want you to change, changing properties in the XML file is much faster. If you are searching for a certain properties the right mouse functionality is rice.
Open your main.xml layout file the edit text control shows currently a default text you need to delete it in the xml code. Switch to the xml tab called ‘main.xml’ and delete the android:text=”EditText” property from the edit text 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 to the second radio button.
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 Radio Button. Assign “Calc” to text property of your button and assign “myClickHandler” to the ‘on click’ property.
Set the “Input type” Property to “number signed” and “numberDecimal” on your edit text.
In a Linear layout all your user Interface Components are contained you need 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 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>
Change the Activity source Code
You specified that an “activity” called “convert activity” should be created during the, generation of view Android project. The project wizard created 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;
}
}
Start Project
To start the application select your project right click on it and select Run–>Android application If an 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 other option should get selected.
Tags: android basic simple application, android first application, android from start, beginning to android, getting started in android, your first android application
Think as Developer 