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

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)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Login Example</string>
    <string name="hello_world">Hello World!</string>
</resources>

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

No related posts.