diff options
author | The Android Open Source Project <initial-contribution@android.com> | 2008-12-17 18:05:43 -0800 |
---|---|---|
committer | The Android Open Source Project <initial-contribution@android.com> | 2008-12-17 18:05:43 -0800 |
commit | f013e1afd1e68af5e3b868c26a653bbfb39538f8 (patch) | |
tree | 7ad6c8fd9c7b55f4b4017171dec1cb760bbd26bf /docs/html/guide/tutorials | |
parent | e70cfafe580c6f2994c4827cd8a534aabf3eb05c (diff) | |
download | frameworks_base-f013e1afd1e68af5e3b868c26a653bbfb39538f8.zip frameworks_base-f013e1afd1e68af5e3b868c26a653bbfb39538f8.tar.gz frameworks_base-f013e1afd1e68af5e3b868c26a653bbfb39538f8.tar.bz2 |
Code drop from //branches/cupcake/...@124589
Diffstat (limited to 'docs/html/guide/tutorials')
30 files changed, 540 insertions, 267 deletions
diff --git a/docs/html/guide/tutorials/hello-world.jd b/docs/html/guide/tutorials/hello-world.jd index ae0d8b5..c993048 100644 --- a/docs/html/guide/tutorials/hello-world.jd +++ b/docs/html/guide/tutorials/hello-world.jd @@ -1,114 +1,82 @@ page.title=Hello, World @jd:body -<p>First impressions matter, and as a developer you know that the first impression +<p>As a developer, you know that the first impression you get of a development framework is how easy it is to write "Hello, -World." Well, on Android, it's pretty easy. Here's the simple process:</p> +World." Well, on Android, it's pretty easy. </p> -<ol> - <li><a href="#create">Create the Project</a></li> - <li><a href="#ui">Construct the UI</a></li> - <li><a href="#run">Run the Code: Hello, Android</a></li> -</ol> - -<p>Afterwards, there's some additional information that you'll find useful:</p> - -<ol> - <li><a href="#upgrading">Upgrading the UI to an XML Layout</a> </li> - <li><a href="#debugging">Debugging Your Project</a> </li> - <li><a href="#noeclipse">Creating a Project without Eclipse</a> </li> -</ol> -<p>Let's jump in!</p> - -<a name="create"></a> - -<h2>Create the Project </h2> +<p>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 +development cycles. Get <a href="http://www.eclipse.org/downloads/">Eclipse</a> and visit the +<a href="{@docRoot}guide/developing/tools/adt.html">ADT Plugin</a> page to install it.</p> -<p>Creating the project is as simple as can be. An Eclipse -plugin is available making Android development a snap. </p> +<p>If you're not using Eclipse, that's okay. Familiarize yourself with +<a href="{@docRoot}guide/developing/other-ide.html">Developing in Other IDEs</a>. +You can then come back here and ignore anything about Eclipse.</p> -<p>You'll need to have a development computer with the Eclipse IDE installed (see <a -href="intro/installing.html#developmentrequirements">System and Software Requirements</a>), and -you'll need to install the <a -href="intro/installing.html#installingplugin">Android Eclipse Plugin (ADT)</a>. Once you have those ready, come back here. </p> +<p class="note"><strong>Note:</strong> +In some cases, you might want to click the screenshots below to get a bigger view. +</p> -<p>First, here's a high-level summary of how to build "Hello, World!":</p> +<h2 id="create">Create the Project</h2> -<ol> - <li> - Create a new "Android Project" via the <strong>File > New > Project</strong> menu. - </li> - <li> - Fill out the project details in the New Android Project dialog. - </li> - <li> - Edit the auto-generated source code template to display some output. - </li> -</ol> -<p> That's it! Next, let's go through each step above in detail. </p> <ol class="listhead"> - <li>Create a new Android Project + <li>Create a new Android Project. <p>From Eclipse, select the <strong>File > New > Project</strong> 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".</p> - <img src="images/hello_world_0.png"/> + <a href="images/hello_world_0.png"><img src="images/hello_world_0.png" style="height:230px" alt="" /></a> - <p>Once you've selected "Android Project", click the Next button.</p> + <p>Once you've selected "Android Project", click <strong>Next</strong>.</p> </li> - <li>Fill out the project details - <p>The next screen allows you to enter the relevant details for your project. - Here's an example:</p> + <li>Fill out the project details. + <p>The next screen allows you to enter the relevant details for your project:</p> + <ul> + <li><em>Project name:</em> HelloAndroid</li> + <li><em>Package name:</em> com.example.hello (or your own private namespace)</li> + <li><em>Activity name:</em> HelloAndroid</li> + <li><em>Application name:</em> Hello, Android</li> + </ul> - <img src="images/hello_world_1.png"/> + <a href="images/hello_world_1.png"><img src="images/hello_world_1.png" style="height:230px" alt="" /></a> <p>Here's what each field on this screen means:</p> + + <dl> + <dt><em>Project Name</em></dt> + <dd>This is the name of the directory or folder on your computer that you + want to contain the project.</dd> + <dt><em>Package Name</em></dt> + <dd>This is the package namespace (following the same rules as for + packages in the Java programming language) that you want all your source code to + reside under. This also sets the package name under which the stub + Activity will be generated. + <p>The package name you use in your application must be unique across + all packages installed on the 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.</p></dd> + <dt><em>Activity Name</em></dt> + <dd>This is the name for the class stub that will be generated by the plugin. + This will be a subclass of Android's Activity class. An Activity is simply a + class that can run and do work. It can create a UI if it chooses, but it + doesn't need to.</dd> + <dt><em>Application Name</em></dt> + <dd>This is the human-readable title for your application.</dd> + </dl> + + <p>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.</p> - - <table> - <tbody> - <tr> - <td>Project Name </td> - <td>This is the name of the directory or folder on your computer that you - want to contain the project.</td> - </tr> - <tr> - <td>Package Name </td> - <td>This is the package namespace (following the same rules as for - packages in the Java programming language) that you want all your source code to - reside under. This also sets the package name under which the stub - Activity will be generated.<p/> - The package name you use in your application must be unique across - all packages installed on the 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.</td> - </tr> - <tr> - <td>Activity Name </td> - <td>This is the name for the class stub that will be generated by the plugin. - This will be a subclass of Android's Activity class. An Activity is simply a - class that can run and do work. It can create a UI if it chooses, but it - doesn't need to. </td> - </tr> - <tr> - <td> Application Name </td> - <td> This is the human-readable title for your application. </td> - </tr> - </tbody> - </table> - -<p>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.</p> -</li> - -<li>Edit the auto-generated source code + </li> -<p>After the plugin runs, you'll have a class named HelloAndroid -(found in your package, HelloAndroid > src > com.android.hello). It should look like +<li>Edit the auto-generated source code. +<p>After the plugin runs, you'll have a class named <code>HelloAndroid</code> +(found in your package, <em>HelloAndroid > src > com.android.hello</em>). It should look like this:</p> <pre>public class HelloAndroid extends Activity { @@ -126,9 +94,8 @@ So, the next step is to modify some code! </p> </li> </ol> -<a name="ui"></a> -<h2>Construct the UI</h2> +<h2 id="ui">Construct the UI</h2> <p>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:</p> @@ -192,23 +159,23 @@ the TextView we just created.</p> <p>There it is — "Hello, World" in Android! The next step, of course, is to see it running.</p> -<a name="run"></a> -<h2>Run the Code: Hello, Android</h2> + +<h2 id="run">Run the Code: Hello, Android</h2> <p>The Eclipse plugin makes it very easy to run your applications. Begin by selecting the <strong>Run > Open Run Dialog</strong> menu entry (in Eclipse 3.4, it's <strong>Run > Run Configurations</strong>). You should see a dialog like this:</p> - <img src="images/hello_world_2.png"/> + <a href="images/hello_world_2.png"><img src="images/hello_world_2.png" style="height:230px" alt="" /></a> <p>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 have a new launcher entry named "New_configuration".</p> - <img src="images/hello_world_3.png"/> + <a href="images/hello_world_3.png"><img src="images/hello_world_3.png" style="height:230px" alt="" /></a> <p>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 @@ -220,21 +187,21 @@ simply continue.</p> <p>Click the "Apply" button. Here's an example:</p> - <img src="images/hello_world_4.png"/> + <a href="images/hello_world_4.png"><img src="images/hello_world_4.png" style="height:230px" alt="" /></a> <p>That's it — you're done! Click the Run button, and the Android Emulator should start. Once it's booted up your application will appear. When all is said and done, you should see something like this:</p> - <img src="images/hello_world_5.png"/> + <a href="images/hello_world_5.png"><img src="images/hello_world_5.png" style="height:230px" alt="" /></a> <p>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.</p> -<a name="upgrading"></a> -<h2>Upgrading the UI to an XML Layout</h2> + +<h2 id="upgrading">Upgrading the UI to an XML Layout</h2> <p>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 @@ -255,18 +222,18 @@ programmatically-constructed example you just completed:</p> android:layout_height="fill_parent" android:text="Hello, Android"/></pre> -<p>The general structure of an Android XML layout file is simple. It's a tree -of tags, where each tag is the name of a View class. In this example, it's -a very simple tree of one element, a TextView. You can use the -name of any class that extends View as a tag name in your XML layouts, +<p>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 +name of any class that extends 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 much simpler +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 application (its UI) from the application logic used to fetch and fill in data.</p> -<p>In this example, there are also four XML attributes. Here's a summary of what -they mean:</p> +<p>In this example, there's just one View element, the <code>TextView</code>, +which has four XML attributes. Here's a summary of what they mean:</p> <table> <tbody> @@ -314,53 +281,29 @@ they mean:</p> </table> -<p>So, that's what the XML layout looks like, but where do you put it? Under the /res/layout directory in your project. The "res" is +<p>This layout file belongs in the <code>res/layout/</code> directory in your project. The "res" is short for "resources" and that directory contains all the non-code assets that -your application requires. This includes things like images, localized +your application requires. Resources also include things like images, localized strings, and XML layout files.</p> -<p>The Eclipse plugin creates one of these XML files for you. In our example -above, we simply never used it. In the Package Explorer, expand the -folder /res/layout, and edit the file main.xml. Replace its contents with -the text above and save your changes.</p> - -<p>Now open the file named R.java in your source code folder in the Package -Explorer. You'll see that it now looks something like this:</p> - -<pre> -public final class R { - public static final class attr { - }; - public static final class drawable { - public static final int icon=0x7f020000; - }; - public static final class layout { - public static final int main=0x7f030000; - }; - public static final class string { - public static final int app_name=0x7f040000; - }; -}; -</pre> - -<p>A project's R.java file is an index into all the resources defined in the -file. You use this class in your source code as a sort of short-hand -way to refer to resources you've included in your project. This is -particularly powerful with the code-completion features of IDEs like Eclipse -because it lets you quickly and interactively locate the specific reference -you're looking for.</p> +<div class="sidebox"> + <h2>Landscape layout</h2> + <p>When you want a different design for landscape, put your layout XML file + in <code>res/layout-land/</code>. Android will automatically look here when the layout changes. + Without it the layout will just be stretched.</p> +</div> -<p>The important thing to notice for now is the inner class named "layout", and its -member field "main". The Eclipse plugin noticed that you added a new XML -layout file and then regenerated this R.java file. As you add other -resources to your projects you'll see R.java change to keep up.</p> +<p>The Eclipse plugin creates one of these XML files for you (<code>main.xml</code>). In our example +above, we just ignored it and created our layout programmatically. In the Eclipse Package Explorer, expand the +folder res/layout/, and open the file <code>main.xml</code> (once opened, you might need to click +the "main.xml" tab at the bottom to see the XML source). Replace its contents with +the sample XML above and save your changes.</p> -<p>The last thing you need to do is modify your HelloAndroid source code to use the new -XML version of your UI, instead of the hard-coded version. Here's what -your new class will look like. As you can see, the source code becomes much -simpler:</p> +<p>Now open and modify your <code>HelloAndroid</code> class source code to read the +XML layout, instead of the hard-coded version. Edit the file to look like this:</p> -<pre>package com.android.hello; +<pre> +package com.android.hello; import android.app.Activity; import android.os.Bundle; @@ -374,7 +317,11 @@ public class HelloAndroid extends Activity { } }</pre> -<p>When you make this change, don't just copy-and-paste it in. Try out the code-completion feature on that R class. You'll probably find that it helps a lot.</p> +<p>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.</p> + +<p>The <code>setContentView()</code> method we're now using expects a reference to a layout resource. +We pass it <code>R.layout.main</code>, which is the reference to the <code>layout/main.xml</code> once it's +compiled into our R class by the Eclipse plugin. (More about the R class in a moment.)</p> <p>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 @@ -383,13 +330,45 @@ you saw before! After all, the point was to show that the two different layout approaches produce identical results.</p> <p>There's a lot more to creating these XML layouts, but that's as far as we'll go -here. Read the <a -href="{@docRoot}devel/implementing-ui.html">Implementing a User Interface</a> documentation for more -information on the power of this approach.</p> +here. Read the <a href="{@docRoot}guide/topics/views/index.html">Views and Layout</a> documentation for more +information on creating layouts.</p> -<a name="debugging"></a> +<div class="special"> +<h3>R class</h3> +<p>Open the file named R.java in your source code folder in the Package +Explorer. It should look something like this:</p> -<h2>Debugging Your Project</h2> +<pre> +public final class R { + public static final class attr { + }; + public static final class drawable { + public static final int icon=0x7f020000; + }; + public static final class layout { + public static final int main=0x7f030000; + }; + public static final class string { + public static final int app_name=0x7f040000; + }; +}; +</pre> + +<p>A project's R.java file is an index into all the resources defined in the +file. You use this class in your source code as a sort of short-hand +way to refer to resources you've included in your project. This is +particularly powerful with the code-completion features of IDEs like Eclipse +because it lets you quickly and interactively locate the specific reference +you're looking for.</p> + +<p>For now, notice the inner class named "layout", and its +member field "main". The Eclipse plugin noticed the XML +layout file named main.xml and generated a class for it here. As you add other +resources to your project (in the <code>res/</code> directory), you'll see R.java change to keep up.</p> +<p><em>You should never edit this file by hand.</em></p> +</div> + +<h2 id="debugging">Debugging Your Project</h2> <p>The Android Plugin for Eclipse also has excellent integration with the Eclipse debugger. To demonstrate this, let's introduce a bug into @@ -415,7 +394,7 @@ public class HelloAndroid extends Activity { <p>This change simply introduces a NullPointerException into your code. If you run your application again, you'll eventually see this:</p> - <img src="images/hello_world_8.png"/> + <a href="images/hello_world_8.png"><img src="images/hello_world_8.png" style="height:230px" alt="" /></a> <p>Press "Force Quit" to terminate the application and close the emulator window.</p> @@ -426,36 +405,35 @@ emulator, but this time it will suspend when it reaches the breakpoint you set. You can then step through the code in Eclipse's Debug Perspective, just as you would for any other application.</p> - <img src="images/hello_world_9.png"/> - -<a name="noeclipse"></a> - -<h2>Creating the Project without Eclipse</h2> - -<p>If you don't use Eclipse (such as if you prefer another IDE, or simply use text -editors and command line tools) then the Eclipse plugin can't help you. -Don't worry though — you don't lose any functionality just because you don't -use Eclipse.</p> - -<p>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 <a href="tools.html">documented elsewhere.</a>) Thus, it's possible to -wrap those tools with another tool, such as an 'ant' build file.</p> - -<p>The Android SDK includes a Python script named "activitycreator.py" 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.</p> - -<p>For example, to create a HelloAndroid project similar to the one we just created -via Eclipse, you'd use this command:</p> - -<pre>activitycreator.py --out HelloAndroid com.android.hello.HelloAndroid</pre> - -<p>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 -installed and run in your emulator using the 'adb' tool.</p> - -<p>For more information on how to use these tools, please read the documentation -cited above.</p> + <a href="images/hello_world_9.png"><img src="images/hello_world_9.png" style="height:230px" alt="" /></a> + + +<h2 id="noeclipse">Creating the Project without Eclipse</h2> + + <p>If you don't use Eclipse (such as if you prefer another IDE, or simply use text + editors and command line tools) then the Eclipse plugin can't help you. + Don't worry though — you don't lose any functionality just because you don't + use Eclipse.</p> + + <p>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 <a href="{@docRoot}guide/developing/tools/index.html">documented elsewhere.</a>) Thus, it's possible to + wrap those tools with another tool, such as an 'ant' build file.</p> + + <p>The Android SDK includes a Python script named "activitycreator.py" 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.</p> + + <p>For example, to create a HelloAndroid project similar to the one we just created + via Eclipse, you'd use this command:</p> + + <pre>activitycreator.py --out HelloAndroid com.android.hello.HelloAndroid</pre> + + <p>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 + installed and run in your emulator using the 'adb' tool.</p> + + <p>For more information on how to use these tools, please read the documentation + cited above.</p>
\ No newline at end of file diff --git a/docs/html/guide/tutorials/images/hello_world_0.png b/docs/html/guide/tutorials/images/hello_world_0.png Binary files differindex 94a4c04..c174fba 100644 --- a/docs/html/guide/tutorials/images/hello_world_0.png +++ b/docs/html/guide/tutorials/images/hello_world_0.png diff --git a/docs/html/guide/tutorials/images/hello_world_1.png b/docs/html/guide/tutorials/images/hello_world_1.png Binary files differindex 9d28044..f08438a 100644 --- a/docs/html/guide/tutorials/images/hello_world_1.png +++ b/docs/html/guide/tutorials/images/hello_world_1.png diff --git a/docs/html/guide/tutorials/images/hello_world_2.png b/docs/html/guide/tutorials/images/hello_world_2.png Binary files differindex 76e7155..58f5703 100644 --- a/docs/html/guide/tutorials/images/hello_world_2.png +++ b/docs/html/guide/tutorials/images/hello_world_2.png diff --git a/docs/html/guide/tutorials/images/hello_world_3.png b/docs/html/guide/tutorials/images/hello_world_3.png Binary files differindex 8319374..d2d2ff6 100644 --- a/docs/html/guide/tutorials/images/hello_world_3.png +++ b/docs/html/guide/tutorials/images/hello_world_3.png diff --git a/docs/html/guide/tutorials/images/hello_world_4.png b/docs/html/guide/tutorials/images/hello_world_4.png Binary files differindex 164256c..5c41e80 100644 --- a/docs/html/guide/tutorials/images/hello_world_4.png +++ b/docs/html/guide/tutorials/images/hello_world_4.png diff --git a/docs/html/guide/tutorials/images/hello_world_5.png b/docs/html/guide/tutorials/images/hello_world_5.png Binary files differindex b17ca8b..96b830a 100644 --- a/docs/html/guide/tutorials/images/hello_world_5.png +++ b/docs/html/guide/tutorials/images/hello_world_5.png diff --git a/docs/html/guide/tutorials/images/hello_world_8.png b/docs/html/guide/tutorials/images/hello_world_8.png Binary files differindex 2429ba0..07db360 100644 --- a/docs/html/guide/tutorials/images/hello_world_8.png +++ b/docs/html/guide/tutorials/images/hello_world_8.png diff --git a/docs/html/guide/tutorials/images/hello_world_9.png b/docs/html/guide/tutorials/images/hello_world_9.png Binary files differindex e92fb4b..e172e63 100644 --- a/docs/html/guide/tutorials/images/hello_world_9.png +++ b/docs/html/guide/tutorials/images/hello_world_9.png diff --git a/docs/html/guide/tutorials/notepad/index.jd b/docs/html/guide/tutorials/notepad/index.jd new file mode 100644 index 0000000..6319fad --- /dev/null +++ b/docs/html/guide/tutorials/notepad/index.jd @@ -0,0 +1,142 @@ +page.title=Notepad Tutorial +@jd:body + + +<p>This tutorial on writing a notepad application gives you a "hands-on" introduction +to the Android framework and the tools you use to build applications on it. +Starting from a preconfigured project file, it guides you through the process of +developing a simple notepad application and provides concrete examples of how to +set up the project, develop the application logic and user interface, and then +compile and run the application. </p> + +<p>The tutorial presents the application development as a set of +exercises (see below), each consisting of several steps. You should follow +the steps in each exercise to gradually build and refine your +application. The exercises explain each step in detail and provide all the +sample code you need to complete the application. </p> + +<p>When you are finished with the tutorial, you will have created a functioning +Android application and will have learned many of the most important +concepts in Android development. If you want to add more complex features to +your application, you can examine the code in an alternative implementation +of a Note Pad application, in the +<a href="{@docRoot}guide/samples/index.html">Sample Code</a> section. </p> + + +<a name="who"></a> +<h2>Who Should Use this Tutorial</h2> + +<p>This tutorial is designed for experienced developers, especially those with +knowledge of the Java programming language. If you haven't written Java +applications before, you can still use the tutorial, but you might need to work +at a slower pace. </p> + +<p>Also note that this tutorial uses +the Eclipse development environment, with the Android plugin installed. If you +are not using Eclipse, you can follow the exercises and build the application, +but you will need to determine how to accomplish the Eclipse-specific +steps in your environment. </p> + +<a name="preparing"></a> +<h2>Preparing for the Exercises</h2> + +<p>The tutorial assumes that you have some familiarity with basic Android +application concepts and terminology. If you are not, you +should read <a href="{@docRoot}guide/topics/fundamentals.html">Application +Fundamentals</a> before continuing. </p> + +<p>This tutorial also builds on the introductory information provided in the +<a href="{@docRoot}guide/tutorials/hello-world.html">Hello World</a> +tutorial, which explains how to set up your Eclipse environment +for building Android applications. We recommend you complete the Hello World +tutorial before starting this one.</p> + +<p>To prepare for this lesson:</p> + +<ol> + <li>Download the <a href="codelab/NotepadCodeLab.zip">project + exercises archive (.zip)</a>.</li> + <li>Unpack the archive file to a suitable location on your machine.</li> + <li>Open the <code>NotepadCodeLab</code> folder.</li> +</ol> + +<p>Inside the <code>NotepadCodeLab</code> folder, you should see six project +files: <code>Notepadv1</code>, + <code>Notepadv2</code>, <code>Notepadv3</code>, + <code>Notepadv1Solution</code>, <code>Notepadv2Solution</code> + and <code>Notepadv3Solution</code>. The <code>Notepadv#</code> projects are +the starting points for each of the exercises, while the +<code>Notepadv#Solution</code> projects are the exercise + solutions. If you are having trouble with a particular exercise, you + can compare your current work against the exercise solution.</p> + +<a name="exercises"></a> +<h2> Exercises</h2> + + <p>The table below lists the tutorial exercises and describes the development +areas that each covers. Each exercise assumes that you have completed any +previous exercises.</p> + + <table border="0" style="padding:4px;spacing:2px;" summary="This +table lists the +tutorial examples and describes what each covers. "> + <tr> + <th width="120"><a href="{@docRoot}guide/tutorials/notepad/notepad-ex1.html">Exercise +1</a></th> + <td>Start here. Construct a simple notes list that lets the user add new notes but not +edit them. Demonstrates the basics of <code>ListActivity</code> and creating +and handling + menu options. Uses a SQLite database to store the notes.</td> + </tr> + <tr> + <th><a href="{@docRoot}guide/tutorials/notepad/notepad-ex2.html">Exercise 2</a></th> + <td>Add a second Activity to the +application. Demonstrates constructing a +new Activity, adding it to the Android manifest, passing data between the +activities, and using more advanced screen layout. Also shows how to +invoke another Activity to return a result, using +<code>startActivityForResult()</code>.</td> + </tr> + <tr> + <th><a href="{@docRoot}guide/tutorials/notepad/notepad-ex3.html">Exercise 3</a></th> + <td>Add handling of life-cycle events to +the application, to let it +maintain application state across the life cycle. </td> + </tr> + <tr> + <th><a href="{@docRoot}guide/tutorials/notepad/notepad-extra-credit.html">Extra +Credit</a></th> + <td>Demonstrates how to use the Eclipse +debugger and how you can use it to +view life-cycle events as they are generated. This section is optional but +highly recommended.</td> + </tr> +</table> + + +<a name="other"></a> +<h2>Other Resources and Further Learning</h2> +<ul> +<li>For a lighter but broader introduction to concepts not covered in the +tutorial, +take a look at <a href="{@docRoot}guide/appendix/faq/commontasks.html">Common Android Tasks</a>.</li> +<li>The Android SDK includes a variety of fully functioning sample applications +that make excellent opportunities for further learning. You can find the sample +applications in the <code>samples/</code> directory of your downloaded SDK, or browser them +here, in the <a href="{@docRoot}guide/samples/index.html">Sample Code</a> section.</li> +<li>This tutorial draws from the full Notepad application included in the +<code>samples/</code> directory of the SDK, though it does not match it exactly. +When you are done with the tutorial, +it is highly recommended that you take a closer look at this version of the Notepad +application, +as it demonstrates a variety of interesting additions for your application, +such as:</li> + <ul> + <li>Setting up a custom striped list for the list of notes.</li> + <li>Creating a custom text edit view that overrides the <code>draw()</code> + method to make it look like a lined notepad.</li> + <li>Implementing a full <code>ContentProvider</code> for notes.</li> + <li>Reverting and discarding edits instead of just automatically saving + them.</li> + </ul> +</ul> diff --git a/docs/html/guide/tutorials/notepad/notepad-ex1.jd b/docs/html/guide/tutorials/notepad/notepad-ex1.jd index 715267f..45ed97e 100644 --- a/docs/html/guide/tutorials/notepad/notepad-ex1.jd +++ b/docs/html/guide/tutorials/notepad/notepad-ex1.jd @@ -17,10 +17,10 @@ selections. </em></li> <div style="float:right;white-space:nowrap"> <span style="color:#BBB;"> - [<a href="tutorial-ex1.html" style="color:#BBB;">Exercise 1</a>]</span> - [<a href="tutorial-ex2.html">Exercise 2</a>] - [<a href="tutorial-ex3.html">Exercise 3</a>] - [<a href="tutorial-extra-credit.html">Extra Credit</a>] + [<a href="notepad-ex1.html" style="color:#BBB;">Exercise 1</a>]</span> + [<a href="notepad-ex2.html">Exercise 2</a>] + [<a href="notepad-ex3.html">Exercise 3</a>] + [<a href="notepad-extra-credit.html">Extra Credit</a>] </div> @@ -31,8 +31,8 @@ selections. </em></li> <p><code>Notepadv1</code> is a project that is provided as a starting point. It takes care of some of the boilerplate work that you have already seen if you - followed the <a href="{@docRoot}intro/hello-android.html">Hello - Android tutorial.</a></p> + followed the <a href="{@docRoot}guide/tutorials/hello-world.html">Hello, + World</a> tutorial.</p> <ol> <li> @@ -42,7 +42,7 @@ selections. </em></li> In the New Android Project dialog, select <strong>Create project from existing source</strong>.</li> <li> Click <strong>Browse</strong> and navigate to where you copied the <code>NotepadCodeLab</code> - (downloaded during <a href="/android/intro/tutorial.html#preparing">setup</a>). Select + (downloaded during <a href="{@docRoot}guide/tutorials/notepad/index.html#preparing">setup</a>). Select <code>Notepadv1</code> and click <strong>Choose</strong>.</li> <li> You should see <code>Notepadv1</code> in the <em>Project name</em> and also see the <em>Location</em> @@ -72,8 +72,8 @@ selections. </em></li> {@link android.content.ContentProvider ContentProvider}.</p> <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">If you are interested, you can find out more about - <a href="{@docRoot}devel/data/contentproviders.html">content providers</a> or the whole - subject of <a href="{@docRoot}devel/data.html">Storing, Retrieving, and Exposing Data</a>. + <a href="{@docRoot}guide/topics/providers/content-providers.html">content providers</a> or the whole + subject of <a href="{@docRoot}guide/topics/data/data-storage.html">Data Storage</a>. The NotePad sample in the <code>samples/</code> folder of the SDK also has an example of how to create a ContentProvider.</p> </div> @@ -145,9 +145,9 @@ selections. </em></li> <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">Full screen layouts are not the only option for an Activity however. You might also want to use a <a -href="{@docRoot}kb/commontasks.html#floatingorfull">floating +href="{@docRoot}guide/appendix/faq/commontasks.html#floatingorfull">floating layout</a> (for example, a <a -href="{@docRoot}kb/commontasks.html#dialogsandalerts">dialog +href="{@docRoot}guide/appendix/faq/commontasks.html#dialogsandalerts">dialog or alert</a>), or perhaps you don't need a layout at all (the Activity will be invisible to the user unless you specify some kind of layout for it to use).</p> @@ -236,7 +236,7 @@ and background-color:#FFFFDD;">Resources and the R class</h2> <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">The folders under res/ in the Eclipse project are for resources. - There is a <a href="{@docRoot}kb/commontasks.html#filelist">specific structure</a> to the + There is a <a href="{@docRoot}guide/appendix/faq/commontasks.html#filelist">specific structure</a> to the folders and files under res/.</p> <p style="padding-left:.5em;font-size:12px; margin:0; padding:.0em .5em .5em 1em;">Resources defined in these folders and files will have @@ -330,7 +330,7 @@ Notepadv1 titles:</p> <ol> <li> - In the <code>onCreate</code> method, call <code>super()</code> with the + In the <code>onCreate</code> method, call <code>super.onCreate()</code> with the <code>savedInstanceState</code> parameter that's passed in.</li> <li> Call <code>setContentView()</code> and pass <code>R.layout.notepad_list</code>.</li> @@ -376,11 +376,11 @@ Notepadv1 background-color:#FFFFDD;">More on menus</h2> <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">The notepad application we are constructing only scratches the - surface with <a href="{@docRoot}kb/commontasks.html#addmenuitems">menus</a>. </p> + surface with <a href="{@docRoot}guide/appendix/faq/commontasks.html#addmenuitems">menus</a>. </p> <p style="padding-left:.5em;font-size:12px;margin:0; - padding:.0em .5em .5em 1em;">You can also <a href="{@docRoot}kb/commontasks.html#menukeyshortcuts">add -shortcut keys for menu items</a>, <a href="{@docRoot}kb/commontasks.html#menukeyshortcuts">create -submenus</a> and even <a href="{@docRoot}kb/commontasks.html#addingtoothermenus">add + padding:.0em .5em .5em 1em;">You can also <a href="{@docRoot}guide/appendix/faq/commontasks.html#menukeyshortcuts">add +shortcut keys for menu items</a>, <a href="{@docRoot}guide/appendix/faq/commontasks.html#menukeyshortcuts">create +submenus</a> and even <a href="{@docRoot}guide/appendix/faq/commontasks.html#addingtoothermenus">add menu items to other applications!</a>. </p> </div> @@ -582,7 +582,7 @@ We will simply from the zip file to compare with your own.</p> -<p>Once you are ready, move on to <a href="tutorial-ex2.html">Tutorial +<p>Once you are ready, move on to <a href="notepad-ex2.html">Tutorial Exercise 2</a> to add the ability to create, edit and delete notes.</p> -<p><a href="tutorial.html">Back to the Tutorial main page...</a></p> +<p><a href="index.html">Back to the Tutorial main page...</a></p> diff --git a/docs/html/guide/tutorials/notepad/notepad-ex2.jd b/docs/html/guide/tutorials/notepad/notepad-ex2.jd index ce7681b..b4608fb 100644 --- a/docs/html/guide/tutorials/notepad/notepad-ex2.jd +++ b/docs/html/guide/tutorials/notepad/notepad-ex2.jd @@ -14,12 +14,12 @@ demonstrates:</em></p> </ul> <div style="float:right;white-space:nowrap"> - [<a href="tutorial-ex1.html">Exercise 1</a>] + [<a href="notepad-ex1.html">Exercise 1</a>] <span style="color:#BBB;"> - [<a href="tutorial-ex2.html" style="color:#DDD;">Exercise 2</a>] + [<a href="notepad-ex2.html" style="color:#DDD;">Exercise 2</a>] </span> - [<a href="tutorial-ex3.html">Exercise 3</a>] - [<a href="tutorial-extra-credit.html">Extra Credit</a>] + [<a href="notepad-ex3.html">Exercise 3</a>] + [<a href="notepad-extra-credit.html">Extra Credit</a>] </div> <h2>Step 1</h2> @@ -122,7 +122,7 @@ public boolean onMenuItemSelected(int featureId, MenuItem item) { <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">In this example our Intent uses a class name specifically. As well as - <a href="{@docRoot}kb/commontasks.html#intentexamples">starting intents</a> in + <a href="{@docRoot}guide/appendix/faq/commontasks.html#intentexamples">starting intents</a> in classes we already know about, be they in our own application or another application, we can also create Intents without knowing exactly which application will handle it.</p> @@ -295,11 +295,11 @@ case ACTIVITY_EDIT: in real Android applications.</p> <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">Creating a good UI is part art and part science, and the rest is work. Mastering <a - href="{@docRoot}devel/implementing-ui.html">Android layout</a> is an essential part of creating + href="{@docRoot}guide/topics/views/declaring-layout.html">Android layout</a> is an essential part of creating a good looking Android application.</p> <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">Take a look at the - <a href="{@docRoot}reference/view-gallery.html">View Gallery</a> + <a href="{@docRoot}guide/tutorials/views/index.html">Hello Views</a> for some example layouts and how to use them. The ApiDemos sample project is also a great resource from which to learn how to create different layouts.</p> </div> @@ -459,7 +459,7 @@ confirmButton.setOnClickListener(new View.OnClickListener() { </ol> <h2>Step 10</h2> -<p>Fill in the body of the <code>onClick()</code> method in our listener.</p> +<p>Fill in the body of the <code>onClick()</code> method of the <code>OnClickListener</code> created in the last step.</p> <p>This is the code that will be run when the user clicks on the confirm button. We want this to grab the title and body text from the edit @@ -570,7 +570,7 @@ protected void onCreate(Bundle savedInstanceState) { receive, and more. </p> <p style="padding-left:.5em;font-size:12px;margin:0; padding:.0em .5em .5em 1em;">For more information, see the reference document - <a href="{@docRoot}devel/bblocks-manifest.html">AndroidManifest.xml</a></p> + <a href="{@docRoot}guide/topics/manifest/manifest.html">AndroidManifest.xml</a></p> </div> <p>Finally, the new Activity has to be defined in the manifest file:</p> @@ -632,9 +632,9 @@ your changes have been lost. In the next exercise we will fix these problems.</p> <p> -Once you are ready, move on to <a href="tutorial-ex3.html">Tutorial +Once you are ready, move on to <a href="notepad-ex3.html">Tutorial Exercise 3</a> where you will fix the problems with the back button and lost edits by introducing a proper life cycle into the NoteEdit Activity.</p> -<p><a href="tutorial.html">Back to the Tutorial main page...</a>.</p> +<p><a href="index.html">Back to the Tutorial main page...</a>.</p> diff --git a/docs/html/guide/tutorials/notepad/notepad-ex3.jd b/docs/html/guide/tutorials/notepad/notepad-ex3.jd index b42734f..a2eaa48 100644 --- a/docs/html/guide/tutorials/notepad/notepad-ex3.jd +++ b/docs/html/guide/tutorials/notepad/notepad-ex3.jd @@ -10,12 +10,12 @@ retrieve application state data. This exercise demonstrates:</em></p> </ul> <div style="float:right;white-space:nowrap"> - [<a href="tutorial-ex1.html">Exercise 1</a>] - [<a href="tutorial-ex2.html">Exercise 2</a>] + [<a href="notepad-ex1.html">Exercise 1</a>] + [<a href="notepad-ex2.html">Exercise 2</a>] <span style="color:#BBB;"> - [<a href="tutorial-ex3.html" style="color:#BBB;">Exercise 3</a>] + [<a href="notepad-ex3.html" style="color:#BBB;">Exercise 3</a>] </span> - [<a href="tutorial-extra-credit.html">Extra Credit</a>] + [<a href="notepad-extra-credit.html">Extra Credit</a>] </div> <h2>Step 1</h2> @@ -200,8 +200,8 @@ and populate the View elements with them.</p> have to store enough state to come back up later, preferably in the same state it was in when it was killed.</p> <p style="padding-left:.5em;font-size:12px;margin:0;padding:.0em .5em .5em 1em;"> - Android has a <a href="{@docRoot}intro/lifecycle.html">well-defined life cycle</a>. - Life-cycle events can happen even if you are not handing off control to + Android has a <a href="{@docRoot}guide/topics/fundamentals.html#lcycles">well-defined life cycle</a>. + Lifecycle events can happen even if you are not handing off control to another Activity explicitly. For example, perhaps a call comes in to the handset. If this happens, and your Activity is running, it will be swapped out while the call Activity takes over.</p> @@ -351,8 +351,7 @@ click menu again)</p> from the zip file to compare with your own.</p> <p> -When you are ready, move on to the <a href="{@docRoot}intro/tutorial-extra-credit.html">Tutorial +When you are ready, move on to the <a href="notepad-extra-credit.html">Tutorial Extra Credit</a> exercise, where you can use the Eclipse debugger to examine the life-cycle events as they happen.</p> -<p><a href="{@docRoot}intro/tutorial.html">Back to the Tutorial main -page...</a></p> +<p><a href="index.html">Back to the Tutorial main page...</a></p> diff --git a/docs/html/guide/tutorials/notepad/notepad-extra-credit.jd b/docs/html/guide/tutorials/notepad/notepad-extra-credit.jd index 9ab84ce..f64e90e 100644 --- a/docs/html/guide/tutorials/notepad/notepad-extra-credit.jd +++ b/docs/html/guide/tutorials/notepad/notepad-extra-credit.jd @@ -11,11 +11,11 @@ in Exercise 3. This exercise demonstrates:</em></p> <div style="float:right;white-space:nowrap"> - [<a href="tutorial-ex1.html">Exercise 1</a>] - [<a href="tutorial-ex2.html">Exercise 2</a>] - [<a href="tutorial-ex3.html">Exercise 3</a>] + [<a href="notepad-ex1.html">Exercise 1</a>] + [<a href="notepad-ex2.html">Exercise 2</a>] + [<a href="notepad-ex3.html">Exercise 3</a>] <span style="color:#BBB;"> - [<a href="tutorial-extra-credit.html" style="color:#BBB;">Extra Credit</a>] + [<a href="notepad-extra-credit.html" style="color:#BBB;">Extra Credit</a>] </span> </div> @@ -63,8 +63,8 @@ when.</p> <p>The Android Eclipse plugin not only offers excellent debugging support for your application development, but also superb profiling support. You can also -try using <a href="{@docRoot}reference/traceview.html">Traceview</a> to profile your application. If your application is running too slow, this can help you +try using <a href="{@docRoot}guide/developing/tools/traceview.html">Traceview</a> to profile your application. If your application is running too slow, this can help you find the bottlenecks and fix them.</p> -<p><a href="{@docRoot}intro/tutorial.html">Back to the Tutorial main +<p><a href="index.html">Back to the Tutorial main page...</a></p> diff --git a/docs/html/guide/tutorials/views/hello-autocomplete.jd b/docs/html/guide/tutorials/views/hello-autocomplete.jd index 9f97b32..de3ba29 100644 --- a/docs/html/guide/tutorials/views/hello-autocomplete.jd +++ b/docs/html/guide/tutorials/views/hello-autocomplete.jd @@ -1,4 +1,6 @@ page.title=Hello, AutoCompleteTextView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>{@link android.widget.AutoCompleteTextView} is an implementation of the EditText widget that will provide @@ -111,4 +113,4 @@ static final String[] COUNTRIES = new String[] { <li>{@link android.widget.AutoCompleteTextView}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-datepicker.jd b/docs/html/guide/tutorials/views/hello-datepicker.jd index b35d4db..fcd43f3 100644 --- a/docs/html/guide/tutorials/views/hello-datepicker.jd +++ b/docs/html/guide/tutorials/views/hello-datepicker.jd @@ -1,4 +1,6 @@ page.title=Hello, DatePicker +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.DatePicker} is a widget that allows the user to select a month, day and year.</p> @@ -146,4 +148,4 @@ protected Dialog onCreateDialog(int id) { <li>{@link android.widget.TextView}</li> <li>{@link java.util.Calendar}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-formstuff.jd b/docs/html/guide/tutorials/views/hello-formstuff.jd index 80ae6ce..f858ce3 100644 --- a/docs/html/guide/tutorials/views/hello-formstuff.jd +++ b/docs/html/guide/tutorials/views/hello-formstuff.jd @@ -1,4 +1,6 @@ page.title=Hello, Form Stuff +parent.title=Hello, Views +parent.link=index.html @jd:body <p>This page introduces a variety of widgets, like image buttons, @@ -258,4 +260,3 @@ use <code>setChecked(true)</code> or <code>toggle()</code>. </p> <li>{@link android.widget.ToggleButton}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-gallery.jd b/docs/html/guide/tutorials/views/hello-gallery.jd index af01757..084f912 100644 --- a/docs/html/guide/tutorials/views/hello-gallery.jd +++ b/docs/html/guide/tutorials/views/hello-gallery.jd @@ -1,4 +1,6 @@ page.title=Hello, Gallery +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.Gallery} is a View commonly used to display items in a horizontally scrolling list @@ -129,5 +131,5 @@ exactly match the ImageView dimensions.</p> <li>{@link android.widget.ImageView}</li> <li>{@link android.widget.Toast}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-gridview.jd b/docs/html/guide/tutorials/views/hello-gridview.jd index d5c8628..623a03d 100644 --- a/docs/html/guide/tutorials/views/hello-gridview.jd +++ b/docs/html/guide/tutorials/views/hello-gridview.jd @@ -1,4 +1,6 @@ page.title=Hello, GridView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.GridView} displays items in a two-dimensional, scrolling grid. The items @@ -124,4 +126,3 @@ public class ImageAdapter extends BaseAdapter { <li>{@link android.widget.BaseAdapter}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-linearlayout.jd b/docs/html/guide/tutorials/views/hello-linearlayout.jd index ecea062..0e8947c 100644 --- a/docs/html/guide/tutorials/views/hello-linearlayout.jd +++ b/docs/html/guide/tutorials/views/hello-linearlayout.jd @@ -1,4 +1,6 @@ page.title=Hello, LinearLayout +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.LinearLayout} is a GroupView that will lay child View elements @@ -125,4 +127,4 @@ Pay attention to the effect of the <code>layout_weight</code>. Try <li>{@link android.widget.TextView}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-listview.jd b/docs/html/guide/tutorials/views/hello-listview.jd index 41b7f6e..d90005b 100644 --- a/docs/html/guide/tutorials/views/hello-listview.jd +++ b/docs/html/guide/tutorials/views/hello-listview.jd @@ -1,4 +1,6 @@ page.title=Hello, ListView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.ListView} is a View that shows items in a vertically scrolling list. The items are @@ -86,4 +88,3 @@ public void onCreate(Bundle savedInstanceState) { <li>{@link android.widget.ListAdapter}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-mapview.jd b/docs/html/guide/tutorials/views/hello-mapview.jd index 5b23f9b..fcdf056 100644 --- a/docs/html/guide/tutorials/views/hello-mapview.jd +++ b/docs/html/guide/tutorials/views/hello-mapview.jd @@ -1,4 +1,6 @@ page.title=Hello, MapView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A MapView allows you to create your own map-viewing Activity. @@ -23,23 +25,29 @@ First, we'll create a simple Activity that can view and navigate a map. Then we android:id="@+id/mainlayout" android:orientation="vertical" android:layout_width="fill_parent" - android:layout_height="fill_parent" - > + android:layout_height="fill_parent" > <com.google.android.maps.MapView android:id="@+id/mapview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" - android:apiKey="myapikey" + android:apiKey="INSERT YOUR KEY HERE" /> <RelativeLayout> </pre> - - <p>The <code>android:apiKey</code> should actually contain a legitimate value that's - associated to your application. For now, it's okay to just leave this as an - arbitrary string. But to run on 1.0 software, an authentic key will be needed.</p></li> + <p>Setting <code>clickable</code> is important. Otherwise, the map does not allow any user interaction.</p> + + <p>The <code>android:apiKey</code> must contain an authentic Android Maps API key. + The API key is generated using the MD5 fingerprint of your application certificate. For the purposes of + this exercise, you should use the fingerprint of your debug certificate (which cannot be used to release + your application for Android devices, but will work while developing). See how to + <a href="{@docRoot}guide/topics/geo/mapkey.html#getdebugfingerprint">generate a fingerprint from your + debug certificate</a>, then <a href="http://code.google.com/android/maps-api-signup.html">register the + certificate</a> to retieve an API key. + Insert the API key as the value of the <code>apiKey</code> attribute. If you do not insert a valid + Maps API key, the application will still run, but no map tiles will load.</p></li> <li>Now open the HelloMapView.java file. For this Activity, we're going to extend the special sub-class of Activity called MapActivity, so change the class declaration to extend @@ -47,7 +55,7 @@ First, we'll create a simple Activity that can view and navigate a map. Then we <pre>public class HelloMapView extends MapActivity {</pre> - <li>The <code>isRouteDisplayed()</code> method is requires, so add it inside the class: + <li>The <code>isRouteDisplayed()</code> method is required, so add it inside the class: <pre> @Override protected boolean isRouteDisplayed() { @@ -117,7 +125,7 @@ class, which can manage a whole set of Overlay items for us.</p> <ol> <li>Create a new Java class named HelloItemizedOverlay that implements ItemizedOverlay. - <p>Right-click the package name in the Eclipse Package Explorer, and select New > Class. Fill-in + <p>When using Eclipse, right-click the package name in the Eclipse Package Explorer, and select New > Class. Fill-in the Name field as <em>HelloItemizedOverlay</em>. For the Superclass, enter <em>com.google.android.maps.ItemizedOverlay</em>. Click the checkbox for <em>Constructors from superclass</em>. Click Finish.</p></li> @@ -151,7 +159,12 @@ public void addOverlay(OverlayItem overlay) { <code>createItem(int)</code>. We must define this method to properly read from our ArrayList. Replace the existing contents of the createItem method with a <code>get()</code> call to our ArrayList: - <pre>return mOverlays.get(i);</pre></li> +<pre> +@Override +protected OverlayItem createItem(int i) { + return mOverlays.get(i); +} +</pre></li> <li>We're also required to override the <code>size()</code> method. Replace the existing contents of the method with a size request to our ArrayList: @@ -185,14 +198,14 @@ HelloItemizedOverlay itemizedOverlay;</pre></li> new fields: <pre> -mapoverlays = mapView.getOverlays(); -drawable = this.getResources().getDrawable(R.drawable.banana); +mapOverlays = mapView.getOverlays(); +drawable = this.getResources().getDrawable(R.drawable.androidmarker); itemizedoverlay = new HelloItemizedOverlay(drawable);</pre> <p>All overlay elements on a map are held by the MapView, so when we want to add some, we must first retrieve the List with <code>getOverlays()</code> methods. We instantiate the Drawable, which will be used as our map marker, by using our Context resources to get the Drawable we placed in - the res/drawable/ directory. Our HelloItemizedOverlay takes the Drawable in order to set the + the res/drawable/ directory (androidmarker.png). Our HelloItemizedOverlay takes the Drawable in order to set the default marker.</p></li> <li>Now let's make our first OverlayItem by creating a GeoPoint @@ -211,7 +224,7 @@ OverlayItem overlayitem = new OverlayItem(point, "", "");</pre> <pre> itemizedoverlay.addOverlay(overlayitem); -mapoverlays.add(itemizedoverlay);</pre></li> +mapOverlays.add(itemizedoverlay);</pre></li> <li>Run it!</li> </ol> @@ -228,4 +241,3 @@ OverlayItem overlayitem2 = new OverlayItem(point2, "", ""); </pre> <p>Run it again... We've sent a new droid to Tokyo. Sekai, konichiwa!</p> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-relativelayout.jd b/docs/html/guide/tutorials/views/hello-relativelayout.jd index 4467631..1b91537 100644 --- a/docs/html/guide/tutorials/views/hello-relativelayout.jd +++ b/docs/html/guide/tutorials/views/hello-relativelayout.jd @@ -1,4 +1,6 @@ page.title=Hello, RelativeLayout +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.RelativeLayout} is a ViewGroup that allows you to layout child elements @@ -71,7 +73,3 @@ public void onCreate(Bundle savedInstanceState) { <li>{@link android.widget.EditText}</li> <li>{@link android.widget.Button}</li> </ul> - - -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> - diff --git a/docs/html/guide/tutorials/views/hello-spinner.jd b/docs/html/guide/tutorials/views/hello-spinner.jd index 4a0f12f..3a04214 100644 --- a/docs/html/guide/tutorials/views/hello-spinner.jd +++ b/docs/html/guide/tutorials/views/hello-spinner.jd @@ -1,4 +1,6 @@ page.title=Hello, Spinner +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.Spinner} is a widget that allows the user to select an item from a group. @@ -102,4 +104,3 @@ public void onCreate(Bundle savedInstanceState) { <li>{@link android.widget.Spinner}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-tablelayout.jd b/docs/html/guide/tutorials/views/hello-tablelayout.jd index e7f2de5..83d6f5d 100644 --- a/docs/html/guide/tutorials/views/hello-tablelayout.jd +++ b/docs/html/guide/tutorials/views/hello-tablelayout.jd @@ -1,4 +1,6 @@ page.title=Hello, TableLayout +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.TableLayout} is a ViewGroup that @@ -114,6 +116,3 @@ public void onCreate(Bundle savedInstanceState) { </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> - - diff --git a/docs/html/guide/tutorials/views/hello-tabwidget.jd b/docs/html/guide/tutorials/views/hello-tabwidget.jd new file mode 100644 index 0000000..8424616 --- /dev/null +++ b/docs/html/guide/tutorials/views/hello-tabwidget.jd @@ -0,0 +1,124 @@ +page.title=Hello, TabWidget +parent.title=Hello, Views +parent.link=index.html +@jd:body + +<p>A {@link android.widget.TabWidget} offers the ability to easily draw an interface that uses +tabs to navigate between different views.</p> + +<ol> + <li>Start a new project/Activity called HelloTabWidget.</li> + <li>Open the layout file and make it like so:</li> + <pre> +<?xml version="1.0" encoding="utf-8"?> +<TabHost xmlns:android="http://schemas.android.com/apk/res/android" + android:id="@android:id/tabhost" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <LinearLayout + android:orientation="vertical" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <TabWidget + android:id="@android:id/tabs" + android:layout_width="fill_parent" + android:layout_height="wrap_content" /> + <FrameLayout + android:id="@android:id/tabcontent" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <TextView + android:id="@+id/textview1" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is a tab" /> + <TextView + android:id="@+id/textview2" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is another tab" /> + <TextView + android:id="@+id/textview3" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is a third tab" /> + </FrameLayout> + </LinearLayout> +</TabHost> +</pre> + <p>Here, we've created a {@link android.widget.TabHost} that contains the entire layout of the Activity. + A TabHost requires two descendant elements: a {@link android.widget.TabWidget} and a {@link android.widget.FrameLayout}. + In order to properly layout these elements, we've put them inside a vertical {@link android.widget.LinearLayout}. + The FrameLayout is where we keep the content that will change with each tab. Each child in the FrameLayout will + be associated with a different tab. + In this case, each tab simply shows a different {@link android.widget.TextView} with some text. </p> + <p>Notice that the TabWidget and the FrameLayout elements have specific <code>android</code> namespace IDs. These are necessary + so that the TabHost can automatically retireve references to them, populate the TabWidget with the tabs that we'll define + in our code, and swap the views in the FrameLayout. We've also defined our own IDs for each TextView, which we'll use to + associate each tab with the view that it should reveal.</p> + <p>Of course, you can + make these child views as large as complex as you'd like — instead of the TextView elements, + you could start with other layout views and build a unique layout hierarchy for each tab.</p> + </li> + <li>Now we'll add our code. Open HelloTabWidget.java and make it a <code>TabActivity</code>. + <p>By default, Eclipse creates a class that extends <code>Activity</code>. Change it to + extend <code>TabActivity</code>:</p> + <pre> +public class HelloTabWidget extends TabActivity { +</pre> + </li> + <li>Now fill in the the <code>onCreate</code> method like this: + <pre> +public void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.main); + + mTabHost = getTabHost(); + + mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1").setContent(R.id.textview1)); + mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").setContent(R.id.textview2)); + mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3").setContent(R.id.textview3)); + + mTabHost.setCurrentTab(0); +} +</pre> + <p>As usual, we start by setting our layout.</p> + <p>We then call the TabActivity method <code>getTabHost()</code>, + which returns us a reference to the TabHost we created in our layout. Upon our TabHost, we call <code>addTab()</code> + for each of the tabs that we want to add to the TabWidget. Each time we call this, we pass a + {@link android.widget.TabHost.TabSpec} that we build on the fly, and with it, chain together two necessary methods: + <code>setIndicator()</code> to set the text for the tab button, and <code>setContent()</code> to define + which View we want to associate with the tab and reveal when pressed. Our indicator is just a text string and + our content is an ID reference to the TextView elements we inserted in the FrameLayout.</p> + <p>At the end, we call <code>setCurrentTab()</code> to define which tab should be opened by default. The tabs + are saved like a zero-based array, so to open the first tab, we pass zero (<var>0</var>).</p> + </li> + <li>To clean-up the presentation a bit more, let's remove the window title that appears at the top of the layout. + Android includes a theme that removes that title for us. To add it, open the Android Manifest file and add + the <var>NoTitleBar</var> theme to the <code><application></code> tag. It should end up like this: + <pre> +<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar"> +</pre> + </li> + <li>That's it. Run your application.</li> + +</ol> + + +<p>Your application should look like this:</p> +<img src="images/hello-tabwidget.png" width="150px" /> + +<div class="special"><p>You can include icons in your tabs by passing a +{@link android.graphics.drawable.Drawable} when you call <code>setIndicator()</code>. Here's an example +that uses a Drawable created from an image in the project resources:</p> +<pre>setIndicator("TAB 1", getResources().getDrawable(R.drawable.tab_icon))</pre> +</div> + +<h3>References</h3> +<ul> +<li>{@link android.widget.TabWidget}</li> +<li>{@link android.widget.TabHost}</li> +<li>{@link android.widget.TabHost.TabSpec}</li> +<li>{@link android.widget.FrameLayout}</li> +</ul> + diff --git a/docs/html/guide/tutorials/views/hello-timepicker.jd b/docs/html/guide/tutorials/views/hello-timepicker.jd index 2faad00..1a6c8f9 100644 --- a/docs/html/guide/tutorials/views/hello-timepicker.jd +++ b/docs/html/guide/tutorials/views/hello-timepicker.jd @@ -1,4 +1,6 @@ page.title=Hello, TimePicker +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.TimePicker} is a widget that allows the @@ -154,4 +156,4 @@ private static String pad(int c) { <li>{@link android.widget.TextView}</li> <li>{@link java.util.Calendar}</li> </ol> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-webview.jd b/docs/html/guide/tutorials/views/hello-webview.jd index 542f91f..c4388ea 100644 --- a/docs/html/guide/tutorials/views/hello-webview.jd +++ b/docs/html/guide/tutorials/views/hello-webview.jd @@ -1,4 +1,6 @@ page.title=Hello, WebView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.webkit.WebView} allows you to create your own web browser Activity. In this tutorial, @@ -110,7 +112,6 @@ public boolean onKeyDown(int keyCode, KeyEvent event) { <li>{@link android.view.KeyEvent}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/images/hello-tabwidget.png b/docs/html/guide/tutorials/views/images/hello-tabwidget.png Binary files differnew file mode 100644 index 0000000..6a52356 --- /dev/null +++ b/docs/html/guide/tutorials/views/images/hello-tabwidget.png diff --git a/docs/html/guide/tutorials/views/hello-views-index.jd b/docs/html/guide/tutorials/views/index.jd index fd00233..6a6ac4b 100644 --- a/docs/html/guide/tutorials/views/hello-views-index.jd +++ b/docs/html/guide/tutorials/views/index.jd @@ -3,7 +3,7 @@ page.title=Hello, Views <style> .view {float:left; margin:10px; font-size:120%; font-weight:bold;} -.view img {border:1px solid black; margin-top:5px; padding:5px;} +.view img {border:1px solid black; margin:5px 0 0; padding:5px;} </style> <p>This collection of "Hello World"-style tutorials is designed @@ -12,7 +12,7 @@ these kinds of boring bits so you can focus on developing the code that makes yo Of course, we'll discuss some of the given code so that it all makes sense.</p> <p>Note that a certain amount of knowledge is assumed for these tutorials. If you haven't -completed the <a href="{@docRoot}guide/tutorials/hello-world.html">Hello World tutorial</a>, +completed the <a href="{@docRoot}guide/tutorials/hello-world.html">Hello, World</a> tutorial, please do so—it will teach you many things you should know about basic Android development and Eclipse features. More specifically, you should know:</p> <ul> @@ -77,6 +77,12 @@ your strings.xml file.</p> <a href="hello-gallery.html">Gallery<br/> <img src="images/hello-gallery.png" height="285" width="200" /></a> </div> + +<div class="view"> +<a href="hello-tabwidget.html">TabWidget<br/> +<img src="images/hello-tabwidget.png" height="285" width="200" /></a> +</div> + <div class="view"> <a href="hello-mapview.html">MapView<br/> <img src="images/hello-mapview.png" height="285" width="200" /></a> @@ -106,7 +112,7 @@ ProgressBar; RatingBar; FrameLayout There are plenty more Views and widgets available. See the {@link android.view.View} class for more on View layouts, and the {@link android.widget widget package} for more useful widgets. And for more raw code samples, visit the -<a href="{@docRoot}samples/ApiDemos/src/com/example/android/apis/view/index.html">Api Demos</a>. -These can also be found offline, in <code>/<your-SDK>/samples/ApiDemos</code>.</p> +<a href="{@docRoot}guide/samples/ApiDemos/src/com/example/android/apis/view/index.html">Api Demos</a>. +These can also be found offline, in <code>/<sdk>/samples/ApiDemos</code>.</p> </div> |