Configurar Layouts y Views En

Android Studio
James Revelo septiembre 6, 2014 Fundamentos, UI 4 Comments
En este artculo veremos que son Layouts y Views para el diseo de la
interfaz de usuario (UI) de una aplicacin Android.
Crearemos una pequea aplicacin paso a paso para comprender como
definir nuestros diseos, relacionarlos con el cdigo Java y manejar
eventos disparados por el usuario al interactuar con la interfaz.

PARSING XML PARA GENERAR CDIGO JAVA EN

ANDROID
Cuando vimos la estructura de un proyecto en Android, hablamos
sobre los recursos de la carpeta layout, los cuales permitan crear la
interfaz de una actividad en Android.
Lee tambin Qu hay dentro de la carpeta layout?
Un momento. qu significa eso?, no se supone que crear la interfaz
es responsabilidad del cdigo Java?
Claro que s!, crear una interfaz en Android es similar a cuando se crea
una interfaz con los paquetes AWT o SWING de Java. Recuerdas que
primero se declaraban objetos que manejaran los controles, luego se
aadan a un contenedor, se configuraban todos sus atributos y al final
se aadan los eventos que podran recibir?
A ese estilo de diseo de interfaz se le llama Diseo de interfaz de
usuario programtico y es lo que cualquier programador en primera
instancia se imaginaria que tiene que hacer en una aplicacin Android.
Pero la realidad es otra. Los proyectos en Android tienen la capacidad de
implementar el poder de XML para reducir la complejidad de diseo de
interfaz, permitindonos declarar la estructura en un simple archivo
definido por elementos muy intuitivos.

Estos archivos luego son analizados con una librera de Parsing

XML para generar automticamente todo el cdigo Java necesario a
partir de una estructura predefinida.
Lee tambin Tutorial Bsico del Lenguaje XML
Esta caracterstica ubica el diseo de interfaz de usuario en un alto nivel,
evitndonos la escritura de cdigo abrumador. A este tipo de diseo se
le llama Diseo de interfaz de usuario declarativo.
La idea es usar el estilo declarativo para crear la forma de la interfaz y
luego usar el estilo programtico para implementar los eventos sobre la
interfaz. La combinacin de ambas formas desata un poder de
flexibilidad increble.
Obviamente es posible crear todo el cdigo Java para desarrollar una
aplicacin Android, pero este no ser el enfoque de este artculo ni de
ningn otro. Cabe aclarar que en algunos momentos, sobre todo cuando
se deseen aadir elementos de la interfaz en tiempo de ejecucin, ser
necesario usar la definicin de la interfaz de forma programtica, pero
casi siempre nos referiremos al diseo declarativo.

QU ES UN LAYOUT?
Un layout es un objeto que representa el espacio contenedor de todas
las vistas (Views) dentro de la actividad. En l se define la estructura y el
orden de los elementos para que el usuario pueda interactuar con la
interfaz. Lgicamente se representan con subclases Java que heredan de
la clase ViewGroup.
Para definirlos escribiremos un documento XML que contenga como
nodo raz algn tipo de layout y luego incluir en su interior los elementos
hijos. Android Studio permite generar automticamente el cdigo de
los archivos XML a travs del panel de Diseo.

QU TIPOS DE LAYOUTS EXISTEN EN EL

DESARROLLO ANDROID?
Existen varios y su uso depende de la necesidad de cada persona.
Veamos la definicin de los ms populares y fciles de usar:

LinearLayout: El Linear Layout es el ms sencillo. Dentro de l los

elementos son ubicados en forma linear a travs de columnas o filas.

Posee un atributo que permite modificar su orientacin, ya sea para
presentar los elementos horizontal o Verticalmente.
WebView: Este View fue creado para mostrar el contenido con
formato web.

RelativeLayout: Este es el layout ms recomendado a usar, ya que

los componentes dentro de l se pueden organizar de forma relativa

entre s.
Observa
la
siguiente
ilustracin:

Frecuentemente usaremos el Relative Layout para nuestros proyectos

debido a la referencia relativa que podemos asignar a los componentes
hijos. Cuando digo relativa me refiero a que no expresaremos la
ubicacin de los componentes de esta forma:
El botn OK estar ubicado en el punto (200,120) del layout y sus
dimensiones son 20030 dp
A esa definicin de atributos se le llama definicin absoluta, y
describe con pelos y seales cuales son las medidas numricas para
el View.

A diferencia de esa declaracin, dentro de un RelativeLayout usaremos

expresiones como la siguiente:
El botn OK estar ubicado a la izquierda del extremo derecho del
TextView 2 y sus dimensiones sern ajustadas al padre
Qu significa eso?, quiere decir que no importa de qu tamao sea la
pantalla o que densidad maneje, el botn se ajustar relativamente a las
condiciones que se le han impuesto, lo cual permite una mejor
experiencia para distintos usuarios sin importar las caractersticas de su
dispositivo.

USAR ADAPTADORES PARA ELEMENTOS DINMICOS

Un adaptador es una interfaz entre la forma de un layout y los datos que
este contendr. Debido a que los elementos se deben aadir en tiempo
de ejecucin, un adaptador viene preparado para conectar la
informacin de forma secuencial y organizada para controlar
dinmicamente las instrucciones. Luego estudiaremos ms a fondo este
tpico.

INFLAR
CDIGO
JAVA
APLICACIONES ANDROID

PARA

CREAR

A menudo te encontraras con el trmino Inflate (inflar) en la

programacin Android. Inflar cdigo Java significa parsear uno a uno
los elementos de un archivo layout XML, para generar el cdigo Java
necesario, y luego agregar los objetos a la memoria del Heap.
Quien se encarga de este trabajo es el mtodo setContentView() de la
clase Activity. El analiza el archivo XML, traduce a objetos cada
componente, le asigna los atributos, establece contenedores y todas las
relaciones padre e hijo necesarias. Este mtodo lo usaremos en la
seccin onCreate() de cada actividad.
Miremos el cdigo de MyActivity.java del proyecto Test:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
}

Como ves el mtodo onCreate() usa setContentView() para inflar el

contenido desde el archivo de recurso activity_my.xml. La siguiente
ilustracin muestra de forma simple el proceso de parsing:

El parmetro de entrada savedInstance de create() es un objeto de tipo

Bundle, el cual recibe datos externos que pueden ser de utilidad para el
comportamiento de la Actividad. A menudo se usa para coordinar el
cambio de posicin de pantalla de Landscape a Portrait o viceversa.
Tambin es de utilidad cuando una actividad se est reactivando. En los
prximos artculo veremos ms en detalle este tema.

QU ES UN VIEW?
Es un componente que permite controlar la interaccin del usuario con
la aplicacin. Estos son muy similares a los controles SWING de Java,
como Labels, Buttons, TextFields,Checkboxes, etc. Los Views son
organizados dentro de los Layouts para que el usuario comprenda los
objetivos de la actividad.

ATRIBUTOS DE UN VIEW
Veamos los propsitos de los atributos usados con mayor frecuencia al
disear un layout:

layout:height: Representa la dimensin de longitud vertical de

un View. Puedes asignarle valores absolutos en dps, si dependiendo de

las
mtricas
de
diseo
que
tengas

usar
los
valores match_parent y wrap_content. El primero ajusta la dimensin a las
medidas del contenedor padre y el segundo lo ajusta al contenido del
View.
layout:width: Representa el ancho de un view.
layout:layout_margin: Especifica
las mrgenes del
view
con

respecto a otros componentes. Podemos definir los valores

individualmente para la margen izquierda, derecha, superior e inferior. O
si deseas puedes especificar un mismo valor para todos los margenes.
layout:alignComponent: Indica
la adyacencia
de
las

margenes entre componentes. Por ejemplo, esto permitira ubicar el

margen izquierdo de un botn justo al lado del margen izquierdo de otro
botn. Si en algn momento el botn cambia entonces su compaero
cambiar con l. Este atributo muestra el poder de un Relative layout.
layout:alignParent: Con este atributo especificamos que un view

estar ubicado hacia uno de los lados de su padre.

layout:centerInParent: Permite centrar horizontal y verticalmente un

View con respecto a su padre.

id: Es un nombre que diferencia los views entre si. Es de utilidad
cuando vayamos a referenciar los controles en el cdigo Java. As que
elige nombres representativos y de fcil interpretacin.

Y CUANDO PROGRAMAMOS?
Justo
en
este
instante!
Crearemos una pequea aplicacin con un Relative Layout y los

siguientes tres views: unEditText, un TextView, y un Button. El objetivo

general es que el usuario digite algn texto en la caja de texto y al
presionar el botn la aplicacin muestre la cantidad de caracteres tiene.
Veamos los pasos a seguir:

PASO 1: CREAR UN NUEVO PROYECTO

Crea un nuevo proyecto o reutiliza el proyecto Test que habamos creado
en los artculos inciales.

PASO 2: ABRIR EL ARCHIVO LAYOUT

Abre el archivo de recursos que guarde el layout de tu actividad
principal.
En
mi
caso
es
activity_my.

PASO 3: ARRASTRAR Y SOLTAR VIEWS

Presiona

la

pestaa Design en

la

parte

inferior

del

editor:

La herramienta que se acaba de visualizar es el panel de diseo de

interfaz de Android Studio.

En la parte central se encuentra un lienzo que muestra la interfaz

actual en un dispositivo.
En su parte superior tenemos una barra que permite configurar

el dispositivo elegidopara la previsualizacin, herramientas de zoom,

la versin de android a visualizar, elmodo tctil (Landscape o
Portrait), etc.
A la izquierda veremos la paleta o estante de views para

construir la actividad.
Al lado derecho se encuentra el Component Tree o rbol de

componentes, en esta ventana se representa en forma jerrquica la

relacin de nuestros views.
Debajo del Component Tree est el panel de propiedades. En el
veremos todos los atributos que tiene un view seleccionado, los cuales
podemos editar con facilidad.
A continuacin arrastraremos al layout el siguiente un Multiline Text de
la seccin Text Fields. Ubcalo en la parte superior y centrado
horizontalmente, de tal forma que te aparezcan los tooltips que se

muestran

en

la

ilustracin

derecha.

QU ES UN EDITTEXT?
El view que acabamos de agregar pertenece a la familia de
los TextFields. Un TextField es un control que espera la entrada de
texto del usuario, como por ejemplo su nombre, telfono y datos que
sean tiles para la aplicacin.
El que acabamos de agregar es de tipo MultiLine, lo que significa que
puede recibir varios renglones de caracteres en su contenido. Tambin
hay otros tipos que solo reciben nmeros, o texto referente a un correo
electrnico, etc.
A pesar de que en diseador se llame TextField en Java es representado
por la subclaseEditText y en XML con el elemento <EditText>.

QU ES UN BUTTON?
Como su nombre lo indican se refiere a un botn. Como usuarios hemos
visto y clickeado millones de veces a estos amigos. Su propsito es

ejecutar una accin que permita al usuario completar un proceso,

confirmar una accin, ejecutar ms caractersticas de la aplicacin, etc.
En Java lo representaremos con la subclase Button y su equivalente en
XML
es
el
elemento<Button>.
Ahora pasaremos a agregar un botn. Utiliza las mismas caractersticas
de ubicacin mostradas en la ilustracin de la parte derecha.

QU ES UN MEDIUM TEXT?
Es un texto esttico de tamao promedio en la interfaz de usuario. Su
propsito es informar o guiar el recorrido en la aplicacin. Como ves,
adicionalmente
hay
ms
texts
en
el
panel:Small (Pequeo), Large (Gigante) y Plain Text (Texto plano). Si
necesitas una referencia adicional, podras comparar el Medium
Text con un Label de SWING.
El medium Text se representa con la subclase de Java TextView, lo de
medium simplemente fue posible editando un atributo que define el
tamao de la fuente. Su equivalente XML es el componente <TextView>.
De nuevo arrastra y posiciona como indican las siguientes ilustraciones:

Si todo sali bien el diseo final te habr quedado similar a este:

PASO 4: CONFIGURAR ATRIBUTOS DE LOS VIEWS

Lo que sigue es asignar los IDs, las dimensiones y las posiciones de
nuestros
tres
componentes
en
el
layout.
Para ello selecciona primero el textview en el Component Tree. Luego
dirgete a sus propiedades, busca el atributo id y emplea un nombre
significativo para nuestro componente. En mi caso yo le he asignado

main_textview.

Luego haremos lo mismo para los dems views y veremos cmo

cambian
sus
nombres
en
el
Component
Tree.

Nuestro editText fue configurado inicialmente para que su lmite superior

estuviera alineado al lmite superior del Relative Layout. Por eso si
vemos sus propiedades podremos ver el atributo layout:alignParent
seleccionado en la opcin top.

Al seleccionar el botn veremos que est ubicado en la parte inferior del

editText, con una margen superior de 41dp y alineado horizontalmente.
Estas caractersticas se representan con los atributos layout:margin ,
layout:alignComponent y layout:centerInParent.

Nota que align_component se visualiza como un conjunto de opciones

donde podemos especificar las adyacencias entre componentes. Si te
fijas, el botn tiene alineado a su lmite superior el lmite inferior del
editText(top:bottom).
El textView tiene una alineacin central vertical tanto como horizontal. Si
te fijas el valor de centerInParent es both que significa que se centrar
en las dos dimensiones.

Ahora intenta asignarle a su lmite superior el lmite inferior del botn y

adems
adele
un
margen
superior
de
41dp.

Seguido modificaremos un atributo especial llamado hint del

editText. Hint indica a travs de un texto informativo, el tipo de texto

que el edittext puede recibir. En mi caso le voy a ponerMensaje.

Lo siguiente es modificar los atributos text del textView y el botn,

asignando una cadena vaca al primero y la cadena Procesar al
segundo:

Todo lo que hemos realizado hasta el momento pudo haberse

especificado a travs de la pestaa Text del Editor. Esta pestaa
muestra la descripcin XML sobre lo que acabamos de construir en la
pestaa de Diseo.
Si vas a la pestaa Text tendras algo similar a esto:
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MyActivity">

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:ems="10"
android:id="@+id/main_editText"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:hint="Mensaje" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/main_button"
android:layout_below="@+id/main_editText"
android:layout_centerHorizontal="true"
android:layout_marginTop="41dp"
android:text="Procesar" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="@+id/main_textview"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_below="@+id/main_button"
android:layout_marginTop="41dp" />
</RelativeLayout>

Este archivo muestra los componentes de cada View y los atributos que
le hemos asignado (tambin hay otros atributos configurados
intrnsecamente por Android Studio).

PASO 5: AADIR LAS CADENAS RELEVANTES AL

ARCHIVO STRINGS.XML
Preguntmonos lo siguiente
Qu cadenas son estticas y no se modificarn a lo largo de la
ejecucin de la aplicacin?
A mi parecer el texto del botn sera muy importante al igual que
el Hint del edittext. El texto del textview est destinado a ser dinmico
as que lo descartara.
Una vez definido esto, vamos a agregar estas cadenas al archivo
strings.xml. Para ello vamos al panel de propiedades y buscamos el
atributo text del botn y hint del edittext. Presionaremos el botn .

La ventana que se acaba de desplegar permite que elijamos y

naveguemos a travs de todos los recursos del proyecto en la
pestaa Project. Existe otra pestaa llamada System, pero sus
utilidades
las
veremos
luego.

Ya que el recurso que necesitamos usar aun no existe, debemos crearlo.

As que haremos clic en New Resource y seleccionaremos New String
Value.
A continuacin nos aparecer un formulario con dos campos que
describen al string, Resource name y Resource content. El primero hace
referencia al nombre del recurso, el segundo al contenido del string. En
mi caso como nombre le asignar main_button al texto del botn. Y para
el hint del edittext usar main_hint.
En los contenidos ubica el texto que tenamos al inicio.

Guardamos y el recurso estar creado. Si deseas abre el archivo

strings.xml y comprueba la existencia de los nodos que acabas de crear.

<?xml version="1.0" encoding="utf-8"?>

<resources>
<string name="app_name">Test</string>
<string name="action_settings">Settings</string>
<string name="hint">Mensaje</string>
<string name="button">Procesar</string>
</resources>

Naturalmente otra forma de aadir los nodos a strings.xml es de forma

manual si en algn momento deseas hacerlo.

PASO 6: PROGRAMAR LOS EVENTOS

Ya hemos acabo con toda la parte de diseo e interfaz. Lo que sigue es
programar lo que queremos que la aplicacin realice si el botn es
presionado. El algoritmo sera algo como:
Botn
SI
-Obtener
valor
-Poner valor del editText en el textView

presionado?:
del

editText

CMO SABER SI UN BOTN FUE PRESIONADO?

Simplemente usaremos una Interfaz que escuche los taps del usuario en
un view. Recuerda que los listeners o escuchas en espaol, son
Interfaces implementadas en Java para participar en la recepciones de
eventos. Bueno supongo que eso ya lo sabes.
Para los botones usaremos una escucha especial llamada
OnClickListener. Solo basta aadir una relacin entre nuestro botn y la
escucha para reportar el evento.

PERO CMO ACCEDEMOS AL BOTN?

Debes crear un objeto del tipo Button para guardar la instancia del
botn.

private Button boton;

Ahora dentro del mtodo callback onCreate() llamaremos al mtodo de

la clase ActivityfindViewById(). Este mtodo retorna en los views que se
encuentran en el layout a travs de una referencia.
Como devuelve un objeto de tipo View, es necesario realizar
el casting pertinente.Veamos:
boton = (Button)findViewById(R.id.main_button);

La referencia del botn se obtiene a travs del atributo id de la clase R.

Con ese proceso claro pasamos a codificar de forma anloga con los
otros dos Views:

boton = (Button)findViewById(R.id.main_button);
edit = (EditText)findViewById(R.id.main_editText);
text = (TextView)findViewById(R.id.main_textview);

Lo que sigue es anidar una nueva instancia de la escucha al botn con el

mtodo de la clase Button setOnClickListener():

boton.setOnClickListener( new OnClickListener() {

public void onClick(View view){
//Acciones
}
});

OnClickListener permite sobreescribir su mtodo de escucha de taps

onClick(). Dentro de l agregaremos las acciones que se ejecutarn al
presionar el botn. El parmetro de entrada view es el view que fue
presionado, el cual no es utilizado en este ejemplo.

QU CONTENDR EL LISTENER?
Las acciones que establecimos en nuestro algoritmo: Obtener el valor
del edit text y el setearlo en el viewtext.
Veamos:

String mensaje = edit.getText().toString();

text.setText(String.valueOf(mensaje.length()));

Lo que acabamos de hacer es una fcil transferencia del mensaje desde

el
editText
hasta
el
textView.
Para
ello
usamos
los
mtodos getters y setters del atributo text que ambos poseen. El
mtodo getText() de EditText no retorna en la cadena como tal del
componentes, si no en un objeto del tipo Editable, por ello luego
casteamos a String con toString().
Este sera el cdigo completo:

public class MyActivity extends Activity {

private Button boton;

private EditText edit;
private TextView text;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);

boton = (Button)findViewById(R.id.main_button);
edit = (EditText)findViewById(R.id.main_editText);
text = (TextView)findViewById(R.id.main_textview);

boton.setOnClickListener( new OnClickListener() {

public void onClick(View view){
String mensaje = edit.getText().toString();
text.setText(String.valueOf(mensaje.length()));
}
});
}
}

Finalmente ejecuta el proyecto en Android Studio para obtener el

siguiente resultado:

CONCLUSIN
Quienes inician en el Desarrollo Android puede que se les haga difcil
entender el concepto de inflar views. No obstante la prctica
constante interiorizar este concepto.
Crear diseos de interfaz para tus aplicaciones requiere aprendizaje
continuo. Tambin exige que comprendas los patrones de diseo y
respetes los lineamientos.
El paso a seguir es comprender el funcionamiento de fragmentos dentro
de las aplicaciones Android.