Getting Started with Android Development Using Eclipse

fansbutterflyΚινητά – Ασύρματες Τεχνολογίες

19 Ιουλ 2012 (πριν από 5 χρόνια και 1 μήνα)

284 εμφανίσεις

Getting Started with Android Development 
Using Eclipse
Original Tutorial by Wei­Meng Lee (
updated 2010.03.07
)
Your First Android Application
As with all traditional programming projects, the first project is the customary "Hello World!" application and this
 
article shall be no exception. 
In Eclipse, select File—>New—>Project… 
In the next screen, expand on Android and select Android Project. Click Next. 
Now, name your Android project. There are four sections you need to fill: 

Project Name:
 The name of the Android project. (Example: HelloWorld)

Build Target: 
Select the minimum Android version to use (Example: Android 2.0.1)

Application Name:
 This is the user­friendly name for your application. This name will be displayed on the
 
main screen of the Android OS to identify your application.  (Example: Hello)

Package Name:
 The name of the Java package. You should preferably use your domain name followed by
 
the project name. Note that you must have at least one "." in the package name.  (Example:
 
com.HelloWorld)

Activity Name:
 The name of your first Android activity (you will learn more about Activity in the
 
following sections).  (Example: HelloClass)
Finally, select Finish.
Observe the following: 

The project name is HelloWorld. It is displayed under the Package Explorer on the left of the window. 

Android projects consist folders, among them are:

src
: This contains the .java source files for your project. In this example, there are two files:
 
HelloClass.java and R.java. The HelloClass.java file is the source file for your activity (you will
 
learn more about Activity in the next section). You will write your code for your application in this
 
file. The R.java file is a compiler­generated file that references all the resources found in your
 
project. You should not modify this file. 

Android Library:
 This folder contains one file: android.jar. The android.jar file contains all the
 
class libraries needed for an Android application. 

res
: This folder contains all the resources used in your application. It contains three other sub­
folders: drawable, layout, and values. You will see the use of the files contained in each sub folders
 
shortly. 

AndroidManifest.xml
: This is the manifest file for your Android application. You will specify the
 
permissions needed by your application as well as other features needed by your application (such
 
as intent­filters, receivers, etc). 
Building the User Interface
Android supports two ways of building the user interface of an application: through code and XML files. The
 
XML method is preferred as it allows you to declaratively define the UI of an application without needing to write
 
lots of code. In addition, it allows a clean separation of logic and UI. 
Double click on the main.xml file located under the res/layout folder. 
As you can see, Eclipse shows the main.xml file in layout mode by default. This allows you to inspect the UI of the
 
application visually. To make changes to the UI, you need to switch to the code view by clicking on the main.xml
 
tab located at the bottom of the layout. 
You will see the following XML code: 
<?
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"

>
<
TextView


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/hello"

/>
</
LinearLayout
>
In Android, the XML code for a UI is defined as a tree of tags. Each widget (buttons, text boxes, and so on) is
 
known as a View. To organize the widgets and lay them out in a display, you use a layout. In this example, the
 
<LinearLayout> element displays each widget in a single column. The <TextView> element defines a widget that
 
simply displays a string. 
Each element has a set of attributes. 
Table 1
 shows the meaning of the various attributes used in this example. 
Attribute
Meaning
xmlns:android
 
This is an XML namespace declaration that tells the Android tools that you are
 
going to refer to common attributes defined in the Android namespace. The
 
outermost tag in every Android layout file must have this attribute.
android:orientation
This attribute orients the presentation vertically, i. e. portrait.
android:layout_width
 
This attribute defines how much of the available width on the screen this View
 
should consume. In this case, it's our only View so we want it to take up the
 
entire screen, which is what a value of "fill_parent" means.
android:layout_height
 
This is just like android:layout_width, except that it refers to available screen
 
height. 
android:text
 
This sets the text that the TextView should contain. 
Notice that in the <TextView> element, the value of the android:text attribute is @string/hello. @string refers to
 
the Strings.xml file located in the res/values folder. Double­click on the this file and you will see its content: 
<?
xml

version
=
"1.0"

encoding
=
"utf-8"
?>
<
resources
>

<
string

name
=
"hello"
>
Hello World, HelloClass!
</
string
>

<
string

name
=
"app_name"
>
Hello
</
string
>
</
resources
>
Here, @string/hello refers to the string defined as: 

<
string

name
=
"hello"
>
Hello World, HelloClass!
</
string
>
In general, it is recommended that you store your static strings in an XML file (such as Strings.xml) file so that
 
when it comes to localization it would be just a matter of creating another XML file. 
Now add a new <string> element to the file as follows: 
<?
xml

version
=
"1.0"

encoding
=
"utf-8"
?>
<
resources
>

<
string

name
=
"hello"
>
Hello World, HelloClass!
</
string
>

<
string

name
=
"btnclickmetext"
>
Click Me
</
string
>

<
string

name
=
"app_name"
>
Hello
</
string
>
</
resources
>
You will also add some elements to the UI (main.xml).  The <EditText> element displays a text box while the
 
<Button> element displays a clickable 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"

>
<
TextView


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/hello"

/>
<
EditText

android:id
=
"@+id/txt_name"


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"

/>
<
Button


android:id
=
"@+id/btn_clickme"


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"

android:text
=
"@string/btnclickmetext"

/>
</
LinearLayout
>
Note:   Anything defined in XML layout files that is to be used in the Java source needs an android:id  (i. e.
 
android:id@+id/widget­identifier).  In the preceding XML layout example, @+id/btn_clickme is the identifier for
 
a Button widget. 
Coding the Application
With the UI created, you can turn your attention to writing the code for your application. If you look at the
 
Package Explorer, you will notice that there are two files listed under the src folder: HelloClass.java and R.java.
 
Examining the content of R.java, you'll see that a few lines have been added for you automatically.  All these newly
 
added lines allow you to programmatically refer to your widgets and strings. You should not modify the code
 
contained within this file as this file is dynamically generated as you add resources to your package. 
/* AUTO-GENERATED FILE. DO NOT MODIFY.
*
* This class was automatically generated by the
*
aapt
tool from the resource data it found. It
* should not be modified by hand.
*/
package
com.helloworld;
public

final

class
R {

public

static

final

class
attr {
}

public

static

final

class
drawable {

public

static

final

int

icon
=0x7f020000;
}

public

static

final

class
id {

public

static

final

int

btn_clickme
=0x7f050001;

public

static

final

int

txt_name
=0x7f050000;
}

public

static

final

class
layout {

public

static

final

int

main
=0x7f030000;
}

public

static

final

class
string {

public

static

final

int

app_name
=0x7f040002;

public

static

final

int

btnclickmetext
=0x7f040001;

public

static

final

int

hello
=0x7f040000;
}
}
Double­click on the HelloClass.java file and examine its content: 
package
com.helloworld;
import
android.app.Activity;
import
android.os.Bundle;
public

class
HelloClass
extends
Activity {

/** Called when the activity is first created. */

@Override

public

void
onCreate(Bundle savedInstanceState) {

super
.onCreate(savedInstanceState);
setContentView(R.layout.
main
);
}
}
In Android, an Activity is basically a screen that contains various widgets. Hence, you will see that the HelloClass
 
class extends the Activity base class. The onCreate() method is called whenever an activity is first started. Here,
 
you basically call the setContentView() method to paint the UI with the various elements you have defined in the
 
main.xml file. Notice that the statement R.layout.main refers to the main.xml file located in the res/layout folder. 
Now, write some code for your application so that when the user clicks on the Click Me button, you can display a
 
message. 
First, declare two object reference variables, txtname and btnclickme: 
public

class
HelloClass
extends
Activity {

private

EditText

txtname
;

private

Button

btnclickme
;
A couple of things to note here. First, you'll notice that the EditText word is underlined with a red line. This
 
indicates that the compiler does not recognize this keyword. To resolve this, position your cursor over the
 
underlined word and Eclipse will show you some of the possible ways to fix the error.  It turns out that you need to
 
import the namespace for the EditText class. The easiest way is to select the first link displayed (Import)
 
(android.widget)) and the namespace will be added to the imports at the top of the file.  Do the same for the
 
Button class by importing the android.widget.Button namespace.   
package
com.helloworld;
import
android.app.Activity;
import
android.os.Bundle;
import
android.widget.Button;
import
android.widget.EditText;
public

class
HelloClass
extends
Activity {
Next, use the findViewByID() method to dynamically reference the widget that you have defined in your main.xml
 
file: 

@Override

public

void
onCreate(Bundle savedInstanceState) {

super
.onCreate(savedInstanceState);
setContentView(R.layout.
main
);

txtname
= (EditText) findViewById(R.id.
txt_name
);

btnclickme
= (Button) findViewById(R.id.
btn_clickme
);
}
In this case, you refer to each widget using the R.id.<widget_name> identifier. The Ids for each widget are
 
generated in the R.java file. 
Notice that Eclipse also features automatically code completion, which is one of the things many developers take
 
for granted in Visual Studio. Observe that as you type R, Eclipse automatically displays a list of items related to R
 
(see Figure 9). To select one of the suggestions, highlight it and press Enter. 
To display a message when the user clicks on the Click Me button, you need to add an event handler to the button.
 
To do so, use the setOnClickListener() method to register a callback when the button is clicked. Clicking a button
 
invokes the onClick() method: 

@Override

public

void
onCreate(Bundle savedInstanceState) {

super
.onCreate(savedInstanceState);
setContentView(R.layout.
main
);

txtname
= (EditText) findViewById(R.id.
txt_name
);

btnclickme
= (Button) findViewById(R.id.
btn_clickme
);

btnclickme
.setOnClickListener(
new

View
.OnClickListener() {

public

void
onClick(View v) {
}
});
}
When the user clicks the Click Me button, you'll want to retrieve the text entered in the EditText widget and
 
display a welcome message. To extract the text stored in the EditText widget, use the getText() method and then
 
convert to a string using the toString() method: 

btnclickme
.setOnClickListener(
new

View
.OnClickListener() {

public

void
onClick(View v) {
String str =
"Hello, "
+
txtname.getText().toString() +
"!"
;
}
});
To display a small pop up window, Android provides the Toast class that allows you to display a view containing
 
short messages. The onClick() method now looks like this: 

btnclickme
.setOnClickListener(
new

View
.OnClickListener() {

public

void
onClick(View v) {
String str =
"Hello, "
+
txtname.getText().toString() +
"!"
;
Toast.makeText(getBaseContext(), str, Toast.LENGTH_SHORT).show();

}
});
View and Toast will be underlined in red, so click on each one in turn to add the necessary imports.
import
android.app.Activity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.Button;
import
android.widget.EditText;
import
android.widget.Toast;
The listing for the file HelloClass.java  now is as follows:
package
com.helloworld;
import
android.app.Activity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.Button;
import
android.widget.EditText;
import
android.widget.Toast;
public

class
HelloClass
extends
Activity {

private
EditText
txtname
;

private
Button
btnclickme
;

@Override

public

void
onCreate(Bundle savedInstanceState) {

super
.onCreate(savedInstanceState);
setContentView(R.layout.
main
);

txtname
= (EditText) findViewById(R.id.
txt_name
);

btnclickme
= (Button) findViewById(R.id.
btn_clickme
);

btnclickme
.setOnClickListener(
new

View
.OnClickListener() {

public

void
onClick(View v) {
String str =
"Hello, "
+
txtname.getText().toString() +
"!"
;
Toast.makeText(getBaseContext(), str, Toast.LENGTH_SHORT).show();

}
});
}
}
Examining the Manifest
Before you test your application, let’s examine the AndroidManifest.xml file contained within your package: 
<?
xml

version
=
"1.0"

encoding
=
"utf-8"
?>
<
manifest

xmlns:android
=
"http://schemas.android.com/apk/res/android"

package
=
"com.helloworld"

android:versionCode
=
"1"

android:versionName
=
"1.0"
>

<
application

android:icon
=
"@drawable/icon"

android:label
=
"@string/app_name"
>

<
activity

android:name
=
".HelloClass"

android:label
=
"@string/app_name"
>

<
intent-filter
>

<
action

android:name
=
"android.intent.action.MAIN"

/>

<
category

android:name
=
"android.intent.category.LAUNCHER"

/>

</
intent-filter
>

</
activity
>

</
application
>

<
uses-sdk

android:minSdkVersion
=
"6"

/>
</
manifest
>

Observe the following: 

The manifest starts with the <manifest> element with its namespace defined. It also defines the package
 
name. 

The <application> element defines the various components contained within your application. Within this
 
element, the android:icon attribute specifies the icon to be used to represent your application. Its value of
 
@drawable/icon specifies that the icon is located within the res/drawable folder and is named icon.png.
 
The android:label attribute specifies the text to display in the title bar of the application as well as in the
 
main screen of the device. 

If you want your application to be visible from the program launcher of an Android device, you need to
 
specify an <intent­filter> element containing the <action> and <category> elements.
Running the Project
Select Run, Run, Android Application and OK.  The Android device simulator will start and run your program.
 
To speed up development, the simulator may be left open between runs.