DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

2. ARCHIVOS BASICOS

Recordemos que una Activity representa básicamente lo que se ve en una pantalla de interfaz
de usuario y que la Activity normalmente se implementa usando dos archivos de código, el
primero es una clase java que extiende de la clase Activity y que debe contener todo el código
java que controla la lógica y el segundo archivo es uno de extensión xml donde generalmente
se codifica todo lo que tenga que ver con elementos visuales dentro de la pantalla es decir los
Layouts y las views contenidas en el.

En la gráfica podemos ver un ejemplo básico donde se construye una Activity usando dos
archivos (MainActivity.java y activity_main.xml). El archivo MainActivity.java es una clase que
debe heredar de la clase Activity y debe contener el código que controla la lógica. La forma en
cómo se vincula la interface (Layouts y views) con este archivo java es por medio del método
setContentView. La clase R es autogenerada y contiene una referencia de todos los elementos
disponibles dentro de la carpeta de recursos del proyecto (res) y con el operador punto
podemos entonces movernos al interior de las diferentes carpetas, para el ejemplo estamos
referenciando el archivo activity_main que está dentro de la carpeta Layout.

Editor Visual Archivos XML

Los archivos que contendrán el código referente a la parte visual de una pantalla en el móvil
puede ser configurada usando un editor gráfico o manipulando directamente condigo xml si
conocemos sus características

[email protected] Página 1
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

A continuación describiremos algunas de las opciones disponibles en la edición grafica de un

archivo xml disponible en la pestaña GraphicalLayout.

En el centro del editor gráfico, encontraremos una presentación preliminar de la interface de

la pantalla del dispositivo móvil.

En esta podremos ir visualizando en tiempo de diseño como van quedando las views con los
Layout configurados.

Importante tener en cuenta que cada dispositivo móvil tiene diferentes características de
presentación de contenido y puede existir cierta variación de ésta pre visualización respecto a
la que se da en un dispositivo real.

[email protected] Página 2
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

La paleta, que se encuentra en la parte

izquierda del editor gráfico contiene todo
el conjunto de views disponibles y además,
agrupadas por tipo de vista.

Así como en cualquier editor gráfico es

posible seleccionar la vista y arrastrarla
directamente sobre la interfaz de la
pantalla del dispositivo.

Tipo dispositivo, el cual se puede

seleccionar en tiempo de diseño para tener
una pre visualización más cercana a la real.

[email protected] Página 3
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

Puedo seleccionar el tipo de presentación

en el dispositivo si es portrait o landscape,
además de visualización normal, nocturna,
etc.

Finalmente también se puede seleccionar

la versión de Android a la cual le apuntas
en el proyecto. (Aunque esto se selecciona
desde la configuración inicial del proyecto)

Editor XML
El editor xml es el más usado por gran mayoría de los programadores ya que permite el acceso
rápido a cada uno de las posibles views que se puede agregar a una interface móvil y así como
acceso rápido a la configuración de estos elementos por medio de las propiedades. En eclipse
existe la función de autocompletar código.

Todo código xml se forma a partir de views, dentro de los views se encuentran los Layouts y los
controles gráficos típicos como botones, cajas de texto, barras de progreso, etc. Todo
fragmento de código debe iniciar con un Layout y en su interior los controles a mostrar. Los
Layouts pueden contener otros Layouts. Los Layout no representan un objeto grafico concreto
sino que establece las características de como las vistas contenidas en su interior serán
mostradas.

En la siguiente gráfica se ve un ejemplo de una presentación básica de interfaz con un

TextView (cuadro de texto) un EditText (cuadro de edición de texto) y un button. Todos ellos
ordenados en forma lineal.

[email protected] Página 4
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

Las dos primeras líneas xmlns:android, y xmlns:tools son declaraciones de espacios de

nombres de XML que utilizaremos en este archivo (este tipo de parámetro solo es necesario
especificarlo en el primer elemento).

La propiedades android:layout_width y android:layout_height deben estar siempre por cada

Layout y por cada view y estas se encargan de definir el ancho y alto respectivamente. La
propiedad android:orientation define si la forma de acomodación es horizontal o vertical.

El TextView es una vista que usaremos para mostrar información estática y que se acopla al
contenedor, nunca tiene el foco, es parecido a los Label en otros entornos gráficos, la
propiedad android:text permite asociar el contenido que aparecerá en la vista (esta propiedad
también se utiliza en otras vistas).

El EditText es una vista que permite el ingreso de información, es parecido a los TextBox o
TextFields en otros entornos gráficos, este control si puede tener el foco y cuando lo tenga
permitirá el ingreso de datos del usuario por medio de un teclado físico o virtual dependiendo
del dispositivo. Como este control seguramente contendrá información que debemos capturar
es vital asignarle un identificador a la vista para poder diferenciarla desde la clase java que
contenga la lógica de la interface, eso lo logramos con la propiedad android:id; el @+id agrega
una referencia nueva de esta vista dentro de la clase R que se usara para referencias desde
código java.

[email protected] Página 5
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

Finalmente en el ejemplo se agrega un Button que comparte propiedades que ya vimos en las
vistas previas.

Layouts
Si queremos combinar varios elementos de tipo vista tendremos que utiliza un objeto de tipo
Layout. Un Layout es un contenedor de una o más vistas y controla su comportamiento y
posición. Hay que destacar que un Layout puede contener a otro Layout y que es un
descendiente de la clase View.

La siguiente lista describe los Layout más utilizados en Android:

 LinearLayout: Dispone los elementos en una fila o en una columna.

 TableLayout: Distribuye los elementos de forma tabular. Se debe usar la etiqueta

TableRow para iniciar una nueva fila en la distribución de tabla, las columnas
dependen del número de views que se agreguen en cada fila.

 RelativeLayout: Dispone los elementos en relación a otro o al padre. Se debe usar las
etiquetas android:layout para fijar posiciones por encima, por debajo, a la izquierda o
derecha de otra vista o del contenedor.

 AbsoluteLayout: Posiciona los elementos de forma absoluta. Se debe usar la propiedad

android:layout_x y android:layout_y para fijar las posiciones en pixeles en la
coordenada x e y respecto a la esquina superior izquierda de la pantalla del dispositivo.

 FrameLayout: Permite el cambio dinámico de los elementos que contiene. No es de

mayor uso.

Ejemplo 1

<LinearLayout
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:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:layout_width="wrap_content"

[email protected] Página 6
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

android:layout_height="wrap_content"
android:text="@string/mensaje" />

<EditText
android:id="@+id/miTexto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text" />

<Button
android:id="@+id/mibuttton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btntxtnombre" />

</LinearLayout>

Ejemplo 2

<TableLayout
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:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TableRow>

<AnalogClock

[email protected] Página 7
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/mensaje" />
</TableRow>

<TableRow>

<EditText
android:id="@+id/miTexto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text" />

<Button
android:id="@+id/mibuttton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btntxtnombre"
/>
</TableRow>

</TableLayout>

Ejemplo 3

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"

[email protected] Página 8
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<AnalogClock
android:id="@+id/reloj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />

<TextView
android:id="@+id/texto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/reloj"
android:text="@string/mensaje" />

<EditText
android:id="@+id/miTexto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/texto"
android:layout_toRightOf="@id/texto"
android:inputType="text" />

<Button
android:id="@+id/mibuttton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="@string/btntxtnombre" />

</RelativeLayout>

[email protected] Página 9
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

Ejemplo 4

<AbsoluteLayout
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:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"

[email protected] Página 10
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<AnalogClock
android:id="@+id/reloj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50dp"
android:layout_y="50dp" />

<TextView
android:id="@+id/texto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="150dp"
android:layout_y="50dp"
android:text="@string/mensaje" />

<EditText
android:id="@+id/miTexto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50dp"
android:layout_y="250dp"
android:inputType="text" />

<Button
android:id="@+id/mibuttton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="100dp"
android:layout_y="200dp"
android:text="@string/btntxtnombre" />

</AbsoluteLayout>

[email protected] Página 11
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

Ejercicios

1. Utilizar un RelativeLayout para obtener un diseño similar a este (TextView,EditText y 2

Buttons):

2. Utilizar un TableLayout para obtener un diseño similar a este (9 Buttons):

3. Utilizar AbsoluteLayout para obtener un diseño similar a este (13 Buttons):

[email protected] Página 12
DESARROLLO DE APLICACIONES MOVILES ANDROID 2013

[email protected] Página 13