Layouts en android o cómo organizar los componentes en la pantalla

Existen multitud de tipos de layouts para ordenar los componentes en una pantalla. A continuación explicaremos algunos de los más comunes:

• LinearLayout: consiste en agrupar los elementos uno detrás de otro de forma horizontal o vertical.


• TableLayout: este layout permite agrupar los elementos en una tabla que contiene filas y columnas.


• RelativeLayout: los elementos se ubican dada una posición relativa de otro elemento del mismo layout.


• FrameLayout: ubica todos los elementos alineados sobre la esquina superior izquierda de manera que unos controles quedarán encima de otros.


• ScrollView: se puede utilizar cuando el número de componentes de una pantalla se desborda y es necesario un scroll vertical.

Todas estas clases heredan de la clase View o ViewGroup. De esta manera heredarán a su vez una serie de propiedades comunes:

• layout_width: anchura


• layout_height: altura


• layout_marginTop: margen superior


• layout_marginBottom: margen inferior


• layout_marginLeft: margen izquierdo


• layout_marginRight: margen derecho


• layout_gravity: orientaciones vertical y horizontal del elemento


• layout_weight: peso


• layout_x: coordenada x donde ubicar el elemento


• layout_y: coordenada y donde ubicar el elemento

La manera de utilizar estos layouts será mediante marcación XML en el fichero layout correspondiente a cada actividad. Por ejemplo:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0099cc"
tools:context=".FullscreenActivity" >

<!--
The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc.
-->

<TextView
android:id="@+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:keepScreenOn="true"
android:text="@string/dummy_content"
android:textColor="#33b5e5"
android:textSize="50sp"
android:textStyle="bold" />

<!--
This FrameLayout insets its children based on system windows using
android:fitsSystemWindows.
-->

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >

<LinearLayout
android:id="@+id/fullscreen_content_controls"
style="?buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="@color/black_overlay"
android:orientation="horizontal"
tools:ignore="UselessParent" >

<Button
android:id="@+id/dummy_button"
style="?buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/dummy_button" />
</LinearLayout>
</FrameLayout>

</FrameLayout>

Layouts en android o cómo organizar los componentes en la pantalla