Consejos principales para Android UI Cómo alcanzar la magia en los tablets

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.

Brasil - #appsum11br
Argentina - #appsum11ar
México - #appsum11m

developer.motorola.com

Título de presentación Versión 1.0 24.02.09

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

Alcance la magia

01 MANTENGA EL DETALLE ERGONÓMICO

02 INVOLUCRE LOS SENTIDOS

03 USE UNA ESTÉTICA FABULOSA

04 HÁGALO EVIDENTE

Alcance la magia
Diseños horizontales
Notificaciones enriquecidas
Tamaños de texto

Imágenes
Palpabilidad

Temas, temas, temas

04 HÁGALO EVIDENTE
Barras de acción
Fragmentos
Función arrastrar y colocar

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

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

Mire lo que sucede en el tablet

¿Qué salió mal?

alignParentLeft alignParentRight

Nada en el centro Imagen
pequeña

Diseño para el tamaño de la pantalla Y la orientación

El diseño ganador

centerHorizontal="true"

<RelativeLayout>
layout_alignLeft layout_alignRight

Optimice la experiencia del usuario para pantallas panorámicas

Evite el efecto océano extra ancho

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

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

Un beneficio clave de Android sobre las demás plataformas
móviles

Su notificación de
aplicación

Ejemplos de cuándo usar notificaciones enriquecidas

Cuando llega contenido nuevo

Cuando se reproducen medios

En Honeycomb, dos pantallas de notificación

Bandeja

Emergente

Use el formato Notification.Builder

Notification.Builder builder = new
Notification.Builder( this );

Como AlertDialog.Builder

Cree la notificación que desee

builder.setSmallIcon(R.drawable.icon)
.setContentTitle(título)
.setContentText(texto)
.setContentIntent(pintent) // Un intento pendiente
.setLargeIcon(myBitmap)
;

Codificación visual

setLargeIcon() setSmallIcon()

setContentTitle()
setContentText()

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

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

Alcance la magia

Imágenes
Palpabilidad


04 HÁGALO EVIDENTE

La vista triunfa sobre los
demás sentidos.

Brain Rules
Dr. John Medina

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

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

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?

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

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

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

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

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

Palpabilidad
Asegúrese de poder pulsar todos los objetivos

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

Palpabilidad
Observe cómo se transfieren las imágenes a través de los
dispositivos

160 dpi - medio
16:9 relación de aspecto

Alcance la magia


Temas, temas, temas

04 HÁGALO EVIDENTE

Temas
Encuádrelos en el dispositivo o destáquelos

Temas
Honeycomb tiene dos temas holográficos nuevos

Theme.Holo

Theme.Holo.Light

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

Temas
Pero usted podría apuntar a varias versiones Android

<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

Temas
Cree varios temas para las versiones Android

<style … parent=
"@android:style/Theme">

<style … parent=
"@android:style/Theme.Holo">

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

Alcance la magia



04 HÁGALO EVIDENTE
Barras de acción
Fragmentos
Función arrastrar y soltar

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

Barras de acción
Códigos visuales

<item android:showAsAction="true" … >

onCreateOptionsMenu()

android:actionLayout onOptionsItemSelected()
android:actionViewClass

Barras de acción
Paso 1. Apuntar a API nivel 11

<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

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

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;
…
}

Barras de acción
En XOOM y smartphone

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>

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

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

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

Fragmentos
Puede usar varios diseños

Los más
comunes

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

Fragmentos
Pero puede mostrar u ocultar vistas

Fragmentos
En su Activity principal, encuentre sus fragmentos

Fragment gridFrag =
getFragmentManager().
findFragmentById(R.id.photogrid);

Fragment photoFrag =
getFragmentManager().
findFragmentById(R.id.the_frag);

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);
}

Fragmentos
Mejor todavía

Transición animada

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>

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();

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

Arrastre y solte
Tiene varios estados de eventos

ACTION_DRAG_STARTED

ACTION_DRAG_ENTERED

Arrastre y solte
Tiene varios estados de eventos

ACTION_DROP
ACTION_DRAG_ENDED

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

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

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
}

¿Desea
formular
alguna

pregunta?
Brasil - #appsum11br
Argentina - #appsum11ar
México - #appsum11mx

community.developer.motorola.com

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

Consejos principales para Android UI Cómo alcanzar la magia en los tablets

Más contenido relacionado

La actualidad más candente (9)

Destacado (20)

Similar a Consejos principales para Android UI Cómo alcanzar la magia en los tablets (20)

Más de Motorola Mobility - MOTODEV (20)

Último (20)

Consejos principales para Android UI Cómo alcanzar la magia en los tablets