LayOuts in Android

Layout In Android: 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.  We can divide the layout in 2 ways.

1.  Android provides widgets and layouts class that are used to create the layout.
2. Second way ,You can instantiate layout elements at runtime that means programmatically in java coding.

You could declare your application's default layouts in XML, including the screen elements that will appear in them and their properties. You could then add code in your application that would modify the state of the screen objects, including those declared in XML, at run time.  You can change or modify your source code and recompile.

Attributes :-There are many type attributes in XML. View object have some type attributes eg. textSize attribute but every attributes is inherited by any View objects.id attributeed is the the root View class.

1. ID :- ID attributes uniquely identify the View within the tree. This is an XML attribute common to all View objects and you will use it very often. The

                                                  android:id="@+id/my_button"

2. Layout Parameters :-XML layout attributes named layout_something define layout parameters for the View that are appropriate for the ViewGroup in which it resides. 

You can specify width and height with exact measurements, though you probably won't want to do this often. More often, you will use one of these constants to set the width or height:

• wrap_content tells your view to size itself to the dimensions required by its content
• fill_parent (renamed match_parent in API Level 8) tells your view to become as big as its parent view group will allow.

Common Layout Objects:
The common Layout are:

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.

1.Frame Layout: its the simplest type of  layout object. It's basically a blank space on your screen that you can later fill with a single object — for example, a picture that you'll swap in and out. All child elements of the FrameLayout are pinned to the top left corner of the screen; you cannot specify a different location for a child view. Subsequent child views will simply be drawn over previous ones, partially or totally obscuring them (unless the newer object is transparent). Frame layout is used to display a single view at a time. The view can contain many widgets but only one will appear at a time.

2.Linear Layout: LinearLayout puts all its child elements into a single column or row depending on the android:orientation attribute. Possible values for this attribute are horizontal and vertical. horizontal is the default value. LinearLayout can be nested to achieve more complex layouts.When dealing with Linear layout there are five properties that we can deal with:

1. Oientation.
2. Fill model.
3. Weight
4. Gravity.
5. padding.

Orientaition: Orientation property determines whether the controls would be put in a horizontal way like in a row or in a vertical way like a column. The layout orientation is set by the property android:orientation
Fill Model:
The widgets inside linear layout have width and height properties. These properties can have three values:

1. A numeric value in pixels or inches that gives the width or height properties an absolute value. 
2. They can have the value wrap_content meaning the widget should occupy it’s natural size unless there is no space then android can use word wrap to make the widget fit.
3. They can have the value fill_parent meaning the widget should occupy all the available space of the closing container.

To set the fill model programmitaclly use this code:

1	Button b=(Button)findViewById(R.id.btn);

2	b.setWidth(LayoutParams.WRAP_CONTENT);

3	b.setHeight(LayoutParams.FILL_PARENT);

Weight:
The weight property determines the ratio by which controls share free space. For example if we have two buttons and the weight of both is set to 1 (this is the default value) then the free space will be divided equally between them. But if the value of the weight of one of them is 2 and the other is one, then the first button will occupy space half as that occupied by the second and so on. 
Example code:

<linearlayout android:id="@+id/mainlayout" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Linear Layout">
<button
android:layout_height="fill_parent"
android:layout_weight="1" 
android:layout_width="fill_parent" 
android:text="weight set to 2"
/>
<button
android:id="@+id/btn"
android:layout_height="fill_parent" 
android:layout_weight="1" 
android:layout_width="fill_parent" 
android:text="weight set to 1"
/>
</textview></linearlayout>

3.Table Layout: positions its children into rows and columns. TableLayout containers do not display border lines for their rows, columns, or cells. The table will have as many columns as the row with the most cells. A table can leave cells empty, but cells cannot span columns, as they can in HTML.

 TableRow objects are the child views of a TableLayout.

4.Relative Layout: it allow to position the widget relative to each other. This allows for complex layouts. A simple usage for RelativeLayout is if you want to center a single component.You can place a widget in a position relative to another widget’s position or relative to the container.

As we said in relative layout widgets can be placed

1. Relative to the container.
2. Relative to other widgets

Relative to the container :
The widgets are placed in position relative to their container like by setting the following properties:

• android:layout_alignParentTop|Bottom|Right|Left to true. This aligns the Top|Bottom|Right|Left side of the widget with the Top|Bottom|Right|Left side of the container.
• android:layout_centerVertical: the widget should be positioned vertically in the center of the container.
• android:layout_centerHorizontal: the widget should be positioned horizontally in the center of the container.
• android:layout_centerInParent: the widget should be positioned both vertically and horizontally in the middle of the container.

Position Relative to other widgets’ positions:

• There are four properties that determine the position of the widget in relation to other widgets:
  
  • android:layout_above: the widget should be placed above the referenced widget. 
  • android:layout_below: the widget should be placed below the referenced widget.
  • android:layout_toRightOf: the widget should be placed to the right of the referenced widget.
  • android:layout_toLeftOf: the widget should be placed above the referenced widget.

Notes:

• When you reference a widget in a relative layout property, you must assure that this widget has been already defined in the layout.
• When you use the value fill_parent to assign athe height of a widget in a relative container, it could occupy all the available space so that any further controls defined in the xml file would not appear.
• When referencing another control in relative layout property, we use the notation “@id/widgetID”.

5.Grid Layout : It was introduced with Android 4.0. This layout allows you to organize a view into a Grid. GridLayout separates its drawing area into: rows, columns, and cells. You can specify how many columns you want for define for each View in which row and column it should be placed and how many columns and rows it should use. If not specified GridLayout uses defaults, e.g. one column, one row and the position of a View depends on the order of the declaration of the View.

6.Absolute Layout: Absolute layout lays widgets by specifying their exact X and Y positions. In android the origin (0,0) coordinate is located at the top left of the screen. Absolute layout is defiend in XML as <AbsoluteLayout>. By default, if you define any control in absolute layout without defining it’s x,y coordinates, it will be placed in the origin point at (x,y)=(0,0), if you define x,y values that are too large, the widget will not appear on the screen.