В этом посте будут рассмотрены вопросы верстки при создании нативных приложений для android. Той верстки, которая описывается в xml файлах из директории res/layout/ Итак начнем:
Существует пять стандартных типов верстки:

• AbsoluteLayout
• FrameLayout
• LinearLayout
• RelativeLayout
• TableLayout

AbsoluteLayout

AbsoluteLayout — означает что каждый элемент верстки будет иметь абсолютную позицию относительно верхнего левого угла экрана задаваемую с помощью координат x и y. Т.е. верхнийлевый угол экрана при AbsoluteLayout имеет координаты x = 0, y = 0.
Позиция указывается в атрибутах элемента android:layout_x и android:layout_y.
Пример кода:

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent">     <Button      	android:id="@+id/backbutton"     	android:text="Back"     	android:layout_x="10px"     	android:layout_y="5px"     	android:layout_width="wrap_content"     	android:layout_height="wrap_content" />     <TextView     	android:layout_x="10px"     	android:layout_y="110px"     	android:text="First Name"     	android:layout_width="wrap_content"     	android:layout_height="wrap_content" />     <EditText     	android:layout_x="150px"     	android:layout_y="100px"     	android:width="100px"     	android:layout_width="wrap_content"     	android:layout_height="wrap_content" />     <TextView     	android:layout_x="10px"     	android:layout_y="160px"     	android:text="Last Name"     	android:layout_width="wrap_content"     	android:layout_height="wrap_content" />     	<EditText     	android:layout_x="150px"     	android:layout_y="150px"     	android:width="100px"     	android:layout_width="wrap_content"     	android:layout_height="wrap_content" /> </AbsoluteLayout> 

FrameLayout

FrameLayout — тип верстки внутри которого может отображаться только один элемент в строке. Т.е. если внутри FrameLayout вы поместите несколько элементов, то следующий будет отображаться поверх предыдущего.
Пример кода:

<FrameLayout  	android:layout_width="fill_parent"  	android:layout_height="fill_parent"  	xmlns:android="http://schemas.android.com/apk/res/android"> 	<ImageView  		android:src="@drawable/icon" 		android:scaleType="fitCenter" 		android:layout_height="fill_parent" 		android:layout_width="fill_parent"/> 	<TextView 		android:text="Learn-Android.com" 		android:textSize="24sp" 		android:textColor="#000000" 		android:layout_height="fill_parent" 		android:layout_width="fill_parent" 		android:gravity="center"/> </FrameLayout> 

LinearLayout

LinearLayout — тип верстки при котором область верстки делится на строки и в каждую строку помещается один элемент. Разбиение может быть вертикальное или горизонтальное, тип разбиения указывается в атрибуте LinearLayout android:orientation. Внутри верстки возможно комбинировать вертикальную и горизонтальную разбивки, а кроме того, возможна комбинация нескольких разных типов верстки например использование LinearLayout внутри FrameLayout.

Пример вертикальной разбивки LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 	android:orientation="vertical" 	android:layout_width="fill_parent"     android:layout_height="fill_parent">      <Button         android:id="@+id/button1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      </LinearLayout>   

Пример горизонтальной разбивки LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 	android:orientation="horizontal" 	android:layout_width="fill_parent"     android:layout_height="fill_parent">      <Button         android:id="@+id/button1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      </LinearLayout>   

Комбинация нескольких LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 	android:orientation="horizontal" 	android:layout_width="fill_parent"     android:layout_height="fill_parent">      <Button         android:id="@+id/button1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />   <LinearLayout 	android:orientation="vertical" 	android:layout_width="fill_parent"     android:layout_height="fill_parent">      <Button         android:id="@+id/button1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      <Button         android:id="@+id/button3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button" />      </LinearLayout>   </LinearLayout>    

RelativeLayout

RelativeLayout — тип верстки при котором позиционирование элементов происходит относительно друг друга и относительно главного контейнера.
За то, каким образом будут позиционироваться элементы отвечают следующие атрибуты:
Атрибуты позиционирования относительно контейнера

• android:layout_alignParentBottom – Низ элемента находится внизу контейнера
• android:layout_alignParentLeft – Левая часть элемента прилегает к левой части контейнера
• android:layout_alignParentRight – Правая часть элемента прилегает к правой части контейнера
• android:layout_alignParentTop – Элемент находится в верхней части контейнера
• android:layout_centerHorizontal – Элемент позиционируется по центру относительно горизонтального размера контейнера
• android:layout_centerInParent – Элемент позиционируется по центру относительно горизонтального и вертикального размеров размера контейнера
• android:layout_centerVertical – Элемент позиционируется по центру относительно вертикального размера контейнера

Атрибуты позиционирования относительно других элементов.
В качестве значений этих атрибутов ставятся id элемента относительно которого будет производится позиционирование.

android:layout_above – Распологает элемент над указанным
android:layout_below – Распологает элемент под указанным
android:layout_toLeftOf – Распологает элемент слева от указанного
android:layout_toRightOf – Распологает элемент справа от указанного

Выравнивание относительно других элементов.

android:layout_alignBaseline – Выравнивает baseline элемента с baseline указаннго элемента
android:layout_alignBottom – Выравнивает низ элемента по низу указанного элемента
android:layout_alignLeft – Выравнивает левый край элемента с левым краем указанного элемента
android:layout_alignRight – Выравнивает правый край элемента с правым краем указанного элемента
android:layout_alignTop – Выравнивает верхнюю часть элемента в соответствие с верхней частью указанного элемента

<RelativeLayout  	android:layout_width="fill_parent"  	android:layout_height="fill_parent"  	xmlns:android="http://schemas.android.com/apk/res/android"> 	<Button   		android:id="@+id/backbutton"  		android:text="Back"  		android:layout_width="wrap_content"  		android:layout_height="wrap_content" /> 	<TextView    		android:id="@+id/firstName"    		android:text="First Name"    		android:layout_width="wrap_content"    		android:layout_height="wrap_content"    		android:layout_below="@id/backbutton" /> 	<EditText 		android:id="@+id/editFirstName" 		android:width="100px" 		android:layout_width="wrap_content" 		android:layout_height="wrap_content" 		android:layout_toRightOf="@id/firstName" 		android:layout_below="@id/backbutton"/> 	<EditText 		android:id="@+id/editLastName" 		android:width="100px" 		android:layout_width="wrap_content" 		android:layout_height="wrap_content" 		android:layout_below="@id/editFirstName" 		android:layout_alignLeft="@id/editFirstName"/> 	<TextView 		android:id="@+id/lastName" 		android:text="Last Name" 		android:layout_width="wrap_content" 		android:layout_height="wrap_content" 		android:layout_alignBaseline = "@id/editLastName" 		android:layout_below="@id/editFirstName" />	 </RelativeLayout> 

TableLayout

TableLayout — табличная верстка.
Организует элементы в строки и столбцы таблицы.
Для организации строк служит таг <TableRow>, а количество столбцов определяется максимальным количеством элементов внутри одного из <TableRow>.
В случае если элемент должен занимает несколько ячеек используется атрибут android:layout_span.
По умолчанию <TableRow> организует строки таблицы, если мы хотим организовывать не строки а столбцы, нужно использовать атрибут android:layout_column

<TableLayout  	android:layout_width="fill_parent"  	android:layout_height="fill_parent"  	xmlns:android="http://schemas.android.com/apk/res/android"> 	<TableRow> 	    <TextView  	    android:id="@+id/textView1" 	    android:layout_width="wrap_content" 	    android:layout_height="wrap_content" 	    android:text="column1" 	    android:textAppearance="?android:attr/textAppearanceMedium" /> 	     	     <TextView  	    android:id="@+id/textView2" 	    android:layout_width="wrap_content" 	    android:layout_height="wrap_content" 	    android:text="column2" 	    android:textAppearance="?android:attr/textAppearanceMedium" /> 	         	     <TextView  	    android:id="@+id/textView3" 	    android:layout_width="wrap_content" 	    android:layout_height="wrap_content" 	    android:text="column 3"   	    android:textAppearance="?android:attr/textAppearanceMedium"/>  	</TableRow> 	 	<TableRow> 	    <TextView  	    android:id="@+id/textViewSpan" 	    android:layout_width="wrap_content" 	    android:layout_height="wrap_content" 	    android:text=" span three column" 	    android:layout_span = "3"  	    android:textSize="23sp"  	    android:textAppearance="?android:attr/textAppearanceMedium"/> 	</TableRow> </TableLayout> 

Alternate Layouts

Alternate Layouts — альтернативная верстка. Позволяет использовать различную верстку для различных ориентаций экрана.
XML для альтернативной верстки помещается в папки проекта:

res/layout-land – альтернативная верстка для landscape UI
res/layout-port –альтернативная верстка для portrait UI
res/lauout-square – альтернативная верстка для square UI

и перед тем как получить макет из res/lauout система проверяет наличие файлов в этих папках.

И в завершении немного о стилях.

Стили

Во первых стили элемента могут быть описаны в атрибутах самого элемента.
Например:

<TextView     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:textColor="#00FF00"     android:typeface="monospace"     android:text="@string/hello" /> 

Кроме того стили можно вынести в отдельный xml файл и сохранить его в папке res/values/
Напимер:

<?xml version="1.0" encoding="utf-8"?> <resources>     <style name="CodeFont" parent="@android:style/TextAppearance.Medium">         <item name="android:layout_width">fill_parent</item>         <item name="android:layout_height">wrap_content</item>         <item name="android:textColor">#00FF00</item>         <item name="android:typeface">monospace</item>     </style> </resources> 

Если мы вынесем стили в отдельный файл, то для описания стилей элемента будем использовать атрибут style.

<TextView     style="@style/CodeFont"     android:text="@string/hello" />