PROGRAMACIÓN PARA

ANDROID
agosto-diciembre 2022

Instructor: M. C. OCTAVIO A. RÍOS TERCERO

 Unidad 2
Diseño de la Interfaz de Usuario
 Android se ejecuta en diferentes dispositivos con diferentes tamaños y
densidades de píxeles de pantalla

tu diseño
debería
ajustarse a
Compa&bilidad pantallas de
de pantallas diferentes
tamaños y
orientaciones.
 Tamaños de Pantalla

El tamaño de la pantalla es el espacio visible

proporcionado por la IU de tu app.

Compatibilidad
El támaño *sico de la pantalla,
de pantallas medido como la diagonal de la
pantalla.
 Tamaños de Pantalla

Por simplicidad, Android agrupa todos los támaños de

pantallas actuales en cuatro tamaños generales:
ü small,
ü normal,
ü large,
Compatibilidad
de pantallas ü extra large.
 Pixeles

El píxel es el elemento básico

para el surgimiento de una
imagen en una pantalla y está
compuesto por al menos tres
Compa&bilidad
de pantallas elementos luminosos.

Cada uno de estos elementos, llamados dots, cuya traducción literal sería
“puntos” es responsable de la emisión de un color diferente de la luz
dentro del espectro RGB.
 Pixeles

Estos tres colores (rojo, verde y azul), cuando se mezclan

en diferentes proporciones, se generan todos los
millones de colores existentes en los monitores actuales.

Compa&bilidad
de pantallas
 Resolución de Pantallas móviles

la imagen mostrada en una pantalla viene dividida en píxeles .

Se puede entender un píxel como el tamaño más pequeño que una
imagen puede tener.
Una resolución de 1920 x 1080 píxeles, indica que la pantalla es
capaz de mostrar 1920 píxeles por fila y 1080 por columna. Es como
una matriz. Por regla general, el primer número hace referencia a la
Compatibilidad anchura; el segundo, a la altura de la pantalla.
de pantallas
 Densidad de Pantalla

Es la can(dad de píxeles dentro de una área 3sica de la pantalla;

normalmente referidos como dpi (dots per inch).
Por ejemplo, una densidad de pantalla baja Nene menos pixeles ,dentro
de una área dada de la pantalla, comparado con densidades de pantallas
normales o altas.

Compa&bilidad
de pantallas
 Densidad de Pantalla

Por simplicidad, Android agrupa todas las densidades de

pantallas actuales en cuatro grupos:

§ low,
§ medium,
Compatibilidad § high,
de pantallas § extra high.
 Nuevas densidades de Pantalla

Compa&bilidad
de pantallas
 Disposi&vos con diferentes densidades

Un elemento de 100 x 100 pixels se verá diferente en cada

disposiNvo.
 Pixel independiente de la densidad

Es equivalente a un pixel /sico en una

pantalla de 160 dpi, lo cual es la densidad
base asumida por el sistema para una
pantalla de densidad media.
Compa&bilidad
de pantallas En ;empo de ejecución, el sistema , de forma
transparente, maneja el escalado de las
unidades dp, según sea necesario, basándose
en la densidad actual de la pantalla en uso
 Pixel independiente de la densidad

La conversión de unidades dp a pixeles de

pantalla es:
px = dp * (dpi / 160)

Compatibilidad Por ejemplo, en una pantalla de 240 dpi, 1dp es

de pantallas igual a 1.5 píxeles físicos

Debes siempre utilizar unidades dp cuando se defina el UI

de la app, para asegurar que las pantallas se muestren
propiamente en pantallas con distintas densidades.
Qué es una
Ac+vity
Una AcOvity es un
módulo independiente,
que pertenece a una
App. Generalmente se
correlaciona
directamente con una
sola pantalla de
interfaz.
Interfaz de Usuario
La interfaz de una aplicación Android es el
conjunto de elementos gráficos que
podemos visualizar en la pantalla del
dispositivo.

Se puede construir usando diversos

componentes básicos, tales como
botones, campos de texto, etiquetas, etc.
Vistas
• Una Vista es una clase básica a partir de la cual creamos los
elementos de interfaz de usuario
• La vista se define mediante XML
• Ejemplos: Button, TextView, EditText, CheckButton, etc.
• Puede o no permitir interacción con el usuario
• En Java, una vista es un objeto descendiente de la clase View
Jerarquía de clases
en Java para las
vistas
Cada vista contiene
propiedades, las cuales
son heredadas a las
vistas de más abajo en la
jerarquía.
Declaración en XML
<Tipo_de_vista
android:id=“nombre”
android:layout_width="dimensión"
android:layout_height="dimensión"
...
/>
Android:id Permite asociar un idenBficador único al componente, con el cual será recuperado
desde el código Java.
 Jerarquía de elementos en una interfaz

Los componentes son

agrupados en la pantalla
mediante los Layouts, que
son clases 5po ViewGroup
Layouts y vistas hijos
Vista jerárquica
Ejercicio: A-445-E2.1 Colección de vistas
 Pasos para insertar un ícono en un botón

• Acceder al siOo: hTps://romannurik.github.io/AndroidAssetStudio

Seleccionar
Generic icon generator
• Busca y selecciona el icono deseado
• Realiza los cambios necesarios para ajustar tamaño, márgenes, color y nombre

Pulsa aquí para

descargar el ícono.
Búscalo en la carpeta de
descargas, en formato
.zip
• Descomprime el archivo, • Dentro de Android Studio, colócate en
• selecciona todas las carpetas la carpeta res
“drawable” • pega con ctrl + V
• Copia con ctrl + C
• Sin cambiar los datos del directorio,
pulsa ok
• Los íconos quedarán guardados en una carpeta, en diferentes
resoluciones.
• En la especificación del botón en XML agregar la propiedad
“android:drawableleft” con la ruta del ícono a colocar.
 Colocar una imagen en el proyecto
• Acceder al siOo: hTps://pixabay.com

Buscar por temas o tipos

Seleccionar una imagen

Elegir descargar y seleccionar resolución
Copiar el archivo
y pegarlo en el
proyecto
android,
en la carpeta
res/drawable
 Dentro de un LinearLayout
Ac#vidad: colocar al menos 8 vistas
###-E2.2 más vistas diferentes a las que se usaron
en el ejercicio anterior
Los Layouts en Android
Los Layouts son elementos no visuales que controlan la
distribución, posición y dimensiones de las vistas que están
contenidas en ellas.

Un Layout
• Es un contenedor de vistas, permite agruparlas
• Controla su comportamiento y posición
• Puede contener a otro Layout
• Es un descendiente de la clase ViewGroup, que a su
vez es descendiente de View
 LinearLayout - Distribuye los elementos en una fila
o en una columna
TableLayout - Distribuye los elementos en forma
de una tabla

Tipos FrameLayout
elementos.
- Permite el cambio dinámico de los

principales Rela1veLayout - Distribuye los elementos con

de Layouts relación a otros elementos dentro del mismo Layout
AbsoluteLayout - Posiciona los elementos de forma
absoluta
ConstraintLayout- Facilita la construcción de la interfaz
en modo diseño, mediante anclajes y restricciones.
FrameLayout
Todas las vistas son ubicadas en un solo punto de la pantalla

Puede tener varias vistas, pero todas están apiladas y ancladas en

la esquina superior izquierda

Por medio de android:visibility podemos ocultar o mostrar

elementos.

Los elementos pueden ser ubicados dentro del Layout usando

android:gravity
Ejercicio:
###- E2.3-switcheo de imágenes
 Manejo de fuentes de texto

Asegurarse que el
Seleccionar y descargar Descomprimir el archivo nombre del archivo
un font de descargado. La fuente tiene solo minúsculas.
hTp://fonts.google.com Oene extensión ._ Se puede usar “_” como
separador.

En el proyecto de
Dentro de la vista, usar
android Studio, crear la Colocar en esa carpeta
el atributo
carpeta “res/font”, las fuentes que se han
android:fontFamily para
especificar que es de descargado
asignar la fuente.
Opo font.
TableLayout
Permite arreglar un grupo de vistas en renglones y
columnas

Las celdas no tienen bordes

El número de columnas está determinado por el renglón

que contiene más celdas.

Los objetos TableRow son las vistas hijas de TableLayout

Cada renglón puede tener cero o más vistas (View o

ViewGroup)

El ancho total de la tabla está definido por su contenedor.

Estructura de TableLayout
<TableLayout <TableLayout
... > xmlns:android="http://schemas.android.com/apk/res/android"
<TableRow android:layout_width="match_parent"
…> android:layout_height="match_parent" >
</TableRow>
…
<TableRow <!-- primer renglón de la tabla-->
…> <TableRow
</TableRow> android:id="@+id/row1"
</TableLayout> android:layout_width="fill_parent"
android:layout_height="wrap_content">

<!-- Agregar elementos/columnas en el primer renglón>

</TableRow>
</TableLayout>
Atributos para TableLayout
strechColumns Indicará las columnas que se pueden expandir A nivel de Vista:
para absorver el espacio libre dejado por las demás columnas a la
derecha de la pantalla. Layout_span – Una celda
puede ocupar el espacio de
shrinkColumns -Indicará las columnas que se pueden contraer para varias columnas de la tabla
dejar espacio al resto de columnas que se puedan salir por la
derecha de la pantalla.

collapseColumns –Indicará las columnas de la tabla que se quieren

ocultar completamente.

El valor del atributo es el número de la columna a afectar, a par6r de la

columna o

El valor “0,1” significa que las dos primeras columnas serán afectadas.

El valor “*” significa que todas las columnas serán afectadas.

Ejercicio:
A-###-E2.4 Interfaz Calculadora

Links para paleta de colores:

hVps://material.io/resources/color/#!/?view.leZ=0&view.right=0
www.materialpaleVe.com/colors
 Un es&lo es una colección de
propiedades que definen la apariencia
que tendrá una vista

Se puede especificar cosas como

Los Es?los tamaño, márgenes, color, fuentes, etc.

Un es&lo se define en un archivo

llamado styles.xml en la carpeta
res/values
Los EsAlos
Archivo res/values/styles.xml

<resources>
<style name="es0loNumeros">
<item name="android:textSize">@dimen/sizeTextoBotones</item>
<item
name="android:textColor">@color/color_texto_numeros</item>
<item
name="android:background">@color/color_fondo_numeros</item>
<item
name="android:layout_margin">@dimen/margenBotones</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
</resources>

Dentro de un Layout
<Bu@on
android:text="7"
style="@style/es0loNumeros"
/>
Diseño de forma
Archivo XML que define una forma geométrica, con
sus colores y gradientes

Archivo res/drawable/fondo_resultado.xml
<shape xmlns:android="h2p://schemas.android.com/apk/res/android">
<gradient
android:startColor="#1b5e20"
android:endColor="#a5d6a7"
android:angle="0"
/>
<stroke
android:width="@dimen/grosorLineaResultado"
android:color="#3f51b5"
/>
<corners
android:radius="5dp"
/>
</shape>

Dentro de un Layout
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_span="4"
android:text="0"
android:gravity="right"
android:textSize="@dimen/sizeTextoResultado"
android:paddingRight="5dp"
android:background="@drawable/fondo_resultado"
/>
 Los atributos margin y padding
Padding- Es el espacio interior de un elemento
Margin- Es el espacio exterior de un elemento
 Links para recursos

descargar fuentes h_ps://fonts.google.com

descargar imágenes h_ps://pixabay.com
descargar iconos www.flaNcon.es
h_ps://fonts.google.com/icons
Links para paleta de colores:
hVps://material.io/resources/color/#!/?view.leZ=0&view.right=0
www.materialpaleVe.com/colors

poner ícono de lanzamiento y en el AcBonBar (tutorial):

hVps://umhandroid.momrach.es/icono-y-up-link-en-el-acBon-bar/
Colocar el Icono en el Ac&onBar
Colocar este código en onCreate()
 ConstraintLayout
Permite crear diseños grandes y complejos con
una jerarquía de vistas plana (sin grupos de
vistas anidadas)

Es similar a RelativeLayout, pero es más

flexible y más fácil de usar con el editor de
diseño de Android Studio

Toda su potencia está disponible directamente

desde las herramientas visuales del editor de
diseño
Concepto de Restricciones
• Cada vista debe tener al menos una restricción horizontal y una
ver;cal.

Cada restricción representa una conexión o alineación con

otra vista,
el diseño de nivel superior o
una guía invisible

Cada restricción define la posición de la vista a lo largo del eje

ver;cal u horizontal

Fuente: https://developer.android.com/training/constraint-layout?hl=es-419
Si una vista no tiene restricciones cuando ejecutas su diseño en un
dispositivo, se abre en la posición [0,0] (la esquina superior izquierda).
Cuando agregas una vista
en un ConstraintLayout, se
muestra un cuadro de
límite con controladores de
cambio de tamaño
cuadrados en cada esquina
y controladores de
restricciones circulares en
cada lado.
Haz clic en un controlador
de restricción y arrástralo
hasta un punto de anclaje
disponible. Ese punto
puede ser el borde de otra
vista, el borde del diseño o
una guía.
Haz clic en uno de los
botones

de Create a
connection en la
sección Layout de la
ventana Attributes
 Reglas para crear Restricciones
Cada vista debe tener al menos dos restricciones, una
horizontal y una vertical.
Reglas para crear Restricciones
Puedes crear restricciones solo
entre un controlador de
restricción y un punto de anclaje
que compartan el mismo plano.

Por lo tanto, un plano vertical (los

lados izquierdo y derecho) de
una vista puede limitarse solo a
otro plano vertical
 Reglas para crear Restricciones
Las líneas de base solo pueden limitarse a otras líneas
de base.
 Reglas para crear Restricciones
Cada identificador de restricción se puede usar para una sola
restricción, pero es posible crear múltiples restricciones
(desde diferentes vistas) en el mismo punto de anclaje.
 Posición de orden
Define el orden de aparición de dos vistas, ya sea de manera
horizontal o vertical.
Alineación
• Alinea el borde de una
vista con el mismo
borde de otra vista.

• Puedes compensar la
alineación arrastrando
la vista desde la
restricción hacia
adentro
Alineación

Si deseas alinear los

centros de las vistas, crea
una restricción en ambos
lados.
Alineación de línea base
Alinea la línea de base de texto de una
vista con la línea de base de texto de
otra.

Para crear una restricción de línea de

base, haz clic con el botón derecho en
la vista de texto que deseas restringir y,
luego, haz clic en Show Baseline. Luego,
haz clic en la línea de base de texto y
arrástrala hasta otra línea de base.
Guideline
• Puedes agregar una guía
vertical u horizontal en la
que sea posible restringir
las vistas; la guía será
invisible para los usuarios
de la aplicación.

• Puedes colocar la guía

dentro del diseño según
las unidades de dp o
porcentaje, en relación
con el borde del diseño
 Barriers
(barreras)
Una barrera es una línea invisible
respecto de la cual puedes
restringir vistas.

Sin embargo, la barrera no define

su propia posición, sino que se
desplaza en función de la
posición de las vistas que
con=ene.

Esto es ú=l si deseas restringir

una vista a un conjunto de vistas
en lugar de a una vista específica.
 Links para ConstraintLayout

Cómo crear una IU responsiva con ConstraintLayout:

h_ps://developer.android.com/training/constraint-layout?hl=es-419#baseline

Barriers (barreras) h_ps://constraintlayout.com/basics/barriers.html

¿Todavía no usas ConstraintLayout? Construcción con código

https://www.youtube.com/watch?v=eO-Lg3Y6IzI

Ejemplo Interfaz Grafica Con ConstraintLayout. (Login)

https://www.youtube.com/watch?v=swCQJrFsj3Y
Ejercicio:
###- E2.5-UsoConstraintLayout

Construir la interfaz siguiendo el video tutorial

hCps://www.youtube.com/watch?v=S7TwRIKqCu4&list=PLU8oAlHdN5Bkn-KS1sRFlSEnXXcAtAJ9P&index=17
 Actividad 2.1 Mi Interfaz

https://www.materialpalette.com/icons
https://romannurik.github.io/AndroidAssetStudio/