Hoja de actividades 02 

Diseño de IU & Interacción 

 
La  interfaz  de  usuario  de  tu  app  es  todo 
aquello  que  el  usuario puede ver y todo aquello 
con  lo  que  este  puede  interactuar.  Android 
ofrece  una  variedad  de  componentes  de  IU 
previamente  compilados,  como  objetos  de 
diseño  estructurados  y  controles  de  IU  que  te 
permiten  compilar  la  interfaz  gráfica  de 
usuario  para  tu  app.  Android  también  ofrece 
otros  módulos  de  IU  para  interfaces 
especiales,  como  diálogos,  notificaciones  y 
menús. 
 
 
Diseños, Look and Feel, Notificaciones y Preferencias 
1. ¿Cómo  se  indica  la  posición  y  el  tamaño  de  cada  widget  que  compone  la  IU 
de  tu  app?  Escribe  el  fichero  XML  que  define  la  siguiente  interfaz.  ¿Dónde  se 
almacena ese fichero? 

 
El  diseño  de  la  interfaz  de  una  app  de  Android  se  crea  a  partir  de  una  jerarquía  de 
objetos  View  y  ViewGroup.  Los objetos View son cualquier tipo de elemento visual, y 
los ViewGroup son contenedores para otros View y ViewGroup. 
 
Estos objetos pueden declararse con código o en un archivo XML. 
 
La  especificación  de  la  posición  y  el  tamaño  depende  del  layout  en  el  que  se 
contenga  el  widget.  Por  ejemplo  en  un  LinearLayout  puedes  especificar  el tamaño y 
la  posición  se  generará  poniendo  un  widget  detrás  de  otro  horizontal  o 
verticalmente. 
 
<LinearLayout
xmlns:android=​"http:​//​​schemas.android.com/apk/res/android​"
android:layout_width=​"match_parent"
android:layout_height=​"match_parent"
android:paddingLeft=​"16dp"
android:paddingRight=​"16dp"
android:orientation=​"vertical"​ ​>
​<EditText
android:layout_width=​"match_parent"
android:layout_height=​"wrap_content"
android:hint=​"@string/to"​ ​/>
​<EditText
android:layout_width=​"match_parent"
android:layout_height=​"wrap_content"
android:hint=​"@string/subject"​ ​/>
​<EditText
android:layout_width=​"match_parent"
android:layout_height=​"0dp"
android:layout_weight=​"1"
android:gravity=​"top"
android:hint=​"@string/message"​ ​/>
​<Button
android:layout_width=​"100dp"
android:layout_height=​"wrap_content"
android:layout_gravity=​"right"
android:text=​"@string/send"​ ​/>
</LinearLayout>
 
Los XML se almacenan en el directorio “res/layout” del proyecto. 
 
 

   
Cuando el usuario presiona un botón, el objeto ​Button​recibe un e
​ vento on-click​. 

2. ¿De  qué  manera  se  puede definir el comportamiento del evento onClick sobre 

un widget (por ejemplo, un botón)? Pon un ejemplo 
Creando  un  objeto  que  implemente  la  interfaz  ​OnClickListener​,  en  el  cual  la 
función  ​onClick ​define  el  comportamiento  que  tendrá  el  botón.  El  objeto  creado 
hay que proporcionárselo al botón a través de la función s​ etOnClickListener()​. 
 
datePickerButton.setOnClickListener(new OnClickListener() {
@Override
​public​​ ​void​​ onClick(View v) {
showDatePickerDialog();
}
});
 
También  se  puede  añadir  un  método  onClick  en  el  XML  de  diseño  a  través  del 
atributo  android:onClick  del  botón.  El  método  que  se  añada  deberá  devolver  void  y 
tener como parámetro un objeto View. 

   
Una  notificación  es  ​un  mensaje que muestra Android fuera de la interfaz de usuario 
de  su  aplicación  para  proporcionar  al  usuario  recordatorios,  comunicaciones  de 
otras  personas  u  otra  información  oportuna  de  su  aplicación​.  Los  usuarios  pueden 
tocar  la  notificación  para  abrir  su  aplicación  o  realizar  una  acción  directamente 
desde la notificación. 

El  ​diseño  de  una  notificación  está  ​determinado  por  las  plantillas  del  sistema​:  ​cada 
aplicación  simplemente  define  el  contenido  de  cada  parte  de  la  plantilla​.  Algunos 
detalles de la notificación aparecen solo en la vista ampliada. 

 
3. Nombra  y  explica  las  partes  principales  de  una  notificación  según  la  imagen 
siguiente. 

1. Icono pequeño​: se requiere y se establece con ​setSmallIcon()​ . 

2. Nombre de la aplicación​: Proporcionado por el sistema. 
3. Marca  de  tiempo​:  proporcionado  por  el sistema, pero se puede modificar 
con s
​ etWhen()​u ocultarlo con s ​ etShowWhen(false)​ . 
4. Icono  grande​:  es  opcional  (generalmente  se  usa  solo  para  fotos  de 
contacto;  no  lo  use  para  el  icono  de  su  aplicación)  y  se  establece  con 
setLargeIcon()​ . 
5. Título​: es opcional y se establece con s ​ etContentTitle()​ . 
6. Texto​: es opcional y se establece con s ​ etContentText()​ . 
 

   
 4. He  desarrollado  una  app  de  Recetas  de  cocina  y  quiero  que  mis  usuarios 
puedan  seleccionar  cuántos  recetas  debo  mostrarles  cada  vez  que  ejecuten 
mi  app.  ¿Cómo  puede  guardar  y  usar  ese  valor  en  diferentes  ejecuciones  de 
mi app? 
 
Hay  que  utilizar   utilizar  las  ​Preference  API  de  Android  para  crear  una  interfaz  que 
sea  coherente  con  la  experiencia  de  usuario  de  otras  aplicaciones  de  Android 
(incluida la configuración del sistema). 

En  lugar  de  utilizar objetos ​View para crear la interfaz de usuario, la configuración se 

crea  utilizando  diversas  subclases  de  la  clase  ​Preference  que  se  declaran  en  un 
archivo XML. 

Por ejemplo: 

<?xml version=​
"1.0"​encoding=​ "utf-8"​
?> 
<PreferenceScreen 
xmlns:android​
=​
"http://schemas.android.com/apk/res/android"​ > 
​
<CheckBoxPreference 
​
android:key​
="​pref_sync" 
​
android:title​=​
"@string/pref_sync" 
​
android:summary​ ="
​@string/pref_sync_summ" 
​
android:defaultValue​ ="
​true"​/
​> 
​
<ListPreference 
​
android:dependency​ ="
​pref_sync" 
​
android:key​
="​pref_syncConnectionType" 
​
android:title​=​
"@string/pref_syncConnectionType" 
​
android:dialogTitle​ =​"@string/pref_syncConnectionType" 
​
android:entries​ ="
​@array/pref_syncConnectionTypes_entries" 
​
android:entryValues​ =​"@array/pref_syncConnectionTypes_values" 
 
android:defaultValue​=​
"@string/pref_syncConnectionTypes_default"​​ /> 
</PreferenceScreen> 
 

De  forma  predeterminada, todas las preferencias de tu app se guardan en un archivo 

al  que  se  puede  acceder  desde  cualquier  lugar  dentro  de  tu  aplicación  mediante  un 
llamado  al  método  estático 
PreferenceManager.getDefaultSharedPreferences()​ .  Esto  devuelve  el  objeto 
SharedPreferences  que  contiene  todos  los  pares  clave-valor  asociados  con  los 
objetos ​Preference​ usados en tu P​ referenceActivity​ . 

SharedPreferences​sharedPref = 
P
​referenceManager​
.getDefaultSharedPreferences(​this​
); 
String​syncConnPref = 
sharedPref.getString(​SettingsActivity​
.KEY_PREF_SYNC_CONN, " ); 
​"​
   
Uno  de  los  ​primeros  pasos  del  diseño  y  desarrollo  de  una  aplicación  Android  es 
determinar ​lo que los usuarios son capaces de ver y hacer​ con la aplicación.  

Una  vez  que  sepas  con  qué  tipo  de  datos  están  interactuando  los  usuarios  en  la 
aplicación,  el  siguiente  paso es ​diseñar las interacciones que les permitirán ​navegar 
a  través,  hacia  dentro  y  hacia  atrás  de  las  diferentes  piezas  de  ​contenido  dentro  de 
la aplicación​. 

Navegación eficaz 
Una  forma  de  facilitar  el  acceso  a  toda  la  gama  de 
pantallas  de  una  aplicación  es  ​presentar  una 
navegación jerárquica​.  

● navegación  descendente​,  permitiendo  a  los 

usuarios  descender  una  jerarquía  de  pantallas  hasta 
una pantalla hija 
● navegación  lateral​,  permitiendo  a  los  usuarios 
acceder a pantallas hermanas (siblings). 
 
5. ¿Qué  tipos  de  pantallas  hermanas  podemos  encontrar  en  una  aplicación 
Android?  Proporciona  un  ejemplo  real  (app  real  de  Android,  pon  una  imagen) 
de  cada  una  de  ellas  e  indica  qué patrón de navegación lateral se utiliza y por 
qué. 

Hay  dos  tipos  de  pantallas  de  hermanas:  pantallas  ​relacionadas  con  la  colección  ​y 
relacionadas  con  la  sección​.  Las  pantallas  relacionadas  con  la  colección 
representan  elementos  individuales  en  la  colección  representada  por  el  padre.  Las 
pantallas  relacionadas  con  la  sección  representan  diferentes  secciones  de 
información  sobre  el  padre.  Por  ejemplo,  una  sección  puede  mostrar  información 
textual  sobre  un  objeto,  mientras  que  otra  puede  proporcionar  un  mapa  de  la 
ubicación  geográfica  del  objeto.  El  número  de  pantallas relacionadas con la sección 
para un padre determinado es generalmente pequeño. 

Ejemplo  de  pantallas  relacionadas  por  sección:  En  Instagram,  al  acceder  a  un 
usuario  desde  la  lista  de  seguidos  puedes  ver  distintas  secciones  de  su  perfil 
representadas  como  pestañas.  Estas  son  un  mosaico  de  todas  sus  fotos,  una  lista 
detallada de sus fotos y un mosaico de fotos en las que ha sido etiquetado. 
  

Ejemplo  de  pantalla  relacionada  por  la  colección:  En  Instagram,  si  desde  la  lista  de 
fotos  de  un  usuario  presionas  una  concreta  puedes  ver  el  detalle  de  la  foto 
incluyendo comentarios, quién dio me gusta a la foto y quién está etiquetado. 

 
 6. Indica  (y  explica  por  qué)  qué  patrón  de  navegación lateral se adapta mejor a 
estos datos: 
a. Una colección de fotos 
b. Una colección de contactos 
c. Tres  pantallas  de  información  complementaria  acerca  de  un  punto 
turístico:  (1)  descripción  textual,  (2)  un  mapa interactivo, y (3) una lista 
de atracciones cercanas. 
d. Días del calendario 
 
a. Una  lista o rejilla en la que se pueda apreciar bien una vista previa de las fotos 
que  permita  distinguir  unas de otras. Una vez en el detalle de la foto se podría 
utilizar  paginación  lateral  (swipe)  para  desplazarse  a  la  foto  siguiente  o 
anterior. 
b. Una  lista simple de desplazamiento vertical que muestre el nombre o una foto 
del contacto. También podría haber pestañas para distintas categorías. 
c. Pestañas  que  permitan  moverse  entre  las  secciones.  Es  útil  ya  que  es  una 
pequeña cantidad de pantallas relacionadas por sección. 
d. Paginación  horizontal  (swipe)  ya  que  es  intuitivo  en  pantallas  relacionadas 
por colección que tienen un orden natural. 
 
 
7. ¿Qué es la lista de navegación drill-down? 

La  navegación  profunda,  basada  en  listas,  conocida  como  navegación  de  lista 
drill-down,  donde  las  listas  conducen  a  más  listas  que  conducen  a  más  listas, 
normalmente  es  ineficiente  y  engorrosa.  La  cantidad  de  toques  requeridos  para 
acceder  a una parte del contenido con este tipo de navegación es generalmente muy 
alta,  conllevando  una  experiencia  de  usuario  deficiente,  especialmente  para  los 
usuarios en movimiento. 

   
 8. Define  la  navegación  temporal  y  ancestral  en  Android.  Explica  la  figura 
siguiente  de  acuerdo  con  estas  definiciones.  Por  favor,  indica  claramente  y 
con  cuidado  qué  ocurre  cuando  se  activa  cualquiera  de  este  tipo  de 
navegaciones en las siguientes pantallas. 

 
La  navegación  temporal  (botón Atrás) siempre lleva al usuario a la pantalla que le ha 
llevado  a la pantalla actual. Si se ha llegado a la pantalla actual desde una aplicación 
distinta,  el  botón  Atrás  volverá  a  la  anterior  aplicación.  Si  el  usuario  pulsa  Atrás 
suficientes veces, llegará a la pantalla Home. 
La  navegación  ancestral  (botón  Arriba)  lleva  al  usuario  más  arriba  en la jerarquía de 
pantallas  de  una  misma  aplicación.  Por  ejemplo,  si  se  pulsa  Arriba  en  la  vista  de 
detalles de un objeto, se irá a la lista de esa categoría de objetos. 
   
La navegación guía a los usuarios a través de las diferentes partes de la aplicación. 
https://material.io/guidelines/patterns/navigation.html#  
Organiza  la  estructura  de  la  aplicación  de  acuerdo  con  el  contenido y las tareas que 
se  desea  que  los  usuarios  vean.  Centra  la  atención en destinos relevantes mediante 
su  colocación  en  pestañas o en la barra de navegación, y quite énfasis del contenido 
no esencial mostrándolo en lugares menos prominentes. 
 
Patrones de navegación 
● Navegación embebida 
● Pestalas 
● Barra inferior de navegación 
● Panel lateral de navegación (navigation drawer) 
● Navegación anidada 
● Expansión del panel lateral de navegación 
● Panel lateral de navegación en cascada (escritorio) 
● Gestos 
 
Combinación de patrones de navegación 
● Navegación contextual 
● Navegación lateral y pestañas 
● Panel lateral de navegación anidado y pestañas (escritorio) 
 
9. ¿Qué  es  un  panel  lateral  de  navegación?  ¿Para  qué  se  recomienda? 
Proporciona  un  ejemplo  real  de  una  aplicación  de  usarlo  (pon  una  imagen). 
¿Puedes entender por qué lo usa la aplicación? 
Es  un  panel  que  no se muestra normalmente y que aparece de un lateral al pulsar un 
botón.  Cuando  no  hay  espacio  suficiente  para  soportar pestañas, un panel lateral es 
una buena alternativa.  
 
Apropiado para estas jerarquías: 
● La navegación lateral 
●Los padres con hermanos (siblings) o compañeros (peers) 
 
Recomendado para: 
● Las aplicaciones con muchos puntos de vista de alto nivel 
● Permitir una navegación rápida entre vistas no relacionados 
● Estructuras de navegación profundas 
● Reducir la visibilidad de los destinos poco frecuentes 
 
 
 
Los  pasos  normales  para  definir  una  navegación  eficaz 
son: 
1. Identificar las pantallas y sus relaciones 
2. Considerar múltiples tamaños de pantallas 
3. Proporcionar navegación Descendente y Lateral 
4. Proporcionar navegación Ancestral y Temporal 
5. Juntar todo 
 
El producto final de este proceso es un mapa de navegación. 
 
10. Analiza  la  aplicación  Gmail  en  tu  dispositivo  Android  y  dibuja  su  mapa  de 
navegación  siguiendo  los  pasos  anteriores  (excepto  el  paso  2):  pantallas  y 
relaciones,  navegación  lateral  &  descendiente,  y  navegación  ancestral  & 
temporal. 

Patrones y antipatrones 
La  interfaz  de  usuario  debe  ser  cuidadosamente  diseñada  para  ser  eficaz  y  no 
convertirse en un estorbo. 
Las  formas  de  navegación  están  perfectamente  definidas  en  Android.  No  se  debe 
reinventar  la  rueda.  Los  usuarios  se  perderán  y  se  sentirán  frustrados  debido  a  que 
la aplicación no se comporta como esperaban (al estilo de Android). 
 
  
 
11. ¿Qué  es  un  anti  patrón?  Definir  y  explicar  todos  los  antipatrones  de 
navegación  relacionados  con  el  panel  lateral  de  navegación  (navigation 
drawer).  Si  es  posible,  proporciona  un  ejemplo  real  para  ilustrar  uno  de  ellos 
(pon una imagen). 
 
Un  antipatrón  es  un  error  común  que  puede  darse  al  desarrollar  una  característica 
concreta, sobre todo en desarrolladores con poca experiencia. 
- El  panel  lateral  siempre  debe  representar  el  nivel  más  alto  de  la  jerarquía  de 
navegación. 

 
- El botón Atrás no debería moverse entre secciones del panel lateral. Cada 
sección es independiente de la otra. 
 - No se deben poner varios niveles de navegación en el panel lateral. Cada 
botón del panel lateral debe llevarte a una nueva pantalla. 
- El panel lateral debe ser accesible desde cualquier pantalla a la que se haya 
llegado desde el panel lateral. No debería aparecer el botón Arriba en ninguna 
de esas pantallas. 
 
Fuente: ​https://www.youtube.com/watch?v=Sww4omntVjs  
 
12. ¿Se  considera  una  buena  práctica en aplicaciones Android solicitar el registro 
de usuario lo primero? 
 
No  se  considera  buena  práctica  ​y  puede  afectar  negativamente  a  la  experiencia  de 
los nuevos usuarios de la aplicación. 

Fuente: ​https://www.youtube.com/watch?v=pEGWcMTxs3I