Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Android Studio Desde 0 - Capitulo 2 - RelativeLayout
RelativeLayout: RelativeLayout es un grupo de vistas que muestra vistas secundarias en posiciones
relativas. La posición de cada vista se puede especificar como relativa a elementos hermanos (como
a la izquierda o debajo de otra vista) o en posiciones relativas al RelativeLayout área principal (como
alineadas con la parte inferior, izquierda o centro).
Para entenderlo mejor, haremos un pequeño diseño con RelativeLayout, primero nos iremos a
nuestro diseño base creado por la plantilla de Empty Activity, para poder acceder a él, la ruta es la
siguiente: app -> res -> layout -> activity_main.xml
Una vez ahí damos doble clic para apreciar el diseño por defecto que se nos creo al usar la plantilla.
1
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Al abrir nuestro diseño(pestaña Design, parte inferior izquierda), tal vez no se vea en pantalla
completa, opacada por la consola de compilación, si este fuera el caso, solo le damos clic en el botón
de minimizar de la consola.
Y con esto ya tendremos el diseño en pantalla completa, se tendría que ver de esta forma.
Si este no fuera el caso y viéramos otra cosa, nos fijaremos en la parte de abajo
Vemos que tenemos dos pestañas, hay dos formas de crear diseño.
Design: Arrastrando elementos y programando mediante una paleta de diseño.
Text: Diseñar la pantalla solo con código XML.
En esta demostración usaremos Design.
2
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Componentes
Esta será nuestra herramienta para buscar los componentes que necesitamos para nuestro
proyecto, por ejemplo, si queremos un botón, lo buscamos, lo arrastramos (Clic sostenido) hacia
nuestro diseño y se añadirá automáticamente.
A continuación se muestra la ventana árbol de componentes, la cual usaremos para tener todos los
componentes más ordenados.
Si nos fijamos bien, el padre de toda esta pantalla es ConstraintLayout, cambiaremos esto a como
lo pide el documento, el cual es usar RelativeLayout, para cambiarlo es simple.
Daremos clic derecho en ConstraintLayout, después nos iremos a la opción de Convert view…
3
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
En este dialogo, Elegiremos RelativeLayout, y por último clic en Apply.
Y como vemos, ahora el padre de nuestro diseño es RelativeLayout.
4
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Aplicación práctica:
Realizar el siguiente diseño con RealativeLayaout, en el proyecto Mi PrimeraApp.
Paso 1: Cambiar el texto de “Hello Word”
Primero, hay que aprender que cada componente tiene propiedades, no todos los componentes
tienen las mismas propiedades, no olvidar eso.
Segundo, el componente donde podemos escribir títulos y texto en Android se llama TextView.
TextView tiene la propiedad Text, la cual usaremos para cambiar el contenido del TextView.
En el árbol de componentes, damos clic en TextView.
En el lado derecho nos aparecerá las propiedades del TextView.
5
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Si nos fijamos en Common Attributes, esta la propiedad que buscamos, text.
En esa caja de texto es donde modificaremos el contenido del TextView.
Según el diseño requerido, colocaremos “Número de Teléfono: ”, y por ultimo enter, para poder
visualizar el nuevo cambio.
ADVERTENCIA
Si se dieron cuenta, hay 2 text, esto puede causar confusión al momento de diseñar. ¿Por qué dos
text? ¿Por qué al cambiar en cualquiera de los dos funciona?
Si nos fijamos en la llave inglesa el cual contiene el segundo text, nos aparece la propiedad
tools:text: tools se usa para saber cómo se vería nuestra aplicación si le añadimos esta modificación,
es decir, si agregaste “Numero de Teléfono: ” en el segundo text, al momento de compilar,
aparecerá en blanco, ya que tools solo sirve para poder ver como se vería nuestra pantalla antes de
ejecutar la aplicación.
Asi que antes de aplicar cualquier cambio, vean si lo están aplicando a tools.
Paso 2: Agregar el fondo celeste
Si nos fijamos en el diseño final, este tiene un fondo colorido, asi que pensemos un momento y
preguntémonos, en donde agregaríamos el color de fondo, en el ¿TextView?, o en el
¿RelativeLayout?
Ambos componentes tienen la propiedad de poder agregarle un color de fondo, pero para este caso
el color de fondo le agregaremos a RelativeLayout. ¿Por qué?
6
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Por que como sabemos, RelativeLayout es el contenedor de componentes, asi si agregáramos mas
componentes, ya no tendríamos que cambiar el fondo de los nuevos.
Vamos a las propiedades de RelativeLayout
Para cambiar el color de fondo de cualquier componente, usaremos la propiedad background,
pero… en la lista de propiedades no aparece tal propiedad.
Pero podemos ver que hay un Spinner llamado All Attributes el cual nos dará todas las propiedades
del componente, ahora si damos click ahí podremos apreciar la propiedad que estamos buscando,
el cual es background.
Otra forma de buscarlo es usando el filtro de atributos.
7
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
El cual al darle click y escribiendo una parte de la palabra del atributo que estamos buscando,
automaticamente saldra el atributo, para este proyecto aprenderemos a usar el filtro, ya que es mas
eficiente y nos ahorra mucho tiempo a la hora de estar diseñando pantallas.
Ahora si dentro de la propiedad background, tendremos que escribir el color de fondo que tendrá
nuestro RelativeLayout en colores Hexadecimal, podemos usar esta pagina https://html-color-
codes.info/codigos-de-colores-hexadecimales/ para poder encontrar el color que buscamos, copiar
el código hexadecimal y pegarlo en la caja de texto (RECUERDEN QUE PARA VER LOS CAMBIOS
DEBEN DAR ENTER EN LA CAJA DE TEXTO), pero ahora hay algo llamado material design, el cual nos
facilita mucho a la hora de diseñar pantallas, en este caso, también para los colores.
Para acceder a los colores de material desing, daremos click en la parte encerrada de color rojo.
Y nos aparecerá una paleta de colores
8
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Para esta pantalla usaremos el color pastel celeste, si nos fijamos en el Spinner de Material #,
podremos subirle o bajarle el numero para cambiar la tonalidad del color, en este caso nos iremos
a Material 500.
Y elegiremos el color celeste, ustedes pueden elegir otro color a su gusto, lo importante es que
deben saber que existe esta herramienta, una de las mas fabulosas que ha creado Android Studio.
Y al elegir el color celeste, este aplicará a todo el diseño como se muestra en la siguiente pantalla.
9
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Paso 3: Cambiar el color del TextView
Recuerden, una cosa es el fondo del componente y otra cosa es el color del componente, en este
caso para los TextView existe algo llamado TextColor, es la propiedad que usaremos para cambiar
el color del texto. (RECUERDEN PRIMERO IR A LAS PROPIEDADES DEL TEXTVIEW)
Y como vemos no aparece vacío, es que los TextView por defecto ya viene con un color de texto.
Usaremos la paleta de diseño sin problemas, el código Hexadecimal es #FFFFFF
10
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Y al aplicar el cambio vemos que ahora el color del texto combina perfecto con el fondo.
Paso 4: Agregar una caja de texto
Seguro ya sabrás que una caja de texto es un componente donde el usuario ingresa caracteres
mediante el teclado, en Android se llama EditText
Pero sorpresa, si buscamos el componente EditText en el filtro de componentes, no aparece,
entonces… ¿Cómo agregamos una caja de Texto?
11
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Todos los componentes que esta mostrando el filtro, son cajas de texto, pero hay varios por que
puede haber cajas de texto donde solo se ingresa números, fechas, correos, contraseñas, etc.
Asi nos evitamos validar en la lógica del proyecto ya que el componente ya viene con su propia
lógica.
Los requerimientos piden que ingresen un numero de teléfono, asi que eso haremos.
Para agregar un nuevo componente a nuestro contenedor RelativeLayout arrastraremos el
componente EditText hacia el árbol de componentes.
Nos fijamos que la línea azul este debajo de TextView y las líneas puntiagudas en forma vertical
indiquen correctamente al contenedor RelativeLayout.
Al final nuestro árbol de componentes se tendrá que ver asi
Pero oh sorpresa, nuestro EditText está encima del TextView.
Al ser RelativeLayout el padre de estos dos componentes, les agrega propiedades especiales a cada
uno de estos, el cual nos servirá para decirle que nuestro EditText este debajo del TextView.
12
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Esta imagen explica las propiedades que usaremos para que nuestro EditText este debajo del
TextView, vemos que tenemos en el centro un botón el cual su identificador es “main”, el botón
esta por defecto en el centro.
Si quisiéramos que un componente este arriba del botón, usaremos layout_above
Si quisiéramos que un componente este debajo del botón, usaremos layout_below
Si quisiéramos que un componente este a la izquierda del botón, usaremos layout_toLeftOf
Si quisiéramos que un componente este a la derecha del botón, usaremos layout_toRightOf
ADVERTENCIA
Estas propiedades solo existirán si el contenedor es RelativeLayout
Asi que, si nos fijamos detalladamente en la imagen, para que esto funcione el componente debe
tener un identificador, para agregar un identificador a un componente se le modifica mediante la
propiedad id
Iremos a la propiedad del TextView y le pondremos un identificador, la nomenclatura para los
TextView será la siguiente:
(tv)+(PrimeraLetraMayuscula)+(Minúscula)
13
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Como nuestro TextView solo es un título le pondremos:
tvTitulo
Ahora si también le agregaremos un id al EditText, la nomenclatura será la siguiente:
(edt)+(PrimeraLetraMayuscula)+(Minúscula)
Como nuestro EditText es una caja de texto para ingresar un numero, le pondremos:
edtNumero
Ahora para que le agregamos ids a nuestros componentes, una de las razones es para identificarlos
más fácil en nuestro árbol de componentes, la otra es que nos servirá para poner nuestra caja de
texto debajo del título.
En este caso queremos que B este debajo de A.
A = tvTitulo
B = edtNumero
Asi que usaremos la propiedad layout_below y diremos que B layout_below A.
En resumen, nos iremos a las propiedades de edtNumero, buscaremos la propiedad layout_below
y pondremos el identificador de tvTitulo
14
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Y como vemos ahora sí, edtNumero está debajo de tvTitulo.
Paso 5: Agregar botones
Como ya sabemos agregar componentes al árbol de componentes, para agregar un botón es de la
misma forma, arrastramos el Button hacia el árbol de componentes, debajo de edtNumero.
15
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Los Buttons también tienen identificadores, la nomenclatura para los botones es:
(btn)+(PrimeraLetraMayuscula)+(Minúscula)
Para este primer botón el cual lo que hace es cancelar, usaremos el siguiente identificador:
btnCancelar
Usaremos la propiedad layout_below para que este debajo de edtNumero
Para cambiarle el texto de los botones usaremos la propiedad text, Le pondremos “Cancelar”.
16
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Agregaremos el segundo Button el cual es el botón de “Llamar”, con el identificador de btnLlamar,
y el contenido del texto de “Llamar”
Ahora como ponemos el botón a la derecha de cancelar, RelativeLayout nos permite usar sus
propiedades al mismo tiempo, lo que haremos es que este debajo de edtNumero y a la vez a la
derecha de btnCancelar.
Entonces usaremos la propiedad layout_below y layout_toRightOf.
17
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Al final quedaría asi:
Paso 6: Hint
Si nos damos cuenta, hay un texto en el EditText, podemos agregarle fácilmente con text, pero esto
traería varios errores, que al compilar la aplicación se mostrara ese texto, pero yo acabo de decir
que ese EditText solo puede ingresar números, a este error los desarrolladores crearon llamado algo
Hint, para que lo entiendas mejor lo explicare con un ejemplo de Whatsapp.
Ese texto de “Escribe un mensaje” Seria el hint, porque, al escribir una letra, todo el mensaje interno
se borra y se remplaza por la letra que acabo de escribir.
18
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Ahora esta propiedad para los EditText se encuentra como Hint.
Al editarlo podremos ver que ya se nos puso el texto que queríamos, pero sin aplicar la propiedad
text.
19
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Y este seria nuestro diseño final, solo vimos lo básico, con el paso de los módulos, veremos cosas
más avanzadas que poco a poco nos irán complementando, gracias por haber leído hasta aquí.
20
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
EJERCICIOS
Ejercicio 1: Realizar el siguiente diseño usando RelativeLayaout, teniendo en cuenta los controles
vistos hasta el momento. Reemplazar los datos por sus propios datos. Considerar el tamaño del
texto en 18 sp
Nivel del ejercicio: ☆
1RPEUH )UH\GPDQ
&HOXODU
Ejercicio 2: Realizar el siguiente diseño usando RelativeLayaout, teniendo en cuenta los controles
vistos hasta el momento. Reemplazar los datos por sus propios datos. Considerar el tamaño del
texto en 18 sp
Nivel del ejercicio: ☆☆
1RPEUH )UH\GPDQ
Ejercicio 3: Escalera
Nivel del ejercicio: ☆☆☆
Realizar el siguiente diseño usando RelativeLayaout, teniendo en cuenta los controles vistos hasta
el momento. Reemplazar los datos por sus propios datos. Considerar el tamaño del texto en 18 sp
21
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
1RPEUH )UH\GPDQ
22
Android Studio Desde 0 – RelativeLayout y ConstrainLayout
Capítulo 2.1 – ConstrainLayout
ConstrainLayout te permite crear diseños grandes y complejos con una jerarquía de vista plana (sin
grupos de vistas anidadas). Se dice que es similar a RelativeLayout en que todas las vistas se
establecen según las relaciones, entre las vistas de hermanos y el diseño de los padres, pero es más
flexible que RelativeLayout y más fácil de usar con el Editor de diseño de Android Studio.
Ejercicio 4: Contacto
Realizar el siguiente diseño usando ConstrainLayout, teniendo en cuenta los controles vistos hasta
el momento. Considerar el tamaño del texto en 18 sp y alineaciones en la vista Blueprint.
23
