From a8c28c4e4a4844dd17d832e9cd729d28f056e09c Mon Sep 17 00:00:00 2001 From: Scott Main <> Date: Mon, 13 Apr 2009 17:01:30 -0700 Subject: AI 146028: update hello world tutorial for cupcake, including various other edits. BUG=1750212 Automated import of CL 146028 --- docs/html/guide/tutorials/hello-world.jd | 348 ++++++++++++--------- docs/html/guide/tutorials/images/hello_world_0.png | Bin 30614 -> 6328 bytes docs/html/guide/tutorials/images/hello_world_1.png | Bin 38174 -> 9635 bytes docs/html/guide/tutorials/images/hello_world_2.png | Bin 67830 -> 11040 bytes docs/html/guide/tutorials/images/hello_world_3.png | Bin 60750 -> 11000 bytes 5 files changed, 196 insertions(+), 152 deletions(-) (limited to 'docs/html/guide/tutorials') diff --git a/docs/html/guide/tutorials/hello-world.jd b/docs/html/guide/tutorials/hello-world.jd index 7b9287fabfe8..7dbfd3f6aab3 100644 --- a/docs/html/guide/tutorials/hello-world.jd +++ b/docs/html/guide/tutorials/hello-world.jd @@ -5,21 +5,46 @@ page.title=Hello, World of a development framework is how easy it is to write "Hello, World." Well, on Android, it's pretty easy. It's particularly easy if you're using Eclipse as your IDE, because we've provided a -great plugin that handles your project creation and management to greatly speed up your +great plugin that handles your project creation and management to greatly speed-up your development cycles.
If you're not using Eclipse, that's okay. Familiarize yourself with Developing in Other IDEs. -You can then come back here and ignore anything about Eclipse.
+You can then return to this tutorial and ignore anything about Eclipse. -Before you start, you should already have the latest SDK installed, and if you're using -Eclipse, you should have installed the ADT plugin as well. See -Installing the Android SDK to get these -installed.
+Before you start, you should already have the very latest SDK installed, and if you're using +Eclipse, you should have installed the ADT plugin as well. If you have not installed these, see +Installing the Android SDK and return +here when you've completed the installation.
-Note: -In some cases, you might want to click the screenshots below to get a bigger view. -
+Note: If you're developing with an Android SDK older +than the one provided for Android 1.5, you can skip this step and continue with +Create the Project.
+ +In this tutorial, you will run your applicion in the Android Emulator. +Before you can launch the emulator, you must create an +Android Virtual Device (AVD). An AVD defines the system image and +device settings used by the emulator.
+ +To create an AVD, use the android
tool provided in the Android SDK.
+Open a command prompt or terminal, navigate to the
+/tools
directory in the SDK package and execute:
+
+android create avd --target 1 --name myavd ++ +
The tool now asks if you would like to create a custom hardware profile, say
+no
. That's it. You now have an AVD and can use it to run the Emulator.
In the above command, the target
option is required
+and specifies the target platform for the emulator. (A target defines the system image,
+API level and supported skins. To view all available targets, execute:
+android list target
.) The name
option is also required
+and defines the name for the new AVD. For more information about android
,
+see the Android Tool
+documentation.
From Eclipse, select the File > New > Project menu item. If the Android Plugin for Eclipse has been successfully installed, the resulting dialog should have a folder labeled "Android" which should contain a single entry: - "Android Project".
+ "Android Project". (After you create one or more Android projects, an entry for + "Android XML File" will also be available.)Selected "Android Project" and click Next.
The next screen allows you to enter the relevant details for your project:
Click Finish.
+Here's what each field on this screen means:
+Here is a description of each field:
The package name you use in your application must be unique across - all packages installed on the system; for this reason, it's very +
Your package name must be unique across + all packages installed on the Android system; for this reason, it's very important to use a standard domain-style package for your - applications. In the example above, we used the - package domain "com.android"; you should use a - different one appropriate to your organization.
The checkbox for toggling "Use default location" allows you to change - the location on disk where the project's files will be generated and stored.
+Other fields: The checkbox for "Use default location" allows you to change + the location on disk where the project's files will be generated and stored. "Target" + is the platform target for your application.
-After the plugin completes your project creations, you'll have a class named HelloAndroid
-(found in your project package, HelloAndroid > src > com.android.hello). It should look like
-this:
Open the HelloAndroid.java file, located inside HelloAndroid > src > +com.example.helloandroid). It should look like this:
package com.example.hello; @@ -97,6 +138,14 @@ public class HelloAndroid extends Activity { } }+
Notice that the class is based on the {@link android.app.Activity} class. An Activity is a +single application entity that is used to perform actions. An application may have many separate +activities, but the user interacts with them one at a time. The +{@link android.app.Activity#onCreate(Bundle) onCreate()} method +will be called by the Android system when your Activity starts — +it is where you should perform all initialization and UI setup. An activity is not required to +have a user interface, but usually will.
+Now let's modify some code!
Take a look at this revised code, below, and make the same changes to your HelloAndroid.java file. We'll dissect -it line by line:
+Take a look at the revised code below and then make the same changes to your HelloAndroid class. +The bold items are lines that have been added.
package com.android.hello; @@ -125,101 +174,75 @@ public class HelloAndroid extends Activity { } }-
Tip: If you forgot to import the TextView package, try this: -press Ctrl-Shift-O (Cmd-Shift-O, on Mac). This is an Eclipse -shortcut to organize imports—it identifies missing packages and adds them for you.
- -Notice that our class is based on the {@link android.app.Activity} class. An Activity is a -single application entity that is used to perform actions. An application may have many, but the user -interacts with them only one at a time. An Activity is not required to actually have a user interface, -but usually will.
+Tip: An easy way to add import packages to your project is +to press Ctrl-Shift-O (Cmd-Shift-O, on Mac). This is an Eclipse +shortcut that identifies missing packages based on your code and adds them for you.
An Android user interface is composed of hierarchies of objects called -Views. A {@link android.view.View} is simply a drawable object, such as a radio button, an -animation, or (in our case) a text label. The specific name for the View -subclass that handles text, which we use here, is {@link android.widget.TextView}.
+Views. A {@link android.view.View} is a drawable object used as an element in your UI layout, +such as a button, image, or (in this case) a text label. Each of these objects is a subclass +of the View class and the subclass that handles text is {@link android.widget.TextView}. -Here's how you construct a TextView:
- -TextView tv = new TextView(this);- -
The argument to TextView's constructor is an Android {@link android.content.Context} instance. The -Context is simply a handle to the system; it provides services like +
In this change, you create a TextView with the class constructor, which accepts
+an Android {@link android.content.Context} instance as its parameter. A
+Context is a handle to the system; it provides services like
resolving resources, obtaining access to databases and preferences, and so
-on. The Activity class inherits from Context. Since our
-HelloAndroid class is a subclass of Activity, it is also a Context, and so we can
-pass the this
reference to the TextView.
Once we've constructed the TextView, we need to tell it what to display:
+on. The Activity class inherits from Context, and because your +HelloAndroid class is a subclass of Activity, it is also a Context. So, you can +passthis
as your Context reference to the TextView.
-tv.setText("Hello, Android");+
Next, define the text content with +{@link android.widget.TextView setText(CharSequence) setText()}.
-Nothing too surprising there.
- -At this point, we've constructed a TextView and told it what text to -display. The final step is to connect this TextView with the on-screen -display, like so:
- -setContentView(tv);- -
The setContentView()
method on Activity indicates to the system which
-View should be associated with the Activity's UI. If an Activity doesn't
-call this method, no UI is present at all and the system will display a blank
-screen. For our purposes, all we want is to display some text, so we pass it
-the TextView we just created.
Finally, pass the TextView to +{@link android.app.Activity#setContentView(View) setContentView()} in order to +display it as the content for the Activity UI. If your Activity doesn't +call this method, then no UI is present and the system will display a blank +screen.
There it is — "Hello, World" in Android! The next step, of course, is to see it running.
+The Eclipse plugin makes it very easy to run your applications. Begin by -selecting the Run > Open Run Dialog menu entry (in Eclipse 3.4, it's -Run > Run Configurations). You should see a dialog -like this:
+The Eclipse plugin makes it very easy to run your applications. +Select Run > Run Configurations (in Eclipse 3.3, +Run > Open Run Dialog).
-Next, highlight the "Android Application" entry, and then click the icon in the -top left corner (the one depicting a sheet of paper with a plus sign in the -corner) or simply double-click the "Android Application" entry. You should +
Select the "Android Application" entry, and click the icon in the +top left corner (the one depicting a sheet of paper with a plus symbol) +or double-click on "Android Application." You should have a new launcher entry named "New_configuration".
Change the name to something expressive, like "Hello, Android", and then pick -your project by clicking the Browse button. (If you have more than one -Android project open in Eclipse, be sure to pick the right one.) The -plugin will automatically scan your project for Activity subclasses, and add -each one it finds to the drop-down list under the "Activity:" label. Since -your "Hello, Android" project only has one, it will be the default, and you can -simply continue.
- -Click the "Apply" button. Here's an example:
- -Change the name to something meaningful like "Android Activity." Then pick +click the Browse button and select your HelloAndroid project. The +plugin will automatically scan your project for Activity subclasses and add +each one it finds to the drop-down list under "Launch Action." Because the +HelloAndroid project only has one Activity, it will be the default Activity. +Leave "Launch Default Activity" selected.
-Now click Run, and the Android Emulator should start and open the application. -Once it's booted up your application will appear. (Once booted, you may need to unlock the emulator's phone screen -by pressing the device MENU key.) When all is said and done, you should +
Click the Apply, then Run. The Android Emulator +will start and once it's booted up your application will appear. You should now see something like this:
The "Hello, Android" you see in the grey bar is actually the application title. The Eclipse plugin +creates this automatically (the string is defined in the /res/values/strings.xml file and referenced +by your AndroidManifest.xml file). The text below the title is the actual text that you have +created in the TextView object.
-That's "Hello, World" in Android. Pretty straightforward, eh? -The next sections of the tutorial offer more detailed information that you may find valuable as you -learn more about Android.
- - +That covers the basic "Hello World" tutorial, but you should continue reading for some more +valuable information about developing Android applications.
The "Hello, World" example you just completed uses what we call "programmatic" -UI layout. This means that you construct and build your application's UI +
The "Hello, World" example you just completed uses what is called a "programmatic" +UI layout. This means that you constructed and built your application's UI directly in source code. If you've done much UI programming, you're probably familiar with how brittle that approach can sometimes be: small changes in layout can result in big source-code headaches. It's also very @@ -229,7 +252,7 @@ your layout and wasted time debugging your code.
That's why Android provides an alternate UI construction model: XML-based layout files. The easiest way to explain this concept is to show an example. Here's an XML layout file that is identical in behavior to the -programmatically-constructed example you just completed:
+programmatically-constructed example:<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" @@ -238,16 +261,16 @@ programmatically-constructed example you just completed: android:text="@string/hello"/>
The general structure of an Android XML layout file is simple: it's a tree -of XML elements, where each element is the name of a View class -(this example, however, is just one element). You can use the +of XML elements, wherein each node is the name of a View class +(this example, however, is just one View element). You can use the name of any class that extends {@link android.view.View} as an element in your XML layouts, including custom View classes you define in your own code. This structure makes it very easy to quickly build up UIs, using a more simple -structure and syntax than you would in source code. This model is inspired -by the web development model, where you can separate the presentation of your +structure and syntax than you would use in a programmatic layout. This model is inspired +by the web development model, wherein you can separate the presentation of your application (its UI) from the application logic used to fetch and fill in data.
-In this example, there's just one View element, the TextView
,
+
In the above XML example, there's just one View element: the TextView
,
which has four XML attributes. Here's a summary of what they mean:
- 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. + This attribute defines how much of the available width on the screen this View should consume. +In this case, it's the only View so you want it to take up the entire screen, which is what a value of "fill_parent" means. |
- This sets the text that the TextView should display. In this example, we use a string + This sets the text that the TextView should display. In this example, you use a string resource instead of a hard-coded string value. The hello string is defined in the res/values/strings.xml file. This is the recommended practice for inserting strings to your application, because it makes the localization @@ -302,29 +326,32 @@ which has four XML attributes. Here's a summary of what they mean: |
These layout files belong in the res/layout/ directory in your project. The "res" is -short for "resources" and that directory contains all the non-code assets that -your application requires. Resources also include things like images, localized -strings, and XML layout files.
+These XML layout files belong in the res/layout/ directory of your project. The "res" is +short for "resources" and the directory contains all the non-code assets that +your application requires. In addition to layout files, resources also include assets +such as images, sounds, and localized strings.
When you want a different design for landscape, put your layout XML file
- in res/layout-land/
. Android will automatically look here when the layout changes.
- Without it the layout will just be stretched.
The Eclipse plugin automatically creates one of these layout files for you (main.xml
). In our example
-above, we just ignored it and created our layout programmatically. We did so just to teach you a little more
-about the framework, but you should almost always define your layout in an XML file instead of in your code.
So, let's put it to use and change the "Hello, Android" sample to use the XML layout.
+The Eclipse plugin automatically creates one of these layout files for you: main.xml. +In the "Hello World" application you just completed, this file was ignored and you created a +layout programmatically. This was meant to teach you more +about the Android framework, but you should almost always define your layout +in an XML file instead of in your code. +The following procedures will instruct you how to change your +existing application to use an XML layout.
main.xml
(once opened, you might need to click
-the "main.xml" tab at the bottom to see the XML source). Replace its contents with
+/res/layout/ folder and open main.xml (once opened, you might need to click
+the "main.xml" tab at the bottom of the window to see the XML source). Replace the contents with
the following XML:
+
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" @@ -333,7 +360,7 @@ the following XML:Save the file.
strings.xml
.
+HelloAndroid
class source code to read the
-XML layout, instead of the hard-coded version. Edit the file to look like this:
+HelloAndroid
class use the
+XML layout. Edit the file to look like this:
package com.example.hello; @@ -364,38 +391,44 @@ public class HelloAndroid extends Activity { } }-
When you make this change, type it by hand to try the code-completion feature on that R class. You'll probably find that it helps a lot.
+When you make this change, type it by hand to try the +code-completion feature. As you begin typing "R.layout.main" the plugin will offer you +suggestions. You'll find that it helps in a lot of situations.
-Now, instead of passing setContentView()
a View object, we give it a reference to our layout resource.
+
Instead of passing setContentView()
a View object, you give it a reference
+to the layout resource.
The resource is identified as R.layout.main
, which is actually a compiled object representation of
-the layout defined in layout/main.xml. The Eclipse plugin automatically creates this reference for
-us inside the project's R.java class. If you're not using Eclipse, then the R.java class will be generated for you
+the layout defined in /res/layout/main.xml. The Eclipse plugin automatically creates this reference for
+you inside the project's R.java class. If you're not using Eclipse, then the R.java class will be generated for you
when you run Ant to build the application. (More about the R class in a moment.)
Now that you've made this change, go ahead and re-run your application — all -you need to do is click the green Run arrow icon, or select -Run > Run History > Hello, Android from the menu. You should see pretty much the same thing -you saw before! After all, the point was to show that the two different +
Now re-run your application — because you've created a launch configuration, all +you need to do is click the green arrow icon to run, or select +Run > Run History > Android Activity. Other than the change to the TextView +string, the application looks the same. After all, the point was to show that the two different layout approaches produce identical results.
-Tip: Use the shortcut Ctrl-Shift-F11 +
Tip: Use the shortcut Ctrl-F11 (Cmd-Shift-F11, on Mac) to run your currently visible application.
-You've just completed your first Android application! Continue reading for an introduction -to debugging and a little more information on using other IDEs. Once you're ready to move on, -please begin by reading Application -Fundamentals. Also refer to the Developer's Guide +
Continue reading for an introduction +to debugging and a little more information on using other IDEs. When you're ready to learn more, +read Application +Fundamentals for an introduction to all the elements that make Android applications work. +Also refer to the Developer's Guide introduction page for an overview of the Dev Guide documentation.
In Eclipse, open the file named R.java in your source code folder in the Package -Explorer. It should look something like this:
+In Eclipse, open the file named R.java (in the /gen [Generated Java Files] folder). +It should look something like this:
+package com.example.helloandroid; + public final class R { public static final class attr { } @@ -432,8 +465,8 @@ the res/drawable/ direcory) you'll see R.java change to keep up.Debugging Your Project
The Android Plugin for Eclipse also has excellent integration with the Eclipse -debugger. To demonstrate this, let's introduce a bug into -our code. Change your HelloAndroid source code to look like this:
+debugger. To demonstrate this, introduce a bug into +your code. Change your HelloAndroid source code to look like this:package com.android.hello; @@ -478,23 +511,34 @@ just as you would for any other application.The Android Plugin for Eclipse is really just a wrapper around a set of tools included with the Android SDK. (These tools, like the emulator, aapt, adb, - ddms, and others are documented elsewhere.) Thus, it's possible to + ddms, and others are documented elsewhere.) + Thus, it's possible to wrap those tools with another tool, such as an 'ant' build file.
-The Android SDK includes a Python script named "activitycreator.py" that can be +
The Android SDK includes a toolk named "android" that can be used to create all the source code and directory stubs for your project, as well as an ant-compatible build.xml file. This allows you to build your project from the command line, or integrate it with the IDE of your choice.
-For example, to create a HelloAndroid project similar to the one we just created - via Eclipse, you'd use this command:
+For example, to create a HelloAndroid project similar to the one created + in Eclipse, use this command:
-activitycreator.py --out HelloAndroid com.android.hello.HelloAndroid++android create project \ + --package com.android.helloandroid \ + --activity HelloAndroid \ + --target 1 \ + --path <path-for-your-project>/HelloAndroid \ + --mode activity ++ +This creates the required folders and files for the project at the location + defined by the path.
-To build the project, you'd then run the command 'ant'. When that command +
To build the project, you'd then run the command
-ant
. When that command successfully completes, you'll be left with a file named HelloAndroid.apk under - the 'bin' directory. That .apk file is an Android Package, and can be + the "bi"' directory. That .apk file is an Android Package, and can be installed and run in your emulator using the 'adb' tool.For more information on how to use these tools, please read the documentation - cited above.
+For more information on how to use these tools, please read +Developing in Other IDEs.
diff --git a/docs/html/guide/tutorials/images/hello_world_0.png b/docs/html/guide/tutorials/images/hello_world_0.png index c174fbaffac9..330a07c74760 100644 Binary files a/docs/html/guide/tutorials/images/hello_world_0.png and b/docs/html/guide/tutorials/images/hello_world_0.png differ diff --git a/docs/html/guide/tutorials/images/hello_world_1.png b/docs/html/guide/tutorials/images/hello_world_1.png index f08438ab9fa3..02682f45152d 100644 Binary files a/docs/html/guide/tutorials/images/hello_world_1.png and b/docs/html/guide/tutorials/images/hello_world_1.png differ diff --git a/docs/html/guide/tutorials/images/hello_world_2.png b/docs/html/guide/tutorials/images/hello_world_2.png index 58f5703357d9..3e9c58b2a45d 100644 Binary files a/docs/html/guide/tutorials/images/hello_world_2.png and b/docs/html/guide/tutorials/images/hello_world_2.png differ diff --git a/docs/html/guide/tutorials/images/hello_world_3.png b/docs/html/guide/tutorials/images/hello_world_3.png index d2d2ff608ba7..22901a97ffde 100644 Binary files a/docs/html/guide/tutorials/images/hello_world_3.png and b/docs/html/guide/tutorials/images/hello_world_3.png differ -- cgit v1.2.3