Android Studio Desde 0 - Capitulo 2 - RelativeLayout PDF

UNIVERSIDAD NACIONAL DE TRUJILLO CURSO: TEMAS AVANZADOS 2
-----------------------------------------------------------------------------------------------------------------------------------
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.
DOCENTE : Mg. Marcelino Torres Villanueva

-----------------------------------------------------------------------------------------------------------------------------------
Al abrir nuestro diseño, 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.
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 hacia nuestro diseño y
se añadirá automáticamente.

-----------------------------------------------------------------------------------------------------------------------------------
Este será nuestro árbol de componentes como su nombre se indica, en vez de arrastrar a lo tonto
a la interfaz gráfica, usaremos esto para tener todo mas ordenado.
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…

-----------------------------------------------------------------------------------------------------------------------------------
En este dialogo, Elegiremos RelativeLayout, y por último clic en Apply.
Y como vemos, ahora el padre de nuestro diseño es RelativeLayout.
Pantalla de trabajo:
En este módulo, realizaremos la siguiente pantalla con RelativeLayout, asi que manos a la obra.

-----------------------------------------------------------------------------------------------------------------------------------
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.
Si nos fijamos en Common Attributes, esta la propiedad que buscamos, text.
En esa cajita de texto es donde modificaremos el contenido del TextView.

-----------------------------------------------------------------------------------------------------------------------------------
Según la pantalla de trabajo, pondremos “Numero 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:, para no marearlos mucho, tools se usa para solo ver como se vería nuestra aplicación
si le añadimos esta modificación, es decir, si agregaste “Numero de Telefono: ” 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é?
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.

-----------------------------------------------------------------------------------------------------------------------------------
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

-----------------------------------------------------------------------------------------------------------------------------------
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 pastel tendremos esta pantalla, si se ve igual que la imagen es que estas
siguiendo los pasos al pie de la letra.

-----------------------------------------------------------------------------------------------------------------------------------
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
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?
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.

-----------------------------------------------------------------------------------------------------------------------------------
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)
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
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.
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”.

-----------------------------------------------------------------------------------------------------------------------------------
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.
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, por que, por que, al escribir una letra, todo lo de
adentro se borra y se remplaza por la letra que acabo de escribir.

-----------------------------------------------------------------------------------------------------------------------------------
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.
Y este seria nuestro diseño final, solo vimos lo básico, con el paso de los módulos, veremos cosas
avanzadas que poco a poco nos irán complementando, gracias por haber leído hasta aquí.

-----------------------------------------------------------------------------------------------------------------------------------
Ejercicios
Ejercicio 1: Diseño 1
Nivel del ejercicio: ☆
Requerimiento: Hacer la Siguiente Pantalla (En nombre, remplazar el nombre por su nombre,
tomar captura y enviarle al encargado del curso)
Ejercicio 2: Diseño 2
Nivel del ejercicio: ☆☆

-----------------------------------------------------------------------------------------------------------------------------------
Ejercicio 3: Escalera
Nivel del ejercicio: ☆☆☆

Android Studio Desde 0 - Capitulo 2 - RelativeLayout PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Android Studio Desde 0 - Capitulo 2 - RelativeLayout PDF

Enviado por

Direitos autorais:

Formatos disponíveis

UNIVERSIDAD NACIONAL DE TRUJILLO CURSO: TEMAS AVANZADOS 2

Android Studio Desde 0 - Capitulo 2 - RelativeLayout

DOCENTE : Mg. Marcelino Torres Villanueva

DOCENTE : Mg. Marcelino Torres Villanueva

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.

DOCENTE : Mg. Marcelino Torres Villanueva

DOCENTE : Mg. Marcelino Torres Villanueva

En este dialogo, Elegiremos RelativeLayout, y por último clic en Apply.

Y como vemos, ahora el padre de nuestro diseño es RelativeLayout.

DOCENTE : Mg. Marcelino Torres Villanueva

Paso 1: Cambiar el texto de “Hello Word”

En el árbol de componentes, damos clic en TextView.

En el lado derecho nos aparecerá las propiedades del TextView.

Si nos fijamos en Common Attributes, esta la propiedad que buscamos, text.

En esa cajita de texto es donde modificaremos el contenido del TextView.

DOCENTE : Mg. Marcelino Torres Villanueva

Paso 2: Agregar el fondo celeste

DOCENTE : Mg. Marcelino Torres Villanueva

Vamos a las propiedades de RelativeLayout

Para cambiar el color de fondo de cualquier componente, usaremos la propiedad background,

Otra forma de buscarlo es usando el filtro de atributos.

DOCENTE : Mg. Marcelino Torres Villanueva

Y nos aparecerá una paleta de colores

DOCENTE : Mg. Marcelino Torres Villanueva

DOCENTE : Mg. Marcelino Torres Villanueva

DOCENTE : Mg. Marcelino Torres Villanueva

Paso 3: Cambiar el color del TextView

Usaremos la paleta de diseño sin problemas, el código Hexadecimal es #FFFFFF

DOCENTE : Mg. Marcelino Torres Villanueva

Paso 4: Agregar una caja de texto

Pero sorpresa, si buscamos el componente EditText en el filtro de componentes, no aparece,

Para agregar un nuevo componente a nuestro contenedor RelativeLayout arrastraremos el

DOCENTE : Mg. Marcelino Torres Villanueva

Al final nuestro árbol de componentes se tendrá que ver asi

Pero oh sorpresa, nuestro EditText está encima del TextView.

DOCENTE : Mg. Marcelino Torres Villanueva

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

Estas propiedades solo existirán si el contenedor es RelativeLayout

DOCENTE : Mg. Marcelino Torres Villanueva

Iremos a la propiedad del TextView y le pondremos un identificador, la nomenclatura para los

Como nuestro TextView solo es un título le pondremos:

Ahora si también le agregaremos un id al EditText, la nomenclatura será la siguiente:

En este caso queremos que B este debajo de A.

Asi que usaremos la propiedad layout_below y diremos que B layout_below A.

DOCENTE : Mg. Marcelino Torres Villanueva

En resumen, nos iremos a las propiedades de edtNumero, buscaremos la propiedad layout_below

Y como vemos ahora sí, edtNumero está debajo de tvTitulo.

DOCENTE : Mg. Marcelino Torres Villanueva

Paso 5: Agregar botones

Como ya sabemos agregar componentes al árbol de componentes, para agregar un botón es de la

DOCENTE : Mg. Marcelino Torres Villanueva

Usaremos la propiedad layout_below para que este debajo de edtNumero

DOCENTE : Mg. Marcelino Torres Villanueva

Agregaremos el segundo Button el cual es el botón de “Llamar”, con el identificador de btnLlamar,

Entonces usaremos la propiedad layout_below y layout_toRightOf.

Al final quedaría asi:

DOCENTE : Mg. Marcelino Torres Villanueva

DOCENTE : Mg. Marcelino Torres Villanueva