Different types of local notification in Android using Jetpack compose

This is the second installment of my local notification blog series. In the first part, we explored the significance and detailed implementation of local notifications. If you’re new to implementing local notifications in your Android app, I highly recommend checking out the initial post in this series for a comprehensive guide.

In this continuation, we’ll delve into various types of notifications designed to enhance user engagement and interaction.

Different types of notifications

1. Big-text notification:

In some cases, we might want to include longer descriptions or text in our notifications. In such cases, setContentText() may not be the ideal choice as it provides a single-line description.

To address this, we use setStyle(). Let’s dive into how to use it!

fun showExpandedNotificationWithBigText() {
    val notification = NotificationCompat.Builder(context, notificationChannelID)
        .setContentTitle("Big-text Notification")
        .setContentText("See description")
        .setSmallIcon(R.drawable.round_notifications_24)
        .setPriority(NotificationManager.IMPORTANCE_HIGH)
        .setAutoCancel(true)
        .setStyle(
            NotificationCompat.BigTextStyle()
                .bigText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet eros tempor, sagittis ipsum ac, facilisis ex. Morbi sit.")
        )
        .build()

    notificationManager.notify(Random.nextInt(), notification)
}

• setStyle() is a method used to apply a style to the notification.
• NotificationCompat.BigTextStyle() creates a BigTextStyle object, which is a style that allows for displaying longer text in the notification.
• bigText() sets the actual text content for the expanded notification. It can accommodate longer descriptions.

Button(onClick = {
    notificationHandler.showExpandedNotificationWithBigText()
}) { Text(text = "Big text notification") }

2. Large icon notification:

You might have noticed an image or icon on the right side of a notification — it could be a picture, a vector, or even an app icon. Let’s delve into how we can incorporate that visual element into our notifications.

import android.graphics.BitmapFactory

fun showNotificationWithLargeIcon() {
    val notification = NotificationCompat.Builder(context, notificationChannelID)
        .setContentTitle("Notification title")
        .setContentText("Notification text")
        .setSmallIcon(R.drawable.round_notifications_24)
        .setLargeIcon(
            BitmapFactory.decodeResource(
                context.resources,
                R.drawable.code_with_zebru
            )
        )
        .setPriority(NotificationManager.IMPORTANCE_HIGH)
        .setAutoCancel(true)
        .build()

    notificationManager.notify(Random.nextInt(), notification)
}

• setLargeIcon() is a method used to set a large icon for the notification.
• BitmapFactory.decodeResource() decodes the bitmap resource from the drawable, which represents the large icon for the notification.

Button(onClick = {
    notificationHandler.showNotificationWithLargeIcon()
}) { Text(text = "Large icon notification") }

3. Big picture notification:

If you use shopping apps like AJIO or MYNTRA, etc. and social media platforms like WhatsApp or Twitter, you’ve probably come across notifications with images. For example, e-commerce apps may notify you about product promotions or sales, and social media apps can send notifications with attached media.

Now, let’s explore how we can add images to our notifications.

import androidx.annotation.DrawableRes

fun showExpandedNotificationWithBigPicture() {
    val notification = NotificationCompat.Builder(context, notificationChannelID)
        .setContentTitle("Notification title")
        .setContentText("Notification text")
        .setSmallIcon(R.drawable.round_notifications_24)
        .setPriority(NotificationManager.IMPORTANCE_HIGH)
        .setAutoCancel(true)
        .setStyle(
            NotificationCompat.BigPictureStyle()
                .bigPicture(context.bitmapFromResource(R.drawable.code_with_zebru))
        )
        .build()

    notificationManager.notify(Random.nextInt(), notification)
}

private fun Context.bitmapFromResource(
    @DrawableRes resId: Int
) = BitmapFactory.decodeResource(
    resources,
    resId
)

• NotificationCompat.BigPictureStyle() creates a BigPictureStyle object, which is a style that allows displaying a large image in the notification.
• bigPicture() sets the actual large picture for the expanded notification. It uses the bitmapFromResource extension function to decode the bitmap from the drawable resource.
• bitmapFromResource extension function is a convenient way to decode a bitmap from a drawable resource.
• BitmapFactory.decodeResource() decodes the bitmap from the specified drawable resource.

Button(onClick = {
    notificationHandler.showExpandedNotificationWithBigPicture()
}) { Text(text = "Big picture notification") }

4. Action notification:

Now, you’ve likely experienced notifications that, when clicked, open the respective app or even take you directly to a specific content within the app. For instance, clicking a promotional product notification might lead you to the detailed page of that product.

Let’s implement this feature as well!

fun showActionNotification() {
    // Intent to launch when the notification is clicked
    val intent = Intent(context, MainActivity::class.java)
    intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
    val pendingIntent: PendingIntent = PendingIntent.getActivity(
        context,
        0,
        intent,
        PendingIntent.FLAG_IMMUTABLE or PendingIntent.FLAG_IMMUTABLE
    )

    // create a notification
    val notification = NotificationCompat.Builder(context, notificationChannelID)
        .setContentTitle("Notification title")
        .setContentText("Notification text")
        .setSmallIcon(R.drawable.ic_launcher_foreground)
        .setPriority(NotificationCompat.PRIORITY_HIGH)
        .setContentIntent(pendingIntent)  // add the pendingIntent to notification
        .setAutoCancel(true)
        .build()

    notificationManager.notify(Random.nextInt(), notification)
}

• Creates an explicit intent to launch the MainActivity (or open particular screen) when the notification is clicked.
• Sets flags to create a new task and clear the previous task when launching the intent.
• pendingIntent holds a PendingIntent that wraps the MainActivity launch intent.
• PendingIntent.FLAG_IMMUTABLE or PendingIntent.FLAG_IMMUTABLE sets flags to create an immutable PendingIntent.
• setContentIntent(pendingIntent) associates the PendingIntent with the notification, defining the action when the notification is clicked.

Button(onClick = {
    notificationHandler.showActionNotification()
}) { Text(text = "Action notification") }

5. Notification with action buttons:

One common example of notifications with action buttons is seen in messaging apps, where you can find options like ‘Mark as read’. Clicking this button directly marks the message as read.

Similarly, in reminders, you might encounter options like ‘Remind me later’. For downloads, notifications often include buttons like ‘Pause’, ‘Resume’, or ‘Cancel’. These buttons allow users to take quick actions right from the notification without having to open the app, making interactions more convenient.

fun showNotificationWithActionButton() {
    // define the action button
    val intent = Intent(context, MainActivity::class.java)
    val pendingIntent = PendingIntent.getActivity(
        context,
        0,
        intent,
        PendingIntent.FLAG_MUTABLE or PendingIntent.FLAG_IMMUTABLE
    )

    // create a notification
    val notification = NotificationCompat.Builder(context, notificationChannelID)
        .setContentTitle("Notification title")
        .setContentText("Notification text")
        .setSmallIcon(R.drawable.ic_launcher_foreground)
        .setPriority(NotificationCompat.PRIORITY_HIGH)
        .setAutoCancel(true)
        .addAction(
            // add the action button to notification
            NotificationCompat.Action(
                R.drawable.round_notifications_24,
                "Action",
                pendingIntent
            )
        )
        .build()

    notificationManager.notify(Random.nextInt(), notification)
}

• Setting up the Intent and PendingIntent follows the same process as we did before. However, in this notification type, we'll take a slightly different approach. Instead of applying the intent to the entire notification, we'll create a specific action button and apply the intent exclusively to that button.
• addAction(NotificationCompat.Action(...)) adds an action button to the notification. The action button has an icon, a label ("Action"), and the specified PendingIntent which defines the action when the button is clicked.

Button(onClick = {
    notificationHandler.showNotificationWithActionButton()
}) { Text(text = "Notification with action button") }

And there you have it!

Conclusion

We’ve successfully implemented various types of local notifications with Jetpack Compose. The flexibility allows you to combine different notification types based on your app’s requirements.

For instance, in an e-commerce app, you can merge a big picture and an action button in sale or product promotion notifications. This way, users can seamlessly navigate to the relevant sections for purchasing or checking on-sale items.

Integrating local notifications into your app is a powerful strategy to boost user engagement and maintain a strong connection with your audience. Remember, this approach isn’t limited to Jetpack Compose; you can apply the same methodology to traditional Android apps. Just call the functions based on your specific needs.

You would love to take a look:
Local notification in Android with Jetpack compose (Importance and details implementation of local notification)

Level-up your local notification:
Scheduled local notification in Android using AlarmManager

I hope this article has provided valuable insights and assistance for your Android journey. Your support means a lot to me, so if you found this content helpful, please start following me and don’t hesitate to show some love with a hearty round of applause!👏

Your feedback fuels my passion for creating quality content. For any Android queries or just to connect, reach out on LinkedIn and Twitter.

Thanks for reading — looking forward to staying in touch!

Happy Coding!!