Usa burbujas para permitir que los usuarios participen en conversaciones

Las burbujas permiten que los usuarios vean las conversaciones y participen en ellas con más facilidad.

Figura 1: Una burbuja de chat.

Las burbujas están integradas en el sistema de notificaciones. Flotan sobre el contenido de otra app y siguen al usuario adonde mueva el dedo. Los usuarios pueden expandir las burbujas para mostrar el contenido de la app y, luego, interactuar con él, y pueden contraerlas cuando no las usan.

Cuando el dispositivo está bloqueado o la pantalla siempre activa está habilitada, las burbujas aparecen del mismo modo que las notificaciones.

Las burbujas se pueden inhabilitar. Cuando aparece la primera en una app, se muestra un diálogo de permisos con dos opciones:

  • Bloquea todas las burbujas de tu app. Las notificaciones no se bloquean, pero nunca aparecen como burbujas.
  • Permitir todos los cuadros de la app: Todas las notificaciones enviadas con BubbleMetaData aparecen como cuadros.

La API de burbujas

Las burbujas se crean con la API de notificaciones, por lo que envías la notificación como siempre. Si quieres que tu notificación se muestre como una burbuja, adjúntale datos adicionales.

La vista expandida de una burbuja se crea a partir de una actividad que elijas. Configura la actividad para que se muestre correctamente como una burbuja. La actividad se debe poder cambiar de tamaño y debe estar incorporada. En cambio, si falta alguno de estos requisitos, se muestra como una notificación.

En el siguiente código, se demuestra cómo implementar una burbuja:

<activity
  android:name=".bubbles.BubbleActivity"
  android:theme="@style/AppTheme.NoActionBar"
  android:label="@string/title_activity_bubble"
  android:allowEmbedded="true"
  android:resizeableActivity="true"
/>

Si tu app muestra varias burbujas del mismo tipo, como diferentes conversaciones de chat con distintos contactos, la actividad debe poder iniciar más de una instancia. En los dispositivos que ejecutan Android 10 y versiones anteriores, las notificaciones no se muestran como burbujas, a menos que establezcas de forma explícita documentLaunchMode en "always". A partir de Android 11, no necesitas configurar de forma explícita este valor, ya que el sistema establece automáticamente el documentLaunchMode de todas las conversaciones en "always".

Para enviar una burbuja, sigue estos pasos:

  1. Crea una notificación como lo harías normalmente.
  2. Llama a BubbleMetadata.Builder(PendingIntent, Icon) o BubbleMetadata.Builder(String) para crear un objeto BubbleMetadata.
  3. Usa setBubbleMetadata() para agregar los metadatos a la notificación.
  4. Si segmentas tu app para Android 11 o versiones posteriores, asegúrate de que los metadatos o la notificación de burbuja hagan referencia a un acceso directo de uso compartido.
  5. Modifica tu app para no cancelar las notificaciones que aparecen como cuadros. Para verificar si la actividad de notificación se inicia como una burbuja, llama a Activity#isLaunchedFromBubble(). Si cancelas una notificación, se quitará la burbuja de la pantalla. Cuando abres una burbuja, se oculta automáticamente la notificación asociada.

Estos pasos se muestran en el siguiente ejemplo:

Kotlin

// Create a bubble intent.
val target = Intent(context, BubbleActivity::class.java)
val bubbleIntent = PendingIntent.getActivity(context, 0, target, 0 /* flags */)
val category = "com.example.category.IMG_SHARE_TARGET"

val chatPartner = Person.Builder()
    .setName("Chat partner")
    .setImportant(true)
    .build()

// Create a sharing shortcut.
val shortcutId = generateShortcutId()
val shortcut =
   ShortcutInfo.Builder(mContext, shortcutId)
       .setCategories(setOf(category))
       .setIntent(Intent(Intent.ACTION_DEFAULT))
       .setLongLived(true)
       .setShortLabel(chatPartner.name)
       .build()

// Create a bubble metadata.
val bubbleData = Notification.BubbleMetadata.Builder(bubbleIntent,
            Icon.createWithResource(context, R.drawable.icon))
    .setDesiredHeight(600)
    .build()

// Create a notification, referencing the sharing shortcut.
val builder = Notification.Builder(context, CHANNEL_ID)
    .setContentIntent(contentIntent)
    .setSmallIcon(smallIcon)
    .setBubbleMetadata(bubbleData)
    .setShortcutId(shortcutId)
    .addPerson(chatPartner)

Java

// Create a bubble intent.
Intent target = new Intent(mContext, BubbleActivity.class);
PendingIntent bubbleIntent =
    PendingIntent.getActivity(mContext, 0, target, 0 /* flags */);

private val CATEGORY_TEXT_SHARE_TARGET =
    "com.example.category.IMG_SHARE_TARGET"

Person chatPartner = new Person.Builder()
        .setName("Chat partner")
        .setImportant(true)
        .build();

// Create a sharing shortcut.
private String shortcutId = generateShortcutId();
ShortcutInfo shortcut =
   new ShortcutInfo.Builder(mContext, shortcutId)
       .setCategories(Collections.singleton(CATEGORY_TEXT_SHARE_TARGET))
       .setIntent(Intent(Intent.ACTION_DEFAULT))
       .setLongLived(true)
       .setShortLabel(chatPartner.getName())
       .build();

// Create a bubble metadata.
Notification.BubbleMetadata bubbleData =
    new Notification.BubbleMetadata.Builder(bubbleIntent,
            Icon.createWithResource(context, R.drawable.icon))
        .setDesiredHeight(600)
        .build();

// Create a notification, referencing the sharing shortcut.
Notification.Builder builder =
    new Notification.Builder(mContext, CHANNEL_ID)
        .setContentIntent(contentIntent)
        .setSmallIcon(smallIcon)
        .setBubbleMetadata(bubbleData)
        .setShortcutId(shortcutId)
        .addPerson(chatPartner);

Si tu app está en primer plano cuando se envía una burbuja, la importancia se ignorará y la burbuja se mostrará siempre, a menos que el usuario bloquee las notificaciones o las burbujas de tu app.

Cómo crear una burbuja expandida

Puedes configurar tu burbuja para presentarla en estado expandido automáticamente. Te recomendamos que solo uses esta función si el usuario realiza una acción que genera una burbuja, como presionar un botón para iniciar un nuevo chat. En este caso, también tiene sentido suprimir la notificación inicial enviada cuando se crea una burbuja.

Puedes usar los siguientes métodos para configurar indicadores que permitan estos comportamientos: setAutoExpandBubble() y setSuppressNotification().

En el siguiente ejemplo, se muestra cómo configurar una burbuja para que se presente automáticamente en estado expandido:

Kotlin

val bubbleMetadata = Notification.BubbleMetadata.Builder()
    .setDesiredHeight(600)
    .setIntent(bubbleIntent)
    .setAutoExpandBubble(true)
    .setSuppressNotification(true)
    .build()

Java

Notification.BubbleMetadata bubbleData =
    new Notification.BubbleMetadata.Builder()
        .setDesiredHeight(600)
        .setIntent(bubbleIntent)
        .setAutoExpandBubble(true)
        .setSuppressNotification(true)
        .build();

Ciclo de vida del contenido del cuadro

Cuando se expande un cuadro, la actividad del contenido pasa por el ciclo de vida del proceso normal, que convierte la app en un proceso en primer plano, si aún no lo es.

Cuando se contrae o se descarta la burbuja, se destruye la actividad. Esto podría provocar que el proceso se almacene en caché y luego se finalice, dependiendo de si la app tiene otros componentes en ejecución en primer plano.

Cuándo aparecen las burbujas

A fin de reducir las interrupciones para el usuario, las burbujas solo aparecen en determinadas circunstancias.

Si una app se orienta a Android 11 o a una versión posterior, la notificación no aparecerá como una burbuja, a menos que cumpla con los requisitos de conversación. Si una app se orienta a Android 10 o versiones anteriores, la notificación aparece como una burbuja solo si se cumplen una o más de las siguientes condiciones:

Si no se cumple ninguna de esas condiciones, se muestra la notificación en lugar de una burbuja.

Cómo iniciar actividades desde burbujas

Cuando una burbuja inicia una actividad nueva, esta se iniciará en la misma tarea y la misma ventana de burbuja, o bien en una tarea nueva en pantalla completa, lo que contraerá la burbuja que la inició.

Para iniciar una actividad nueva en la misma tarea que la burbuja, haz lo siguiente: 1. Usa el contexto de actividad cuando lances intents, activity.startActivity(intent) y 1. No establezcas la marca FLAG_ACTIVITY_NEW_TASK en la intención.

De lo contrario, la nueva actividad se inicia en una nueva tarea y la burbuja se contrae.

Ten en cuenta que una burbuja representa una conversación específica, por lo que las actividades que se inician dentro de la burbuja deben estar relacionadas con esa conversación. Además, iniciar una actividad dentro de la burbuja aumenta la pila de tareas de la burbuja y podría complicar la experiencia del usuario, en especial en lo que respecta a la navegación.

Prácticas recomendadas

  • Envía una notificación como burbuja solo si es importante, por ejemplo, cuando forma parte de una comunicación en curso o si el usuario solicita explícitamente una burbuja para el contenido. Las burbujas ocupan espacio de la pantalla y cubren otros contenidos de las apps.
  • Asegúrate de que la notificación en forma de burbuja también funcione como una notificación normal. Cuando el usuario inhabilita la burbuja, se muestra una notificación de burbuja como una notificación normal.
  • Llama a super.onBackPressed cuando anules onBackPressed en la actividad de la burbuja. De lo contrario, es posible que la burbuja no se comporte correctamente.

Cuando una burbuja contraída recibe un mensaje actualizado, esta muestra un ícono de distintivo para indicar que hay un mensaje sin leer. Cuando el usuario abra el mensaje en la app asociada, sigue estos pasos:

App de ejemplo

La app de ejemplo de SociaLite es una app de conversación que usa burbujas. A modo de demostración, esta app usa chatbots. En las aplicaciones del mundo real, usa burbujas para los mensajes de personas.