docs/html/guide/tutorials/hello-world.jd

page.title=Hello, World
@jd:body

<p>As a developer, you know that the first impression
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
development cycles.</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>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 
<a href="{@docRoot}sdk/1.1_r1/installing.html">Installing the Android SDK</a> to get these
installed.</p>

<p class="note"><strong>Note:</strong>
In some cases, you might want to click the screenshots below to get a bigger view.
</p>

<h2 id="create">Create the Project</h2>

<ol>
    <li><strong>Open a new Android Project.</strong>
        <p>From Eclipse, select the <strong>File &gt; New &gt; 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>
        <p>Selected "Android Project" and click <strong>Next</strong>.</p>
            
            <a href="images/hello_world_0.png"><img src="images/hello_world_0.png" style="height:230px" alt="" /></a>

    </li>

    <li><strong>Fill out the project details.</strong>
        <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>
        <p>Click <strong>Finish</strong>.</p>
        <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>

    </li>

<li><strong>View the auto-generated source code.</strong>
<p>After the plugin completes your project creations, you'll have a class named <code>HelloAndroid</code> 
(found in your project package, <em>HelloAndroid > src > com.android.hello</em>). It should look like
this:</p>

<pre>
package com.example.hello;

import android.app.Activity;
import android.os.Bundle;

public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    &#64;Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}</pre>

<p>Now let's modify some code! </p>
</li>
</ol>


<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>

<pre>
package com.android.hello;

import android.app.Activity;
import android.os.Bundle;
<strong>import android.widget.TextView;</strong>

public class HelloAndroid extends Activity {
   /** Called when the activity is first created. */
   &#64;Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       <strong>TextView tv = new TextView(this);
       tv.setText(&quot;Hello, Android&quot;);
       setContentView(tv);</strong>
   }
}</pre>

<p class="note"><strong>Tip:</strong> If you forgot to import the TextView package, try this:
press <strong>Ctrl-Shift-O</strong> (<strong>Cmd-Shift-O</strong>, on Mac). This is an Eclipse 
shortcut to organize imports&mdash;it identifies missing packages and adds them for you.</p>

<p>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.</p>

<p>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}.</p>

<p>Here's how you construct a TextView:</p>

<pre>TextView tv = new TextView(this);</pre>

<p>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
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 <code>this</code> reference to the TextView.</p>

<p>Once we've constructed the TextView, we need to tell it what to display:</p>

<pre>tv.setText(&quot;Hello, Android&quot;);</pre>

<p>Nothing too surprising there.</p>

<p>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:</p>

<pre>setContentView(tv);</pre>

<p>The <code>setContentView()</code> 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.</p>

<p>There it is &mdash; "Hello, World" in Android! The next step, of course, is
to see it running.</p>



<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 &gt; 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>

  <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>

  <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
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.</p>

<p>Click the "Apply" button. Here's an example:</p>

  <a href="images/hello_world_4.png"><img src="images/hello_world_4.png" style="height:230px" alt="" /></a>

<p>Now click <strong>Run</strong>, 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
see something like this:</p>

  <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>




<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
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
easy to forget to properly connect Views together, which can result in errors in
your layout and wasted time debugging your code.</p>

<p>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:</p>

<pre>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;TextView xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
  android:layout_width=&quot;fill_parent&quot;
  android:layout_height=&quot;fill_parent&quot;
  android:text=&quot;@string/hello&quot;/&gt;</pre>

<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 {@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
application (its UI) from the application logic used to fetch and fill in data.</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>
        <tr>
            <th>
                Attribute
            </th>
            <th>
                Meaning
            </th>
        </tr>
        <tr>
            <td>
                <code>xmlns:android</code>
            </td>
            <td>
                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.<br>
            </td>
        </tr>
        <tr>
            <td>
                <code>android:layout_width</code>
            </td>
            <td>
                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.<br>
            </td>
        </tr>
        <tr>
            <td>
                <code>android:layout_height</code>
            </td>
            <td>
                This is just like android:layout_width, except that it refers to available screen height.
            </td>
        </tr>
        <tr>
            <td>
                <code>android:text</code>
            </td>
            <td>
                This sets the text that the TextView should display. In this example, we use a string 
                resource instead of a hard-coded string value.
                The <em>hello</em> string is defined in the <em>res/values/strings.xml</em> file. This is the
                recommended practice for inserting strings to your application, because it makes the localization
                of your application to other languages graceful, without need to hard-code changes to the layout file.
                For more information, see <a href="{@docRoot}guide/topics/resources/resources-i18n.html">Resources
                and Internationalization</a>.
            </td>
        </tr>
    </tbody>
</table>


<p>These layout files belong in the <em>res/layout/</em> 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.</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 Eclipse plugin automatically creates one of these layout files for you (<code>main.xml</code>). 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.</p>

<p>So, let's put it to use and change the "Hello, Android" sample to use the XML layout.</p>

<ol>
  <li>In the Eclipse Package Explorer, expand the
folder <em>res/layout/</em>, 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 following XML:
<pre>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;TextView xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
  android:layout_width=&quot;fill_parent&quot;
  android:layout_height=&quot;fill_parent&quot;
  android:text=&quot;@string/hello&quot;/&gt;</pre>
<p>Save the file.</p>
</li>

<li>Inside the project folder <em>res/values/</em>, open the file <code>strings.xml</code>.
This is where you should save all default text strings for your user interface. If you're using Eclipse, then
ADT will have started you with two strings, <em>hello</em> and <em>app_name</em>. 
Revise <em>hello</em> to something else. Perhaps "Hello, Android! I am a string resource!"
The entire file should now look like this:
<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;resources>
    &lt;string name="hello">Hello, Android! I am a string resource!&lt;/string>
    &lt;string name="app_name">Hello, Android&lt;/string>
&lt;/resources>
</pre>
</li>

<li>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:
<pre>
package com.example.hello;

import android.app.Activity;
import android.os.Bundle;

public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    &#64;Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}</pre>

<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>Now, instead of passing <code>setContentView()</code> a View object, we give it a reference to our layout resource.
The resource is identified as <code>R.layout.main</code>, which is actually a compiled object representation of
the layout defined in <em>layout/main.xml</em>. 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
when you run Ant to build the application. (More about the R class in a moment.)</p>
</li>
</ol>

<p>Now that you've made this change, go ahead and re-run your application &mdash; all
you need to do is click the green Run arrow icon, or select 
<strong>Run &gt; Run History &gt; Hello, Android</strong>  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
layout approaches produce identical results.</p>

<p class="note"><strong>Tip:</strong> Use the shortcut <strong>Ctrl-Shift-F11</strong> 
(<strong>Cmd-Shift-F11</strong>, on Mac) to run your currently visible application.</p>

<p>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 <a href="{@docRoot}guide/topics/fundamentals.html">Application
Fundamentals</a>. Also refer to the <a href="{@docRoot}guide/index.html">Developer's Guide</a>
introduction page for an overview of the <em>Dev Guide</em> documentation.</p>


<div class="special">
<h3>R class</h3>
<p>In Eclipse, open the file named R.java in your source code folder in the Package
Explorer. It should look 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=0x7f040001;
        public static final int hello=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>It's possible yours looks slighly different than this (perhaps the hexadecimal values are different). 
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 (such as strings in the <em>res/values/string.xml</em> file or drawables inside
the <em>res/drawable/</em> direcory) you'll see R.java change to keep up.</p>
<p>When not using Eclipse, this class file will be generated for you at build time (with the Ant tool).</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
our code. Change your HelloAndroid source code to look like this:</p>

<pre>
package com.android.hello;

import android.app.Activity;
import android.os.Bundle;

public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    &#64;Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Object o = null;
        o.toString();
        setContentView(R.layout.main);
    }
}</pre>

<p>This change simply introduces a NullPointerException into your code. If
you run your application again, you'll eventually see this:</p>

  <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>

<p>To find out more about the error, set a breakpoint in your source code 
on the line <code>Object o = null;</code> (double-click on the marker bar next to the source code line). Then select <strong>Run &gt; Debug History &gt; Hello, 
Android</strong> from the menu to enter debug mode. Your app will restart in the 
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>

  <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 &mdash; 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>