1. Code
  2. Mobile Development
  3. Android Development

Consejo Rápido: Presentando los Iconos Adaptados y Atajos Fijos de Android O

Scroll to top
This post is part of a series called Quick Tips: New UI Features in Android O.
Quick Tip: Working With Custom Fonts in Android O

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En esta serie de consejos rápidos hemos estado viendo algunos de los próximos cambios de UI con los que puedes comenzar a trabajar el día de hoy, vía la Vista Previa de Desarrollador Android O.

En este artículo final en la serie, vamos a ver cómo puedes crear iconos de lanzador que se integran prefectamente con la UI más amplia del dispositivo, y cómo crear atajos que habiliten al usuario a saltar directamente a las acciones más importantes de tu aplicación, directamente desde su pantalla de inicio.

Creando Iconos Adaptados

Con la liberación de Android O, los Fabricantes de Equipo Original (FEO) tales como HTC y Samsung van a tener la opción de proporcionar una máscara que el sistema aplicará a todos los iconos lanzadores de aplicación. Las máscaras aseguran que todos los iconos que aparecen en ese dispositivo tienen la misma forma: si el FEO proporciona una máscara circular entonces todos los iconos lanzadores de aplicación serán circulares, y si proporciona una máscara cuadrada redondeada (o "cuadracícrulo"), entonces todos los iconos tendrán esquinas redondeadas.

Estos iconos adaptados están pensados para proporcionar una apariencia y sensación más consistente a través del lanzador del dispositivo y en otras áreas en donde se presentan prominentemente iconos de lanzador, tales como los diálogos de Ajustes y compartir de tu dispositivo.

Para asegurar que tus iconos de lanzador se muestran correctamente sin importar qué máscara esté siendo usada, necesitarás hacer unos cuantos ajustes.

Antes de que comiences, revisa que el atributo android:icon de tu Manifest esté apuntando a la imagen que quieres usar como el icono de tu lanzador:

1
<application
2
  android:label="@string/app_name"
3
  android:allowBackup="true"
4
  android:icon="@mipmap/ic_launcher"
5
  android:supportsRtl="true"
6
  android:theme="@style/AppTheme">

Cada icono adaptado consiste de una capa de fondo, una capa de primer plano, y una máscara. Esta última es proporcionada por el FEO, pero necesitarás proporcionar las capas de fondo y primer plano. Para mejores resultados, estas capas deberían ser PNGs sin ninguna sombra de máscara o fondo. Ambas capas deben ser de 108x108 dpi, pero los 72x72 dpi internos es el contenido interno que aparecerá dentro de la ventana de visualización interna, ya que el sistema reserva los 36 dpi externos alrededor del icono para efectos visuales, tales como pulsaciones o parallax.

Crea tus capas de fondo y primer plano y después agrégalas a tu proyecto. Después, crea un archivo res/mipmap-anydpi/ic_launcher.xml y úsalo para referenciar los dos drawables que quieres usar como tus capas de fondo y primer plano, por ejemplo:

1
<?xml version="1.0" encoding="utf-8"?>
2
  https://schemas.android.com/apk/res/android">
3
      <foreground android:drawable="@mipmap/ic_foreground"/>
4
      <background android:drawable="@mipmap/ic_background"/>
5
  </adaptive-icon>
Test your adaptive icons across various Android O AVDsTest your adaptive icons across various Android O AVDsTest your adaptive icons across various Android O AVDs

Dependiendo del diseño de tu icono particular, es posible que las máscaras circulares recorten algún contenido importante. Si sospechas que las máscaras circulares podrían ser un problema para tu icono, entonces puedes crear un icono circular dedicado que el sistema usará siempre que esté aplicando una máscara circular.

Crea este icono circular, agrégalo a tu proyecto, y después referencía esta versión de tu icono en el Manifest de tu proyecto, usando el atributo android:roundIcon.

1
<application
2
  android:label="@string/app_name"
3
  android:allowBackup="true"
4
  android:icon="@mipmap/ic_launcher"
5
  android:roundIcon="@mipmap/ic_launcher_round"
6
  android:supportsRtl="true"
7
  android:theme="@style/AppTheme">

Fijando Atajos

Algunos dispositivos ejecutando Android permitirán a los usuarios fijar atajos de aplicación a su lanzador. Estos atajos aparecen como iconos separados que el usuario lanza pulsando, en la misma manera exacta en que interactúan con iconos lanzadores de aplicación.

Cada atajo de aplicación referenciará uno o más Intents, que cada uno lanza una acción específica dentro de tu aplicación. Esto hace de los atajos fijados una gran forma de permitir a los usuarios saltar a las tareas y contenidos más importantes de tu aplicación justo desde la pantalla de inicio. Por ejemplo, podrías crear un atajo que lleve al usuario al último punto de guardado en tu aplicación de juego, o su contacto más frecuentemente usado.

No hay límite para el número de atajos fijados que puedes ofrecer, aunque para asegurar que tu aplicación no toma el control sobre el lanzador del usuario es recomendado que solo ofrezcas cuatro atajos en cualquier momento.

Para ofrecer uno o más atajos fijos, primero necesitarás crear una instancia de ShortcutManager:

1
ShortcutManager myShortcutManager =
2
       context.getSystemService(ShortcutManager.class);

Después, revisa que el dispositivo del usuario realmente soporta atajos fijos:

1
if (mShortcutManager.isRequestPinShortcutSupported()) {

Esto devuelve TRUE si el lanzador por defecto soporta requestPinShortcut.

Asumiendo que el dispositivo soporta atajos en aplicación, puedes entonces crear un objeto ShortcutInfo que contenga un ID, un intent, y una etiqueta para este atajo  particular.

1
ShortcutInfo pinShortcutInfo = ShortcutInfo.Builder(context, "my-shortcut");
2
  .setShortLabel(getString(R.string.shortcut_label))    
3
  .setLongLabel(getString(R.string.shortcut_long_label))
4
  .setIcon(Icon.createWithResource(context, R.mipmap.ic_launcher))
5
  .setIntent(new Intent(Intent.ACTION_VIEW,
6
                  Uri.parse("https://www.google.com")))
7
   .build();

Finalmente, fijas el atajo llamando requestPinShortcut(). El lanzador por defecto recibirá la petición y después pedirá al usuario aprobar o negar la operación de fijado. Si tu aplicación necesita saber si la operación de fijado fue un éxito, entonces en este punto también puedes crear un objeto PendingIntent.

1
//Here, we’re assuming that our project already includes a createShortcutResultIntent() method, which will return the broadcast intent//

2
Intent pinnedShortcutCallbackIntent =
3
           createShortcutResultIntent(pinShortcutInfo);
4
5
PendingIntent successCallback = PendingIntent.createBroadcast(context, 0,
6
           pinnedShortcutCallbackIntent);
7
mShortcutManager.requestPinShortcut(pinShortcutInfo,
8
           successCallback.getIntentSender());

Este PendingIntent solo enviará un resultIntent si la operación de fijado fue un éxito. Tu aplicación no recibirá una notificación si la operación falla.

Una vez que el pin ha sido creado, puedes actualizar su contenido usando el método updateShortcuts(). Solo sé consciente de que el contenido o las acciones fijas usualmente tienen una duración. En nuestro ejemplo de juego, el usuario podría alcanzar el final del juego o borrar su archivo guardado, en cuyo punto tu atajo fijo no tendrá ningún contenido para mostrar.

Mientras que es tentador reciclar un atajo fijo modificando su propósito original, es mucho menos confuso para el usuario si deshabilitas atajos que ya no son relevantes. Si un atajo fijo llega al final de su vida, entonces puedes deshabilitarlo llamando disableShortcuts().

Conclusión

En esta serie vimos algunas de las actualizaciones de la interfaz de usuario de Android O con las que puedes comenzar a experimentar hoy instalando la primera Vista Previa de Desarrollador. En la parte uno, te mostré cómo crear texto que se auto escala basado en la configuración actual de pantalla; en la parte dos vimos echamos un vistazo a agregar fuentes personalizadas a tus proyectos Android, y en este artículo final en la serie cubrimos iconos adaptados y atajos fijos.

Mientras estás aquí, ¡revisa algunos de los otros artículos sobre desarrollo de aplicaciones Android!