October 1, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Android UI Design Via XML, Page 2

  • August 13, 2012
  • By Jessica Thornsby
  • Send Email »
  • More Articles »

Declaring Android UI Layout with XML

As already mentioned, the graphical layout tool writes a corresponding XML layout resource file while you're visually creating your UI. You can dip into the XML and edit it directly at any point during the development process.

To access the XML file:

  1. Ensure the 'Java' perspective is open.
  2. In the Package Explorer tab, open 'res' then 'layout.'
  3. Open the 'main.xml' folder and open the 'main.xml' file.


Android UI Design
Click here for larger image

In the main.xml file, you can create your UI components by entering XML code. Here is an example of a very simple XML layout resource:


Android UI Design
Click here for larger image

Your XML resource file should begin with the following :

<?xml version="1.0" encoding="utf-8"?>

It will then be followed by the root element of the layout, usually a container view such as a layout (in this example, it's LinearLayout.)

This example contains some additional elements:

  • TextView -- a text editor. The actual text is specified using the following:
    android:text = "your text"
  • CheckBox -- two checkboxes

Again, the text displayed alongside the checkboxes is specified with:

android:text = "button text"

Tip:The integer ID associated with view objects is essential for identifying the particular view within the tree. In the layout XML, this ID is usually assigned as a string, in the id attribute. The basic ID syntax is:

android:id="@+id/element-name"

For example, the UI element name could be "textbox" (or "textbox1" if your UI contains more than one textbox.)

But how does this XML translate to the mobile device? Launch the Android emulator and take a look!


Android UI Design
Click here for larger image

Conclusion

The ADT plugin's graphical WYSIWYG editor has been greatly improved in recent releases of ADT, so there's never been a better time to try it out! In this Android UI tutorial, we provided an intro to the graphical layout editor, before exploring its powerful functionality in greater depth. We also briefly covered getting started with defining your layout in XML -- but there's still much more to cover. Interested in learning more? The official Android docs are a great source of additional information on using XML in Android.



Originally published on http://www.developer.com.

Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel