Android - Layouts

Objective #1: Understand the basics of a layout

Every application has a set layout. These layouts are the backbone for the appearance and structure of an interface. Applications can use many different layouts.
Layouts are usually typed out in the XML screen of Android programming. There can be one master layout i.e. relative layout, and a sub-layout of linear layout.
All layouts are subclasses of the ViewGroup class of Android.
A layout is the way and order in which items are aligned or positioned on the user interface. Interfaces belong to the ViewGroup and all of the layouts are considered children.
The programmer can also create his/her own layout.
There are many different layouts but the most common layouts are:

FrameLayout
TableLayout
LinearLayout
AbsoluteLayout
RelativeLayout

Layouts are called in the onCreate( ) method by the setContentView( ) and usually looks like this:

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

They are stored in the res/layout folder of every project. The default layout that is called by setContentView( ) is res/layout/main.
To create any layout you need to start your XML file with:

<NameOfLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
              android:layout_height="fill_parent">

Objective #2: Understand how to create a FrameLayout

FrameLayouts are considered to be the simplest of all layouts.
This layout attaches to the upper left hand corner of the interface.
There is only enough room in this layout for one object.
You cannot set the location of this layout, making this the easiest form of a layout for beginners.
The programmer is allowed to set child views to the FrameLayout, but they are also attached to the top left corner.

Objective #3: Learn the basics of a TableLayout

A TableLayout allows the programmer to arrange the View into rows and columns.
Rows can be added and columns can shrink or grow in size. There are no border lines set for the rows and columns, so it doesn’t look like an Excel worksheet.
Each row has the exact same number of columns.
The width of each columns is set by the width of the widest column.
Unlike in Excel, the cells cannot span over many columns. However, you can leave cells blank. Each cell can contain only one object from the View class.
The child views of a TableLayout are the TableRow objects.
Each TableRow object displays a single row in a table. A cell of a TableRow can contain a variety of View class objects.
To create a TableRow you need to type out this code:

In order to use a TableRow, you need to nest it inside of a TableLayout because it is in fact a child object of the TableLayout View.
TableRows arrange their children horizontally. Unlike with a TableLayout, each child of a TableRow needs to set its layout_width and layout_height.

Objective #4: Learn how to successfully use a LinearLayout

LinearLayouts are the default layouts used when a project is first created. Each object is aligned either vertically or horizontally on the UI which is set by using the orientation method of the LinearLayout.
Each child object is aligned in a single direction and are added one after another.
By setting the weight of a LinearLayout, the size of the each cell is set.
LinearLayouts can be considered the second easiest layout to use because the programmer doesn’t have to worry about the location of each object. Each object is aligned either vertically or horizontally, and the programmer can add any child of the View class.
You can program nest multiple LinearLayouts inside of a single LinearLayout.
This is the default layout set in each program

<?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">

Objective #5: Understand the consequences of an AbsoluteLayout

There isn’t much to be said in favor of an AbsoluteLayout, other than the fact it is an (X,Y) grid. The fact that it is in a grid gives the programmer much more ease of access to develop the UI. Because it is in an (X, Y) grid, it is harder to maintain because of the size of each child.
When using an AbsoluteLayout, the programmer should set the size of each child and graph the UI on a piece of graph paper prior to designing. This will account for errors and minimize the chance of an error.

Objective #6: Successfully use a RelativeLayout

RelativeLayouts are the optimal choice when designing a UI.
In a RelativeLayout, the location of the child objects is set in relation to each other or the parent. When setting the relationship between objects, you have to set ID values of an object and use those set ID’s as the location.
Unlike the previous layouts, the programmer cannot set the size of the layout to WRAP_CONTENT.
To align a child below another object you should use this code:

android:layout_below="@id/object"

Likewise, the programmer can type layout_alignParentRight, this will align the child to the right side of the UI.

Objective #7: Understand some of the attributes

The attributes of an object in UI design determine what it looks like and how it acts.
It is behoove of the programmer to assign an ID to every object that they create. It is mandatory when a RelativeLayout is used.
When an attribute is set, the assignments are always in string format. So everything after the equals sign is in quotes.
The layout_height and layout_width attributes set the size of the child. The two most common settings are wrap_content and fill_parent (you can also use match_parent).
By setting the ID attribute, you can program the object in the onCreate( ) method.