Este documento presenta consejos para diseñar experiencias de usuario óptimas para tabletas Android. Proporciona recomendaciones sobre diseños horizontales, notificaciones enriquecidas, uso de imágenes, palpabilidad, temas visuales, barras de acción, fragmentos y funcionalidad de arrastrar y soltar. El objetivo es lograr "magia" en las tabletas aprovechando las capacidades únicas de la plataforma.

1. Suzanne Alexandra
Evangelista de la tecnología Android
Motorola Mobility
Consejos principales para Android UI
Cómo alcanzar la magia en los tablets
MOTOROLA y el logotipo estilizado son marcas de fábrica o marcas registradas de Motorola Trademark Holdings, LLC.
Todas las demás marcas comerciales son propiedad de sus respectivos dueños. © 2011 Motorola Mobility, Inc. Todos
los derechos reservados.

2. Brasil - #appsum11br
Argentina - #appsum11ar
México - #appsum11m
developer.motorola.com
Título de presentación Versión 1.0 24.02.09

4. Estamos en un espacio
completamente nuevo.
Traiga abordo los elementos apropiados.

5. Alcance la magia
01 MANTENGA EL DETALLE ERGONÓMICO
02 INVOLUCRE LOS SENTIDOS
03 USE UNA ESTÉTICA FABULOSA
04 HÁGALO EVIDENTE

6. Alcance la magia
01 MANTENGA EL DETALLE ERGONÓMICO
Diseños horizontales
Notificaciones enriquecidas
Tamaños de texto
02 INVOLUCRE LOS SENTIDOS
Imágenes
Palpabilidad
03 USE UNA ESTÉTICA FABULOSA
Temas, temas, temas
04 HÁGALO EVIDENTE
Barras de acción
Fragmentos
Función arrastrar y colocar

7. Haga de cuenta que sus usuarios
usan la orientación horizontal

8. Diseños horizontales
Los diseños horizontales por lo general requieren una distribución
especializada, en cualquier dispositivo.

9. Diseños horizontales
Mire lo que sucede en el tablet

10. Diseños horizontales
¿Qué salió mal?
alignParentLeft alignParentRight
Nada en el centro Imagen
pequeña

11. Diseños horizontales
Diseño para el tamaño de la pantalla Y la orientación

12. Diseños horizontales
El diseño ganador
centerHorizontal="true"
<RelativeLayout>
layout_alignLeft layout_alignRight

13. Diseños horizontales
Optimice la experiencia del usuario para pantallas panorámicas

14. Diseños horizontales
Evite el efecto océano extra ancho

15. Tamaños de texto
El texto pequeño (como las imágenes) no funcionará

16. Tamaños de texto
Mejores prácticas
Escala con sp
18 sp y más
Asegúrese de que los verdaderos
usuarios puedan leer el texto

17. Notificaciones enriquecidas
Un beneficio clave de Android sobre las demás plataformas
móviles
Su notificación de
aplicación

18. Notificaciones enriquecidas
Ejemplos de cuándo usar notificaciones enriquecidas
Cuando llega contenido nuevo
Cuando se reproducen medios

19. Notificaciones enriquecidas
En Honeycomb, dos pantallas de notificación
Bandeja
Emergente

20. Notificaciones enriquecidas
Use el formato Notification.Builder
Notification.Builder builder = new
Notification.Builder( this );
Como AlertDialog.Builder

21. Notificaciones enriquecidas
Cree la notificación que desee
builder.setSmallIcon(R.drawable.icon)
.setContentTitle(título)
.setContentText(texto)
.setContentIntent(pintent) // Un intento pendiente
.setLargeIcon(myBitmap)
;

22. Notificaciones enriquecidas
Codificación visual
setLargeIcon() setSmallIcon()
setContentTitle()
setContentText()

23. Notificaciones enriquecidas
Alcance la magia. Cree un botón interactivo
RemoteViews layout = new RemoteViews(
getPackageName(), R.layout.notification);
layout.setTextViewText(R.id.notification_title,
getString(R.string.app_name));
layout.setOnClickPendingIntent
(R.id.notification_button,
getDialogPendingIntent("Tapped") );
builder.setContent(layout);

24. Notificaciones enriquecidas
Estrategia para compatibilidad con versiones anteriores
private static boolean isHoneycomb =
android.os.Build.VERSION.SDK_INT > 10;
if (!isHoneycomb)
// inicie un intento de actividad
else
// inicie otra

25. Alcance la magia
01 MANTENGA EL DETALLE ERGONÓMICO
02 INVOLUCRE LOS SENTIDOS
Imágenes
Palpabilidad
03 USE UNA ESTÉTICA FABULOSA
04 HÁGALO EVIDENTE

26. La vista triunfa sobre los
demás sentidos.
Brain Rules
Dr. John Medina

27. Imágenes
Expréselo visualmente, hágalo atractivo

28. Imágenes
Las pantallas para dispositivos distintos requieren tamaños de imágenes
diferentes

29. Imágenes
Seleccione una estrategia de imagen
 ¿Una serie de imágenes y deje que Android gradúe
automáticamente el tamaño?
 ¿Personalizar una serie de recursos según los distintos tamaños y
densidades?
 ¿Captar la densidad más usada?
 ¿Recuperar dinámicamente imágenes en el tiempo de ejecución y la
graduación para el dispositivo?

30. Imágenes
Memoria frente a tamaño de archivo: un ejemplo
Ampliación automática
32 MB de memoria
324 KB de tamaño
Conjuntos de imágenes
23 MB de memoria
728 KB de tamaño

31. La ampliación automática consume
memoria.
Las configuraciones de imágenes
personalizadas aumentan el tamaño
del archivo.

32. Imágenes
Imágenes grandes de prueba en el tiempo de ejecución para
ahorrar memoria
BitmapFactory.Options options = new
BitmapFactory.Options();
options.inJustDecodeBounds = false;
options.inSampleSize = 4;
options.inScaled = true;
options.inTargetDensity = screenDensity;
Bitmap bitmap =
BitmapFactory.decodeResource(
getResources(),
R.drawable.clover, options);

33. Imágenes
Dónde colocar las imágenes y los iconos
Predeterminado, graduado
automáticamente
Iconos de alta resolución
Graduadas previamente
Hacer coincidir para la densidad
estilo con 3.0

34. Palpabilidad
Las tabletas están diseñadas para el tacto

35. Palpabilidad
Asegúrese de poder pulsar todos los objetivos

36. Palpabilidad
Asegúrese de poder pulsar todos los objetivos
public View getView( int position,
View convertView, ViewGroup parent) {
ImageView i = new ImageView(mContext);
i.setImageResource(mImageIds[position]);
i.setLayoutParams(new Gallery.LayoutParams(
300, 200));
i.setScaleType(ImageView.ScaleType.FIT_XY);
i.setBackgroundResource(
mGalleryItemBackground);
return i;
}

37. Palpabilidad
Observe cómo se transfieren las imágenes a través de los
dispositivos
160 dpi - medio
16:9 relación de aspecto

38. Alcance la magia
01 MANTENGA EL DETALLE ERGONÓMICO
02 INVOLUCRE LOS SENTIDOS
03 USE UNA ESTÉTICA FABULOSA
Temas, temas, temas
04 HÁGALO EVIDENTE

39. Temas
Encuádrelos en el dispositivo o destáquelos

40. Temas
Honeycomb tiene dos temas holográficos nuevos
Theme.Holo
Theme.Holo.Light

41. Temas
Pero requieren aceleración del hardware
<application android:icon="@drawable/icon"
android:label="@string/app_name"
android:hardwareAccelerated="true" >
Sólo disponibles con
Honeycomb

42. Temas
Pero usted podría apuntar a varias versiones Android
<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

43. Temas
Cree varios temas para las versiones Android
<style … parent=
"@android:style/Theme">
<style … parent=
"@android:style/Theme.Holo">

44. Asegúrese de que todas las llamadas de
API que usa
funcionen con todas las versiones de API
que soporta.

45. Alcance la magia
01 MANTENGA EL DETALLE ERGONÓMICO
02 INVOLUCRE LOS SENTIDOS
03 USE UNA ESTÉTICA FABULOSA
04 HÁGALO EVIDENTE
Barras de acción
Fragmentos
Función arrastrar y soltar

46. Barra de acción
Apronte sus características de aplicación
Diálogo de
Icono de cuadro
aplicación desplegable
Vista de Elementos de
acción acción

47. Barras de acción
Códigos visuales
<item android:showAsAction="true" … >
onCreateOptionsMenu()
android:actionLayout onOptionsItemSelected()
android:actionViewClass

48. Barras de acción
Paso 1. Apuntar a API nivel 11
<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

49. Barras de acción
Paso 2. Colocar los elementos del menú en la barra de acción
<item android:id="@+id/favorite"
android:title="@string/favorite"
android:icon="@drawable/ic_menu_star"
android:showAsAction="ifRoom" />

50. Barras de acción
Paso 3. Manejar la selección de opciones de la manera habitual
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.favorite:
// do something
return true;
…
}

51. Barras de acción
En XOOM y smartphone

52. Barras de acción
Alcance la magia, dé estilo
<style name="MyTheme"
parent="android:style/Theme.Holo" >
<item name="android:actionBarStyle">
@style/ActionBar</item>
</style>
<style name="ActionBar"
parent="android:style/Widget.Holo.ActionBar">
<item name="android:background">
@drawable/my_background</item>
</style>

53. Barras de acción
Alcance la magia, agregue un cuadro de diálogo
Use AlertDialog.Builder
Cree un cuadro de diálogo
personalizado en XML
Use un DialogFragment

54. Barras de acción
Pero ejecute los elementos Honeycomb sólo en Honeycomb
private static boolean isHoneycomb =
android.os.Build.VERSION.SDK_INT > 10;
if (isHoneycomb) {
// cree el cuadro de diálogo personalizado aquí
}

55. Fragmentos
Úselos para mostrar más contendido y características, más fluidamente

56. Fragmentos
Puede usar varios diseños
Los más
comunes

57. Fragmentos
La distribución del fragmento inicial es el misma a lo largo de las
orientaciones

58. Fragmentos
Pero puede mostrar u ocultar vistas

59. Fragmentos
En su Activity principal, encuentre sus fragmentos
Fragment gridFrag =
getFragmentManager().
findFragmentById(R.id.photogrid);
Fragment photoFrag =
getFragmentManager().
findFragmentById(R.id.the_frag);

60. Fragmentos
Verifique la orientación y ajuste las vistas
private boolean photoInline = false;
photoInline = (photoFrag != null &&
getResources().getConfiguration().orientation
== Configuration.ORIENTATION_LANDSCAPE);
if (photoInline) {
// haga algo
} else if ( photoFrag != null ) {
getView().setVisibility(View.GONE);
}

61. Fragmentos
Mejor todavía
Transición animada

62. Fragmentos
Alcance la magia: anime la pantalla del fragmento – paso 1
<set>
<objectAnimator
xmlns:android=
http://schemas.android.com/apk/res/android
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="-1280"
android:valueTo="0"
android:duration="500" />
</set>

63. Fragmentos
Alcance la magia: anime la pantalla del fragmento – paso 2
FragmentTransaction ft = getFragmentManager
().beginTransaction();
ft.setCustomAnimations( R.anim.slide_in_left,
R.anim.slide_out_right );
DetailsFragment newFrag =DetailsFragment.newInstance();
ft.replace(R.id.details_fragment_container, newFrag,
"detailFragment");
ft.commit();

64. Arrastre y solte
Crea participación física inmediata, directa

65. Arrastre y solte
Tiene varios estados de eventos
ACTION_DRAG_STARTED
ACTION_DRAG_ENTERED

66. Arrastre y solte
Tiene varios estados de eventos
ACTION_DROP
ACTION_DRAG_ENDED

67. Arrastre y solte
Observe cómo funciona a lo largo de los fragmentos

68. Arrastre y solte
Para comenzar, llame a startDrag()
 Seleccionar un gesto que inicie un arrastre: ¿clic largo?
 Crear un oyente: OnLongClickListener()
 Crear objetos de ClipData y DragShadowBuilder
 Iniciar el arrastre
public boolean onLongClick(View v) {
ClipData data = ClipData.newPlainText("foo","bar");
DragShadowBuilder shadowBuilder = new DragShadowBuilder(v);
v.startDrag(data, shadowBuilder, v, 0);
return true;
}

69. Arrastre y solte
Luego continúe con un listener y onDrag()
 Crear un listener de arrastre (implementar OnDragListener)
 Sobrecargue onDrag y maneje los eventos
class BoxDragListener implements OnDragListener {
public boolean onDrag(View self, DragEvent event) {
if (event.getAction() ==
DragEvent.ACTION_DRAG_STARTED) {
// haga algo
}
// maneje otros eventos
}

70. ¿Desea
formular
alguna
pregunta?
Brasil - #appsum11br
Argentina - #appsum11ar
México - #appsum11mx
community.developer.motorola.com

71. gracias

72. LEGAL
INFORMACIÓN DE LA LICENCIA
Con excepción de dónde se especifique, el código de fuente de muestra escrito por Motorola Mobility Inc. y a usted suministrado tiene la licencia que a
continuación se describe.
Copyright © 2010-2011, Motorola, Inc. Todos los derechos reservados, salvo que se indique explícitamente lo contrario.
Se permite la redistribución y el uso en formas de fuente y binaria, con o sin modificación, siempre y cuando se cumpla con las siguientes condiciones:
Las redistribuciones del código fuente deben conservar el aviso de derechos de autor arriba mencionado, la presente lista de condiciones y el siguiente descargo de
responsabilidad.
Las redistribuciones en forma binaria deben reproducir el aviso de derechos de autor arriba mencionado, la presente lista de condiciones y el siguiente descargo de
responsabilidad en la documentación y/u otros materiales suministrados con la distribución.
Ni el nombre de Motorola, Inc. ni los nombres de sus distribuidores pueden usarse para avalar o promover productos que deriven de este software sin previa
autorización específica por escrito.
EL PRESENTE SOFTWARE SE SUMINISTRA POR LOS TITULARES DE LOS DERECHOS DE AUTOR Y CONTRIBUYENTES EN EL ESTADO "EN QUE SE
ENCUENTRA" Y SE RENUNCIA A TODA RESPONSABILIDAD DE GARANTÍA IMPLÍCITA O EXPLÍCITA, A TÍTULO ENUNCIATIVO, LAS GARANTÍAS
IMPLÍCITAS DE COMERCIALIZACIÓN Y DE APTITUD PARA UN PROPÓSITO PARTICULAR. EN NINGÚN CASO PODRÁ EL TITULAR DE LOS DERECHOS
DE AUTOR NI LOS CONTRIBUYENTES SER RESPONSABLE POR NINGÚN DAÑO Y PERJUICIO DIRECTO, INDIRECTO, INCIDENTAL, ESPECIAL,
PUNITIVO, O CONSECUENCIAL (A TÍTULO ENUNCIATIVO DE ABASTECIMIENTO DE BIENES O SERVICIOS DE SUSTITUCIÓN; PÉRDIDA DE USO,
DATOS O GANANCIAS O INTERRUPCIÓN DE ACTIVIDADES) INDEPENDIENTEMENTE DE SU ORIGEN Y DE TODA TEORÍA DE RESPONSABILIDAD, YA
SEA EN EL CONTRATO, RESPONSABILIDAD ESTRICTA O POR LESIÓN JURÍDICA (INCLUSO NEGLIGENCIA O DE OTRO MODO) QUE SURJAN DE
ALGUNA MANERA DEL USO DE ESTE SOFTWARE, INCLUSO SI SE ADVIRTIÓ DE LA POSIBILIDAD DE DICHO DAÑO.
Otro código fuente mostrado en la presentación podrá ofrecerse bajo otras licencias.
Apache 2.0
Copyright © 2010, Proyecto Código Abierto Android. Todos los derechos reservados, salvo indicación expresa en contrario.
Con licencia de Apache, Versión 2.0 (la "Licencia"); no podrá usar este archivo, salvo que cumpla con lo que establece la licencia. Puede obtener una copia de la
licencia en http://www.apache.org/licenses/LICENSE-2.0.
Salvo que lo exija la legislación vigente o se preste conformidad por escrito, el software se distribuye bajo licencia, "EN EL ESTADO EN QUE SE ENCUENTRA" SIN
GARANTÍAS DE NINGÚN TIPO, explícitas o implícitas. Consulte la Licencia para ver los permisos y las limitaciones que rigen para la Licencia según el idioma
específico.
Creative Commons 3.0 Attribution License
Partes de esta presentación se reprodujeron de un trabajo creado y compartido con Google (http://code.google.com/policies.html) y se usaron conforme a los
términos descritos en Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/).