Deep dive into Android Q Bubbles

Android Q

Android Q comes with an exciting new feature that’s built on top of Notifications API, known as Bubbles. Bubbles lets you chat, check your to-do list and hence multi-task without having to leave your current app. As their name implies, “Bubbles” float on top of your current app. All of us have previously used bubbles while using the Facebook Messenger app. Now, since its part of Android Q APIs, Android developers can leverage this to create Bubble-like experience for the users.

Bubbles can expand to show the screen content and can collapse when no longer required. Let’s start trying building an app with Bubbles.

Prerequisites

1. Android Q SDK
2. Android Q System Image

Download the above through SDK manager.

Building an App using Bubbles

Step 1: Create a starter app in Android Studio and ensure the following are met.

1. The app should use androidx
2. The minSDK should be ‘Android Q’
3. The compileSDKVersion, minSDKVersion, targetSDKVersion should be as below,

compileSdkVersion 'android-Q'
buildToolsVersion "29.0.0 rc1"
defaultConfig {
    applicationId "com.example.todo_bubbles"
    minSdkVersion 'Q'
    targetSdkVersion 'Q'
    ...
}

Step 2: Create an Activity for Bubble.

Create an activity and place the content you want to appear in its layout file.

Since the activity for the bubble must be resizeable, embedded and launchable in document mode, declare the following attributes for the activity in the manifest,

<activity android:name=".BubbleActivity"
    android:label="@string/to_do_bubble"
    android:allowEmbedded="true"
    android:documentLaunchMode="always"
    android:resizeableActivity="true">
</activity>

Note: If any of the above three attributes is missing, the system would launch the activity as a notification and not as a bubble.

Step 3: Create a Notification with the Bubble properties.

Create an Activity that triggers a notification. In this example, say on click of FAB button.

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        createBubble();
    }
});

In the createBubble(), create an Intent to Bubble Activity,

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

Create a BubbleMetadata object by using Notification.BubbleMetadata.Builder,

// Create bubble metadata
 Notification.BubbleMetadata bubbleData =
         new Notification.BubbleMetadata.Builder()
                 .setDesiredHeight(600)
                 .setIcon(Icon.createWithResource(this, R.drawable.todo_list))
                 .setIntent(bubbleIntent)
                 .setAutoExpandBubble(true)
                 .build();
// Note: although you can set the icon is not displayed in Q Beta update 3

Note: For an expanded bubble, setAutoExpandBubble(true) has been used. However, it is recommended to use this functionality if the user performs an action that would result in a bubble.

You could use setSuppressInitialNotification(true) to suppress the initial notification.

Create the notification and add the BubbleMetadata by using setBubbleMetadata,

Person chatBot = new Person.Builder()
        .setBot(true)
        .setName("BubbleBot")
        .setImportant(true)
        .build();

Notification.Builder builder =
        new Notification.Builder(this, CHANNEL_ID)
                .setContentTitle("Your to-do list is here")
                .setContentText("Click to open to-do list")
                .setContentIntent(bubbleIntent)
                .setSmallIcon(R.drawable.ic_todo_list)
                .setBubbleMetadata(bubbleData)
                .setAutoCancel(true)
                .addPerson(chatBot);

Note: The importance of Notification Channel should be set to IMPORTANCE_HIGH, unless the app is a foreground app.

To enable the app, to work in the notification mode(when the bubble mode is turned off), its essential to use setContentIntent and redirect the user to the same activity(that is, BubbleActivity).

Result

Launch of Bubble on click of FAB. Note: The app asks for permission to allow bubbles. When the user selects “Allow”, then all notifications having BubbleMetaData would appear as bubbles, whereas when the user selects “Block”, the notifications would appear as notifications and not as Bubbles.

When the user selects “Allow”. Note, the user can click the Settings icon on top of Bubbles to go to Settings for this particular application.

In the Settings screen, user gets an option to disable Bubbles for the app.

When the user turns Bubbles “Off”, then clicking on the FAB triggers notifications and clicking on the notification, opens up the Bubble Activity(in full screen mode).

You could also set Bubbles for a notification channel by calling setAllowBubbles(true) on the instance of NotificationChannel.

The source code for the above tutorial is present here.

MonikaJethani/Todo_Bubbles

Note: This article contains results of my research and is in no way related to the organization where I work.