About Layouts in Android

Whats up Geeks,

In this Tutorial we are going to learn about the Layouts in Android.


A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways:

1. Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.
2. Instantiate layout elements at runtime. In this way we can create View and ViewGroup objects (and manipulate their properties) programmatically in the Android code.

When we declare our application's default layouts in XML, including the screen elements that will appear in them and their properties. We can then modify the state of the screen objects, including those declared in XML at run time programmatically.
In this way, the Android framework gives you the flexibility to use either or both of these methods for declaring and managing your application's UI.

XML file are placed at Layout tab in Eclipse. We can try Hierarchy Viewer tool for debugginh layouts.
For analysis we can use layoutopt tool that lets us quikly analyze our layouts and hierarchies for efficiencies or other problems.

The advantage to declaring our UI in XML is that it enables us to better separate the presentation of our application from the code that controls its behavior.

Our UI descriptions are external to our application code, which means that we can modify or adapt it without having to modify our source code and recompile.

In general, the XML vocabulary for declaring UI elements closely follows the structure and naming of the classes and methods, where element names correspond to class names and attribute names correspond to methods.

In fact, the correspondence is often so direct that we can guess what XML attribute corresponds to a class method, or guess what class corresponds to a given xml element.

Writing the XML

Using Android's XML, we can quickly design UI layouts and the screen elements they contain, in the same way we create web pages in HTML — with a series of nested elements.

Each layout file must contain exactly one root element, which must be a View or ViewGroup object. Once we've defined the root element, we can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines our layout.

For example,
a verical LinearLayout to hold a TextView and a Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

After declaring our layout in XML, save the file with the .xml extension, in our Android project's res/layout/ directory, so it will properly compile.


Loading the XML

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

When we compile our application, we should load the layout resource from your application code, 

in your Activity.onCreate() callback implementation, by calling setContentView(), passing it the 

reference to your layout resource in the form of: R.layout.layout_file_name.

Attributes

>ID

Any View object may have an integer ID associated with it, to uniquely identify the View within the tree.
When the application is compiled, this ID is referenced as an integer, but the ID is typically 
assigned in the layout XML file as a string, in the id attribute. 

For Example:
android:id="@+id/my_button"

>Layout Parameters

All view groups include a width and height (layout_width and layout_height), and each view is required to define them. Many
LayoutParams also include optional margins and borders. 

For Example: 

android:layout_width="wrap_content"

Common Layouts 

Linear Layout

A layout that organizes its children into a single horizontal or vertical row. It creates a scrollbar if the length of the window exceeds the length of the screen.

Relative Layout

Enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent).

Web View

Displays web pages.

That for the Layouts. See you in next tutorial for creating Linear layout.