Styling Our Android Notifications (Kotlin)

Show notifications in our apps help us to interact in a natural way with the user. Even so, we have to be careful with the use of notifications, Android can block us if we overdo it and not show any notification to the user and believe me, that sucks.

I'm not going to paste all the code just the builder so you can use it in your own app if you already have notifications implemented. But, if you don't have them, you can check at the end of this article, there is a repo with the complete example.

Ok, lets start:

Simple text notification

val builder = NotificationCompat
    .Builder(applicationContext,CHANNELID)
    .setSmallIcon(R.drawable.rainbow)
.setContentTitle(applicationContext.getString(R.string.simple_text))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

This will show:

This is the basic notification with only text.

Big text notification

val builder = NotificationCompat
        .Builder(applicationContext,
                CHANNELID)
         .setStyle(bigTextStyle)
        .setSmallIcon(R.drawable.rainbow)
        .setContentTitle(applicationContext.getString(R.string.big_text))
        .setContentText(messageBody)
        .setContentIntent(contentPendingIntent)
        .setPriority(NotificationCompat.PRIORITY_HIGH)

This will show:

This notification is for text quite of large, you can see this notification is pretty similar to the basic one, but in this case, we are using .setStyle here we are going to send the "styles" or properties we need for our notifications

val bigTextStyle = NotificationCompat.BigTextStyle()
     .bigText(applicationContext.getString(R.string.big_string))

Big picture notification

val builder = NotificationCompat
    .Builder(applicationContext,
        CHANNELID)
    .setStyle(bigPicStyle)
    .setSmallIcon(R.drawable.rainbow)
    .setContentTitle(applicationContext.getString(R.string.big_picture))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

This will show:

This notifications as the big text notification, we are using the setStyle, but for this, we need to create an instance of BigPictureStyle, and this need, of course, the picture a bitmap picture, so we need to convert it if we have it as a drawable resource.

// create the bitmap
val rainbowImage = BitmapFactory.decodeResource(
    applicationContext.resources,
    R.drawable.rainbow
)

val bigPicStyle = NotificationCompat.BigPictureStyle()
    .bigPicture(rainbowImage)
    .bigLargeIcon(null)

Inbox notification


// create the bitmap
val rainbowImage = BitmapFactory.decodeResource(
    applicationContext.resources,
    R.drawable.rainbow
)

val builder = NotificationCompat
    .Builder(applicationContext,
        CHANNELID)
    .setStyle(inboxStyle)
    .setSmallIcon(R.drawable.rainbow)
    .setLargeIcon(rainbowImage)
    .setContentTitle(applicationContext.getString(R.string.inbox))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

It's not necessary to add the LargeIcon but in my opinion looks prettier

This will show:

In this case, we need to create an instance of InboxStyle(), as you can see it doesn't seem to be pretty complicated. ( I didn't add the string resource, but you can do it or pass whatever you want)

val inboxStyle = NotificationCompat.InboxStyle()
    .addLine("Thanks for subscribe")
    .addLine("Here the news for today")
    .addLine("We need you to pay ... ")
    .setBigContentTitle("You got 20 Emails")
    .setSummaryText("You got 17 more emails")

Messaging notification

This code is now deprecated but still, a lot of apps use it, so I'm going to add the updated version in the next article.

val builder = NotificationCompat
    .Builder(applicationContext,
        CHANNELID)
    .setStyle(messagingStyle)
    .setSmallIcon(R.drawable.rainbow)
    .setContentTitle(applicationContext.getString(R.string.messaging))
    .setContentText(messageBody)
    .setContentIntent(contentPendingIntent)
    .setPriority(NotificationCompat.PRIORITY_HIGH)

this will show:

For this kind of notification, the first parameter of MessagingStyle is the user, in this case, the owner of the app.

val messagingStyle = NotificationCompat.MessagingStyle("Jessica")
    .setConversationTitle(applicationContext.getString(R.string.messaging))
    .addMessage("Hi! I'm hungry!",System.currentTimeMillis()-60000,"Cat")
    .addMessage("Where are you?",System.currentTimeMillis()-60000,"Cat")
    .addMessage("Lets go play",System.currentTimeMillis()-30000,"Dog")
    .addMessage("Miss you",System.currentTimeMillis(),"Dog")
    .setGroupConversation(true)

Let's see the property .addMessage, the first parameter is the message you wanted to show. Then you need to send a Long value, which could be the time when they sent the message. And finally, you need to pass the sender or the person/thing is sending the message. If you wanted to group the conversation the property setGroupConversation needs to be true so their messages won't appear in different lines.

And that's it, Here is a repo where I added the examples of the notifications we learned, so you can see them working in an app: Notifications Repo

Blog

Styling Our Android Notifications (Kotlin)

Jess Barrientos

Join Our Newsletter. No Spam, Only the good stuff.

Related