Layouts in Android

The way you construct the user interface in Android is pretty interesting. You can construct the UI widgets programmatically. But Android presents a decent way to construct the UI which is XML-based layouts.

The layout of an activity can be constructed by a XML file. These files are considered resources as they reside in res/layout folder. Each xml file consists of the declarations of widgets and their containers. The xml file is constructed in a hierarchical way, there is a tag that defines the layout of the widgets, inside this tag there are nested xml tags that define widgets, each widget tag has attributes that define the widget’s properties.

Let’s take a look at a simple layout xml file called main.xml which resides in res/layout directory:

    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Linear Layout"
    />

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="this is a button 1"
    
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="this is a button 2"
    
    />

This layout defines a textView and a button. We see that the root xml node is

node which defines the layout of all controls inside it.
We use the following code to construct the UI based on this xml definition

setContentView(R.layout.main);

Also the TextView node contains attributes like
layout_width
which can have the values fill_parentwhich denotes the the width of the control should occupy all the available width, also it could have the value wrap_contentwhich denotes the control should occupy only width according to the width of its content which is the text inside the textView

The Button node has an extra attribute which is the android:id attribute, why this attribute is used in the button and not used in the TextView? The answer is that the TextView represents a label (just a static text to display) so there is no need to give it an id cause we will not reference it in the code, however if we need to display dynamic text in the TextView we can give it an id
To reference a control from the code we do it like this:

Button btnLaunch;
btnLaunch=(Button)findViewById(R.id.btnLaunch);

notice that the android:id attribute should be in the format of @+id/Control’sID as shown above, if you write it like android:id=”btnLaunch" the IDE would denote an error and you won’t be able to reference the control from the code.

Why to use XML-layouts and when to construct the layout programmatically ?

• Using xml layouts achieves separation between the interface and the application logic, instead of writing a bulk of code that constructs the UI, defining it as XML is easier and less confusing.
• You can save using code for constructing more complicated UI such as populating check-box columns in a grid.
• It is a trend to construct the UI with XML definitions like in Microsoft’s XAML or even HTML, so people who are familiar with technologies like these would find it easy to deal with Android.

Finally we’re going to explain in more details all about layout containers and controls

We have many layout forms:

1. Linear layout: manages controls in horizontal or vertical way. 
2. Table layout: manages the controls in a group of columns and rows.
3. Relative layout: manages the controls relative to one another or to the parent.
4. Absolute layout: manages the controls in absolute position by coordinates.
5. Frame layout: manages the controls in a dynamic way.
6. Scroll layout: manages the controls in a scrollable layout.