Styling Our Android Notifications (Kotlin)
Tags: kotlin, android
Published: 2021-02-22 02:59:48

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**

```kotlin
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycv8ru32t9dgx5e1ahpp.png)


This is the basic notification with only text. 

**Big text notification**

```kotlin
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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocjqfrh7a0ere10lbysz.png)

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

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

**Big picture notification**

```kotlin
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtpczlz01lxjd123sz1q.png)

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.

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

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

**Inbox notification**

```kotlin

// 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj71mod9zbi842c6rrew.png)

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)

```kotlin
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.

```kotlin
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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5vgibe438jgqt9o5pa8.png)

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

```kotlin
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](https://github.com/jbc7ag/Notifications)