<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,
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 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>
<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 contain. In this example, it's our usual "Hello, Android" message.
</td>
</tr>
</tbody>
</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
short for "resources" and that directory contains all the non-code assets that
your application requires. This includes 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>
<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 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>
<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. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}</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>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
<strong>Run > Run History > Hello, Android</strong> from the menu. You should see.... well, exactly the same thing
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>
<a name="debugging"></a>
<h2>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. */
@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>
<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 > Debug History > 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,
