Tema 2· Diseño de la Interfaz de

Usuario
Programación Multimedia y de Dispositivos Móviles
Curso 19/20
 Tema 2 · Diseño de la Interfaz de Usuario
1. Introducción

2. Arquitectura de Android

3. Elementos del Diseño de la Interfaz de

Usuario en Android

4. Comunicación entre componentes

5. Fichero de Manifiesto

6. Controles de Entrada
 Tema 2
Diseño de la Interfaz
de Usuario
1. Introducción
 Tema 2 · Diseño de la Interfaz de Android
1. Introducción

• El diseño de la interfaz de usuario cobra cada día más importancia en

el desarrollo de una aplicación

• La calidad de la interfaz de usuario puede ser uno de los factores que

conduzca al éxito o al fracaso de todo el proyecto

• Una buena interfaz de usuario es clave para llegar a un público mayor,

con independencia de los conocimientos informáticos
 Tema 2 · Diseño de la Interfaz de Android
1. Introducción

• La filosofía de diseño de la interfaz en Android es muy diferente a la

que se realiza en otras plataformas

• En Android se usa un lenguaje de marcado similar al HTML

 Tema 2
Diseño de la Interfaz
de Usuario
2. Arquitectura de Android
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• El siguiente gráfico muestra la arquitectura de Android.

 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• Ciclo de vida de una Actividad en Android

• En la siguiente diapositiva podemos analizar el ciclo de la vida

de una Actividad desde que se crea hasta que se termina
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• En la creación, se define el
método onCreate(), donde
añadiremos el código que
determinará el comporta-
miento de la actividad
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• El siguiente gráfico muestra la arquitectura de Android.

• Formado por cuatro capas

• Una de las características más importantes es que todas las capas

están basadas en software libre
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• Capa 1: El Núcleo de Linux

• El núcleo de Android está formado por el sistema operativo

Linux versión 2.6.

• Esta capa proporciona servicios como la seguridad, el manejo

de la memoria, el multiproceso, la pila de protocolos y el
soporte de drivers para dispositivos.

• Actúa como capa de abstracción entre el hardware y el resto

de la pila. Por lo tanto, es la única que es dependiente del
hardware.
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• Capa 2: Runtime de Android

• Está basado en el concepto de máquina virtual utilizado en

Java.

• Los dispositivos donde ha de correr Android (poca memoria y

procesador limitado), por tanto no podemos usar una
máquina virtual Java estándar.
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• Capa 2: Runtime de Android

• Google solucionó este problema de limitaciones con la máquina virtual

Dalvik

• Ejecuta ficheros Dalvik ejecutables (.dex) –formato optimizado para

ahorrar memoria

• Está basada en registros

• Cada aplicación corre en su propio proceso Linux con su propia

instancia de la máquina virtual Dalvik

• Delega al kernel de Linux algunas funciones como threading y el

manejo de la memoria a bajo nivel

• También se incluye en el Runtine de Android el “core libraries” con

la mayoría de las librerías disponibles en el lenguaje Java.
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• Capa 3: Entorno de Aplicación

• Proporciona una plataforma de desarrollo libre para

aplicaciones con gran riqueza e innovaciones (sensores,
localización, servicios, barra de notificaciones, etc.)

• Esta capa ha sido diseñada para simplificar la reutilización de

componentes

• Las aplicaciones pueden publicar sus capacidades y otras

pueden hacer uso de ellas (sujetas a las restricciones de
seguridad)

• Este mismo mecanismo permite a los usuarios reemplazar

componentes
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• Capa 3: Entorno de Aplicación

• Los servicios más importantes que incluye son:

• Views: extenso conjunto de vistas, (parte visual de los componentes)

• Resource Manager: proporciona acceso a recursos que no son en

código

• Activity Manager: maneja el ciclo de vida de las aplicaciones y

proporciona un sistema de navegación entre ellas.

• Notification Manager: permite a las aplicaciones mostrar alertas

personalizadas en la barra de estado

• Content Providers: mecanismo sencillo para acceder a datos de

otras aplicaciones, como por ejemplo, los contactos del teléfono
 Tema 2 · Diseño de la Interfaz de Android
2. Arquitectura de Android

• Capa 4: Aplicaciones

• Formada por el conjunto de aplicaciones instaladas en una

máquina Android.

• Todas las aplicaciones han de correr en la máquina virtual

Dalvik para garantizar la seguridad del sistema.

• Normalmente las aplicaciones Android están escritas en

Java. Para desarrollar aplicaciones en Java podemos utilizar
el Android SDK.

• Existe otra opción consistente en desarrollar las aplicaciones

utilizando C/C++. Para esta opción podemos utilizar el
Android NDK (Native Development Kit)
 Tema 2
Diseño de la Interfaz
de Usuario
3. Elementos de la Interfaz de
Usuario en Android
 Tema 2 · Diseño de la Interfaz de Android
3. Elementos de la Interfaz de Usuario en Android

• Componentes de una Aplicación

• Vista (View)

• Layout

• Actividad (Activity)

• Servicio (Service)

• Intención (Intent)

• Receptor de Anuncios (Broadcast receiver)

• Proveedor de contenido (Content provider)

 Tema 2 · Diseño de la Interfaz de Android
3. Elementos de la Interfaz de Usuario en Android

• 3.1 Vista (View)

• Como hemos visto hasta ahora, la interfaz de usuario es algo

fundamental a la hora de desarrollar aplicaciones en Android
(o en general aplicaciones para dispositivos móviles)

• La interfaz se construye a partir de objetos Vistas (Views) y

Grupo de Vistas (ViewGroup)
 Tema 2 · Diseño de la Interfaz de Android
3.1. Vista (View)

• Como hemos visto hasta ahora, la interfaz de usuario es algo

fundamental a la hora de desarrollar aplicaciones en Android (o
en general aplicaciones para dispositivos móviles)

• La interfaz se construye a partir de objetos Vista (Views) y Grupo

de Vistas (ViewGroup)
 Tema 2 · Diseño de la Interfaz de Android
3.1. Vista (View)

• Se usan para dibujar contenido en la pantalla del dispositivo

Android.

• Aunque puedes instanciar una View en el código Java, la forma

más sencilla de usarlo, es a través de un archivo de diseño XML

• Un ejemplo lo vimos en el tema anterior al crear una aplicación

sencilla de Hola Mundo en Android Studio
 Tema 2 · Diseño de la Interfaz de Android
3.1. Vista (View)

• El archivo layout sería activity_main.xml y el código que

contiene podría tener esta forma

• La vista que estamos usando es de tipo texto(TextView)

• Los atributos layout_width y layout_height indican el espacio

que queremos usar de la pantalla

• El atributo text contiene el texto a representar

• El atributo id sirve para referenciar al objeto TextView

 Tema 2 · Diseño de la Interfaz de Android
3.1 Vista (View)

• Las cadenas de texto que vamos a usar en la aplicación se pueden

definir en el fichero res/values/strings.xml

• De esta forma, estamos haciendo una separación entre código y

contenido

• Facilitamos la traducción a otras lenguas de nuestra aplicación

 Tema 2 · Diseño de la Interfaz de Android
3.1 Vista (View)

• Todos los ficheros introducidos en la carpeta res son considerados

como recursos

• Podemos accederse a los recursos por medio de un identificador

desde el código Java que estamos programando utilizando la
clase R
 Tema 2 · Diseño de la Interfaz de Android
3.1 Vista (View)

• La clase R se define automáticamente en el directorio gen

 Tema 2 · Diseño de la Interfaz de Android
3.1 Vista (View)

• Grupo de Vistas (View Group)

• Es un objeto invisible que se usa para contener otros objetos

View y ViewGroup y poder así organizar y controlar el
layout de una pantalla

• Los objetos ViewGroup se usan para establecer una jerarquía

de objetos View de forma que podamos crear layouts más
complejos

• Eso sí, cuánto más simple pueda mantenerse un layout, más

simple será el desempeño
 Tema 2 · Diseño de la Interfaz de Android
3.1 Vista (View)

• Grupo de Vistas (View Group)

• Es un objeto invisible que se usa para contener otros objetos

View y ViewGroup y poder así organizar y controlar el
layout de una pantalla

• Los objetos ViewGroup se usan para establecer una jerarquía

de objetos View de forma que podamos crear layouts más
complejos

• Eso sí, cuánto más simple pueda mantenerse un layout, más

simple será el desempeño
 Tema 2 · Diseño de la Interfaz de Android
3.1 Vista (View)

• Grupo de Vistas (View Group)

• Los objetos ViewGroup pueden ser instanciados de la misma

forma que los objetos View, tanto en XML como en Java
 Tema 2 · Diseño de la Interfaz de Android
3.1 Vista (View)

• Grupo de Vistas (View Group)

• Aunque todas las clases ViewGroup desempeñan una tarea

similar, cada subclase ViewGroup existe para un propósito
específico

• Estamos hablando de los tipos de Layouts

 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Se define así a un contenedor de vistas

• También es una subclase de View

• Para combinar varios elementos de tipo vista, tendremos que usar

un objeto de tipo Layout
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Un Layout es un elemento que representa el diseño de la interfaz

de usuario de componentes gráficos como una actividad,
fragmento o widget

• Gracias a al Layout podemos controlar el comportamiento y la

posición de las vistas

• ¿Un layout puede contener uno o más layouts?

 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• ¿Un layout puede contener uno o más layouts?

 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts o ViewGroup más usados

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

: Distribuye los elementos de forma tabular.

: Dispone los elementos en relación a otro o al padre.

: Posiciona los elementos de forma absoluta.

: Permite el cambio dinámico de los elementos que

contiene.

Versión mejorada de RelativeLayout, que permite

una edición visual desde el editor y trabajar con porcentajes.
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Cargar un layout XML en Android

• Al tener definido un recurso, ya es posible inflar su contenido

en la actividad

• Para ello usaremos el método setContentView() dentro del

controlador onCreate()
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Atributos de un Layout

• Todas las características de un ViewGroup o un View son

representadas a través de atributos que determinan algún
aspecto

• Encontrarás atributos para el definir el tamaño, la

alineación, padding, bordes, backgrounds, etc

• Cada atributo XML descrito para un componente tiene una

referencia en la clase Java que lo representa. Esto quiere
decir que al usar un elemento <TextView>, nos estamos
refiriendo a la clase TextView
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Identificador de un View

• Existe un atributo que heredan todos los elementos

llamado id

• Representa un identificador único para cada elemento.

• Esto permite obtener una referencia de cada objeto de

forma específica

• La sintaxis para el id sería la siguiente

 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Identificador de un View

• El símbolo @ indica el parser interno de XML, que

comienza con un nuevo identificador para traducir

• El símbolo + declara que dicho id no existe aún.

• En este caso, tendremos que dar la orden para crear el

identificador dentro del archivo R.java a partir del
string que proporcionamos
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Obtener la View en una actividad usando findViewById()

• Una vez definido un id para los views que deseas manipular

en el código, se usa el método findViewById() para obtener
sus instancias
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Obtener la View en una actividad usando findViewById()

• Ejemplo

• Obtener la referencia del TextView que Android Studio

incluye dentro del activity_main.xml en una actividad en
blanco

• Supongamos que le asignamos un id referencia con el

nombre “texto_hello_world”
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Obtener la View en una actividad usando findViewById()

• Ejemplo

• ¿Cómo lo referenciamos desde la actividad en java?

 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Obtener la View en una actividad usando findViewById()

• Ejemplo

• ¿Cómo lo referenciamos desde la actividad en java?

 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Parámetros de un Layout

• Los parámetros de un layout son atributos especiales que

determinan como se relacionan los hijos de un ViewGroup
dependiendo de su posición y tamaño

• Existen dos parámetros que son comunes independientemente

del elemento.

• layout_width

• layout_height
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Parámetros de un Layout

• Definir layout_widht y layout_height

• Estos parámetros definen el ancho y la altura

respectivamente de un cualquier view

• Como ayuda de diseño, se nos han proporcionado dos

constantes que ajustan automáticamente las
dimensiones de un view

• wrap_content

• match_parent
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Parámetros de un Layout

• Definir layout_widht y layout_height

• wrap_content: Ajusta el tamaño al espacio mínimo que

requiere el view. En el siguiente ejemplo se ve como un
botón ajusta su ancho y alto, la cantidad necesaria para
envolver el texto interior

• match_parent: Ajusta el tamaño a las dimensiones

máximas que el padre le permita
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts

• LinearLayout
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts

• LinearLayout: ViewGroup que distribuye sus hijos en una

sola dimensión establecida

• Todos organizados en una sola columna (vertical) o en

una sola fila (horizontal).

• La orientación puedes elegirla a través del atributo

android:orientation
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts

• LinearLayout

• Este layout permite asignar una gravedad a

cada componente según el espacio que ocupa
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts

• LinearLayout

• Además existe un parámetro llamado

android_layout_weight que define la
importancia que tiene un view dentro del
LinearLayout

• A mayor importancia, mayor espacio

ocupa
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts

• LinearLayout

• android_layout_weight

• En la imagen hay tres views con pesos de

1, 2 y 3 respectivamente

• La magnitud de sus alturas corresponde a

su preponderancia

• El espacio disponible total sería la suma de

las alturas (6), por lo que 3 representa el
50%, 2 el 33,33% y 1 el 16,66%
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts

• LinearLayout

• android_layout_weight

• Aunque esto podemos deducirlo por

compresión, es posible definir la suma total
del espacio con el atributo
android:weightSum

• Dependiendo de este valor,

los weights serán ajustados
 Tema 2 · Diseño de la Interfaz de Android
3.2 Layouts

• Tipos de Layouts

• LinearLayout

• android_layout_weight

• Para distribuir todos los elementos sobre el

espacio total del layout, usaremos el
atributo height con valor cero

• Si no lo hacemos, el relleno del espacio se

definirá por las alturas que hayamos
definido, lo que tal vez no complete el
espacio total
 Tema 2 · Diseño de la Interfaz de Android
• ACTIVIDAD RESUELTA

• Abre Android Studio y crea un proyecto para crear una

pantalla como la que se muestra en la imagen

• Pantalla de Login con un texto, dos campos

para introducir datos, y botón y un texto
para solicitar la contraseña olvidada en un
LinearLayout