User Interface with XML

Layout:

A layout defines the visual structure for a user interface, e.g UI for an activity.
Declaration is done in two ways.
 i. Declare UI elements in XML using XML vocabulary.
 ii. Instantiate layout elements at runtime.

Advantage Of UI in XML: 

It gives a separate presentation of your application from the code that controls its behavior. UI descriptions are external to app code, so you can modify it without having to modify your source code and recompile. 

Working the XML:

UI layouts and the screen elements they contain are quickly designed using Android's XML vocabulary, in the same way as in HTML. Each layout file must contain exactly one root element.
Once the root element is defined, additional layout objects or widgets as child elements are added, which build a View hierarchy that defines layout. 

e.g
consider the following example with TextView and Button.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="match_parent"

              android:layout_height="match_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>

here the root element is defined as LinearLayout which have some attributes like width, height, orientation, and two child elements TextView and Button having there attributes defined. after declaration of your layout save it with .xml extension in "res/layout/" directory.

Load the XML Resource: 

The layout resource from your application code, are loaded in Activity.onCreate() callback implementation by calling setContentView(),  passing it the reference to your layout resource in the form of: R.layout.layout_file_name. 

e.g

 

 public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

Attributes:

Every View supports their own variety of XML attributes. some attributes are given below.
android:id="@android:id/empty": 

Each view must have an integer ID associated with it to uniquely identify the view. The(@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource.  The(+) means that this is a new resource name that must be created and added to our resources (in the R.java file).

 To create an instance of the view object and capture it from the layout: 

Button myButton = (Button) findViewById(R.id.my_button);

android:layout_width="wrap_content": 

       this attribute is used for asigning width to a view. you can asign a static value in 'dp' (density independent pixel)unit like ("50dp"), etc
    i. wrap_content: 

         it provide size to the view as the dimensions required by its content.

    ii. match_parent: 

         (fill_parent before API Level 8) it provide size as big as parent view is.

android:layout_height="wrap_content":

       it is used to assign height to a view.

android:orientation="vertical": it is used to assign orientation.

android:background="#FFFFFF": 

     it is used to assign background to a view, background may be a color or image resource or color from resources like @color/bg_color.

android:gravity="center_horizontal": 

       it is used in a view to put its content in the center_horizontal, center_vertical, center, right, left, etc. 

Some of the common Layout will be discussed in the next tutorial.