top of page
Search
  • Writer's pictureBritt Barak
    • Jul 17, 2016
    • 3 min read

Notifications — Part1 : Styling

Notifications are a very important and powerful tool. Use them correctly — you can significantly increase user engagement. Use them poorly- you might even risk it with users uninstalling your app…


As the Android N release has some new notification features in store, and a new elegant facelift, it is a perfect opportunity to review all that Android allows us to do with notifications, and improve the user experience and engagement.



This first post will overview some designs and styles we can assign to our precious notifications.

***** Apologies in advance for so many pictures of me.. I’m not that creative, I guess :) *****

So first,

What do they look like?


Basic, most minimal notification looks like this:


(Notifications from Android N, M, K)


Each notification must at least have:

  • Small Icon (often our app logo)

  • TitleContent

  • Text


** I guess it wouldn’t take too long until you’d want to add some color.


Since Lollipop we can use setColor(), with an accent color. The system tints some elements of the notification UI, to give it a much prettier look, and emphasise some important parts.


** Another thing we’ll usually want to add is a Large Icon , usually more specifically related to the notification.


So our basic notification will look like:

(Notifications from Android N, M, K)


  • Note: the screenshots are taken with a bit background so you can notice that on L / M each notification lays in a card, whereas on N they have white, clean, not shadowed background.



Building a notification

In order to create one, we use a builder object and add attributes to it, until we’re ready to publish the notification.


Use Notification.Builder, or NotificationCompat.Builder for backward compatibility.


Building our basic notification from above would look something like:

new NotificationCompat.Builder(context)
       .setSmallIcon(smallIconDrawable)
        .setLargeIcon(largeIconBitmap)
        .setContentTitle("Awesome Title!")
        .setColor(ContextCompat.getColor(context, colorRes))
        .setContentText("Cool content!")
       .build();


Rich Notification

Jelly Bean has allowed us to add Rich Styles to our notification, to easily make them both more appealing, and hint on the content we’re notifying about.


Notifications have a “Normal” or collapsed state, which looks exactly as described above (for most cases). They can be expanded, to reveal the Rich Content which is set.


Expanding used to be only by dragging the notification down. On N there’s a small arrow on the top to do it more conveniently.


In general, to add the Rich Content, use setStyle(). We pass as a parameter Notification.Style builder, which in turn, will rebuild the needed properties which were built by the primary Notification Builder .

  • If the OS version doesn’t support the style added — it will simply be ignored.


Let’s overview some of the different Styles:


BigTextStyle

(Notifications from Android N, M, K)

builder.setStyle(new Notification.BigTextStyle().bigText(longString))



BigPictureStyle

(Notifications from Android N, M, K)

builder.setStyle(new Notification.BigPictureStyle().bigPicture(bigBitmap))


InboxStyle

A list of up to 5 strings. (Notifications from Android N, M, K)


builder.setStyle(new Notification.InboxStyle()
.addLine(str1)
.addLine(str2)
.addLine(str3)
.setContentTitle("5 New mails from Britt")
.setSummaryText("+2 more"))


Messaging Style

A style new to N!


For previous versions you’ll have to find a substitute, often InboxStyle would fit, or create it with BigTextStyle.


A significant benefit with using this style, though, is that on Android Wear 2.0, inline responses will be automatically added.

builder.setStyle(new Notification.MessagingStyle("Me")
        .setConversationTitle("Share Food")
        .addMessage(messageString1, timestamp1, "Phoebe")
        .addMessage(messageString2, timestamp2, "Rachel")        
        ...
        .addMessage(messageString5, timestamp5, null) 
                                   // Pass in null for user.

On its constructor we pass the name of the current user (here “Me”).

For each message added, pass a message string, a timestamp and a sender name, or “null” for the current user. For the latter case, the name is taken from the constructor, and is tinted on the UI.


MediaStyle

(Notifications from Android N, M)


Introduced on L.


Shows up to 5 icons for actions when expanded, and up to 3 icons (on the right hand side) when collapsed.


setShowActionsInCompactView() takes indices of the actions added to the notification builder.

builder.addAction(action1).addAction(action2).addAction(action3)
.setStyle(new Notification.MediaStyle()
              .setShowActionsInCompactView(0, 1))

We’ll further discuss actions in a future post.

Use setMediaSession(MediaSessionCompat.Token) , to have the System UI identify this notification as representing an active media session. As a result, for example, the album picture will show in the lock screen. See more details on the documentation.



Well,

We learnt about some basic ways to design notifications. We used some styles to make them more related to the content they notify about, to attract our users.


But there’s a whole lot more we can do with them!!


Next post will show another way to use notifications, notify users on a process the app is doing. Stay tuned :)

bottom of page