Hello Android developers!

This week we are talking about the Surface Duo 2 Glance Bar feature. If you are wondering what the Glance Bar feature is and how anyone can benefit from it, let’s dive into it together to learn more.

What is the Glance Bar Feature?

The Glance Bar feature displays notifications of BUCKET_PEOPLE category over the hinge part of the device when it is closed. This feature helps us quickly view notifications, the time, or see whenever someone calls u, without unfolding or unlocking the device.

How can I enable the Glance Bar?

This feature is enabled by default for new devices, but if you want to enable or disable it, you can just go to Settings > Surface Duo features > Glance Bar > On/Off. You can also enable or disable specific functionality, including calls, messages, battery level, or volume:

Glance Bar features

Here is a list of different notification types that appear on the Glance Bar.

Incoming calls

When we receive a call, an animation with blue color will appear.

Messages

When we have unread notification messages and we press the power button, a list of all notifications will be displayed. The max number of notification charms from different apps is 4. The notifications will come with an icon and a background color from the application we received the message from; for example, the Skype application is blue. The priority of the notifications is the same as for the status bar.

Battery

When we plug in the device to charge, or disconnect the device from a charging cable, an animation will appear with the percentage of the battery level. If it is below 15%, the background color will be red; otherwise, it will be green.

Volume

When we press the volume buttons up/down, an animation will be displayed with the current volume level and a white background color.

Clock

If you do not have any notifications, you can instantly view the time without folding or opening the device.

Developers, now comes the fun part! How can you see your own notification on Glance Bar?

First, you need a Surface Duo device but if you do not have a device, no problem. We got you!

You can use the Surface Duo Emulator to test Glance Bar notifications. Follow the Surface Duo emulator installation instructions for your system (Windows, macOS, and Linux are supported).

Once the emulator is set-up, you need an application to send test notifications. We will make use of the People sample from Google:

https://github.com/android/user-interface-samples/tree/main/People

The People sample lists a group of animals with whom you can “chat” and generate notifications:

Using the Surface Duo emulator we can now “chat” with our Cat:

After we send the message and move the application in background, we need to simulate the closed posture of the device. This animation shows how to do this using the posture control tab:

The steps shown in the animation are:

1. Go down to the right side of the emulator and click on the 3 dots “…”
2. Navigate to Virtual Sensors section
3. Click on the Closed posture icon
4. Wait for the notification to appear in the center of the emulator screen, which mimics the Glance Bar area on a Surface Duo device

If you do not have enough time to move the application in background and receive the message, just go to ChatRepository.kt class on line 114:

Thread.sleep(5000L)

and change the value of 5000L to a bigger number.

If you’re following these steps on your system, you may not have seen the notification on the Glance Bar? Did we forget something?

The reason the notifications did not appear on the Glance Bar is because the sample application does not have any color set for the notification. If we do not set any color to the notification builder, by default it would be TRANSPARENT. Here’s how to change that: Go to NotificationHelper#showNotification() and add this code line to the Notification Compact builder:

.setColor(Color.RED)

Now let us try one more time 😊

Yeah!, now we know how to display our notifications on the Glance Bar! If we want to change our icon as well as the color, we can call setSmallIcon() and add/replace the current icon:

.setSmallIcon(R.drawable.ic_star)

Here’s a zoomed-in screenshot of the notification with updated icon:

That wraps up what the Glance Bar does and how your apps can take advantage of it using regular Android APIs.

Resources and feedback

If you have any questions or would like to tell us about your dual-screen applications, use the feedback forum or message us on Twitter @surfaceduodev.

Finally, please join us every Friday on Twitch at 11am Pacific time to chat about Surface Duo developer topics!