«

»

Jan 30

Print this Post

Android: Creating XML UIs

In the last article, Android: Your first Android Application, we created a simple login screen, but didn’t had time to go in deeper in the UI XML structure. In this article I will explain the basics of creating an UI via XML resource. I’ll use the XML file from previous example here.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<TextView  
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	    android:text="Please enter your login"
	    />
	<TextView  
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	    android:text="Login:"
	    />
	<EditText
		android:id="@+id/username"
		android:singleLine="true"
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	/>
	<TextView  
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content"
	    android:text="Password:"
	    />
	<EditText
		android:id="@+id/password"
		android:password="true"
		android:singleLine="true"
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	/>
	<Button
		android:id="@+id/login_button"
		android:text="Login"
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	/>
	<Button
		android:id="@+id/cancel_button"
		android:text="Cancel"
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	/>
	<TextView
		android:id="@+id/result"  
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content"
	    />
</LinearLayout>

There is always only one root element. Mostly it one of the Layout Elements or one of the View elements (i.e. View, ScrollView). Inside the root element we can place more Elements for the widgets we need in our application, like TextViews (Labels), EditText (Textfields), Buttons, MapViews, CheckedTextViews (CheckBox with a description).

In the example above we added 4 TextViews, 2 EditTexts and 2 Buttons. You can also add your custom widgets inside the XML, you just have to write the full package name of your custom View/widget.

	<org.myname.widget.MyCustomView
		android:id="@+id/customview"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    />

Basically you treat it like every other standard widget/view. You maybe have asked yourself, what are all these attributes for? Most of them allow you to set up the look and default values of your widgets. Let’s take the LinearLayout element:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    ...
</LinearLayout>
  • android:layout_width – This attribute let you set the width of the element
  • android:layout_height – This attribute let you set the height of the element
  • android:orientation – This attribute let you set the orientation of the elements. Possible values are "vertical" or "horizontal". Horizontal means, the the elements will be placed from left to right and "vertical" means, they will be placed from top to bottom

There are different units which can be used with in android elements.

  • px: sets the width/height in pixel (absolute value), i.e. 150px
  • mm: sets the width/height in millimeters, i.e. 15mm
  • sp: scaled pixels based on preferred font size, i.e. 75sp
  • dip: density-independent pixels, which sets the width/height depending on the density of the screen. Check the DisplayMetrics documentation for a better explanation)
  • fill_parent: uses max width or height available within it’s parent
  • wrap_content: makes the width or height only as big as needed to fill it’s content

Warning: Try to avoid fixed units like px and mm, as they are heavy device depended and may work fine on one device, but fail on another which has a different screen size. You should always try to use dip and sp.

One thing which is important to note is, that some of the attributes get inherited by the child elements, for example android:layout_width and android:layout_height which then can be set by it’s children.

Next we’ll have a look at the EditText element:

	<EditText
		android:id="@+id/password"
		android:password="true"
		android:singleLine="true"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	>
  • android:id – This attribute let you set a the id of this element, so you can later find and access it inside of your code. the @+id instructs android compiler to add an id to R.java file, which can be accessed by R.id.your_id_name and reference to it.
  • android:singleLine – if true, there won’t be a line break when you press enter key (which also changes the height of the TextEdit). If set to false, the focus will be set to next focusable view.
  • android:password – If true, the input will be masked with *, otherwise it will be clearly readable
  • android:text – sets the default value show inside the TextView (also in EditText, because EditText is an extended class of TextView)

Instead of hard-coding text in your XML file, you can use string references, i.e. android:text="@string/hello_world". This will load the string from res/values/strings.xml (you can name the file whatever you want, but a good convention is to call it strings.xml). Before you can access a string by reference, you need to at it to the resource. Create or open the res/values/strings.xml and add <string name="hello_world">Hello World!</string> inbetween the <resource></resource> tags, like:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Login Example</string>
    <string name="hello_world">Hello World!</string>
</resources>
This will make it much easier to organize your application and easily change the text and allow you localize your application into another language, like german, french, etc.

That’s for now, I hope you enjoyed it!

Permanent link to this article: http://tseng-blog.nge-web.net/blog/2009/01/30/android-creating-xml-uis/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>