Jetpack Compose: Notifications Integration

Notifications are an integral part of the user experience in Android applications, allowing developers to communicate important information to users in a timely manner. Jetpack Compose simplifies the process of creating and managing notifications with its declarative UI approach. Integrating notifications in Jetpack Compose involves using Android’s NotificationManager along with Compose’s composable functions to build and display notifications effectively.

What are Notifications in Android?

Notifications are messages that Android displays outside your app’s UI to provide reminders, communication from other people, or other timely information. Users can tap a notification to open your app, or take an action directly from the notification.

Why Use Notifications?

• User Engagement: Keeps users informed and engaged with your app.
• Timely Updates: Delivers important information or reminders.
• Accessibility: Allows users to take quick actions without opening the app.

How to Integrate Notifications in Jetpack Compose

To integrate notifications in Jetpack Compose, follow these steps:

Step 1: Add Notification Permission

Declare the POST_NOTIFICATIONS permission in your AndroidManifest.xml:

For Android 13 (API level 33) and higher, you need to request the permission at runtime:

import android.Manifest
import android.content.Context
import android.content.pm.PackageManager
import android.os.Build
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.platform.LocalContext
import androidx.core.content.ContextCompat

@Composable
fun RequestNotificationPermission() {
    val context = LocalContext.current
    val launcher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.RequestPermission(),
        onResult = { isGranted: Boolean ->
            if (isGranted) {
                // Permission Granted: Proceed to show notification
            } else {
                // Permission Denied: Handle accordingly (e.g., disable notifications feature)
            }
        }
    )

    LaunchedEffect(key1 = true) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
            if (ContextCompat.checkSelfPermission(
                    context,
                    Manifest.permission.POST_NOTIFICATIONS
                ) == PackageManager.PERMISSION_GRANTED
            ) {
                // Permission already granted
            } else {
                launcher.launch(Manifest.permission.POST_NOTIFICATIONS)
            }
        }
    }
}

In this example, RequestNotificationPermission checks and requests the POST_NOTIFICATIONS permission when necessary.

Step 2: Create a Notification Channel

On Android 8.0 (API level 26) and higher, you must create a notification channel. This is typically done when your app starts:

import android.app.NotificationChannel
import android.app.NotificationManager
import android.content.Context
import android.os.Build

fun createNotificationChannel(context: Context, channelId: String, channelName: String, channelDescription: String) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        val importance = NotificationManager.IMPORTANCE_DEFAULT
        val channel = NotificationChannel(channelId, channelName, importance).apply {
            description = channelDescription
        }
        val notificationManager: NotificationManager =
            context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
        notificationManager.createNotificationChannel(channel)
    }
}

Call this function when your app starts:

import android.app.Application

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        val channelId = "my_channel_id"
        val channelName = "My Channel"
        val channelDescription = "Channel description for my notifications"
        createNotificationChannel(this, channelId, channelName, channelDescription)
    }
}

Don’t forget to register your application class in your AndroidManifest.xml file:

Step 3: Build and Show a Notification

Use NotificationCompat.Builder to build a notification and NotificationManagerCompat to display it:

import android.app.PendingIntent
import android.content.Context
import android.content.Intent
import androidx.core.app.NotificationCompat
import androidx.core.app.NotificationManagerCompat

fun showNotification(context: Context, channelId: String, notificationId: Int, title: String, content: String) {
    val intent = Intent(context, MainActivity::class.java).apply {
        flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
    }
    val pendingIntent: PendingIntent = PendingIntent.getActivity(context, 0, intent, PendingIntent.FLAG_IMMUTABLE)

    val builder = NotificationCompat.Builder(context, channelId)
        .setSmallIcon(android.R.drawable.ic_dialog_info) // Replace with your app's icon
        .setContentTitle(title)
        .setContentText(content)
        .setContentIntent(pendingIntent)
        .setPriority(NotificationCompat.PRIORITY_DEFAULT)
        .setAutoCancel(true) // Automatically removes the notification when the user taps it

    with(NotificationManagerCompat.from(context)) {
        // notificationId is a unique int for each notification that you must define
        notify(notificationId, builder.build())
    }
}

To call this function from a Composable function:

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

@Composable
fun NotificationButton() {
    val context = LocalContext.current
    Button(onClick = {
        val channelId = "my_channel_id"
        val notificationId = 1
        val title = "Hello, Compose!"
        val content = "This is a sample notification from Jetpack Compose."
        showNotification(context, channelId, notificationId, title, content)
    }) {
        Text("Show Notification")
    }
}

Step 4: Example Usage

Use the RequestNotificationPermission and NotificationButton Composables in your main Activity:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun MainScreen() {
    Surface {
        Column(modifier = Modifier.padding(16.dp)) {
            RequestNotificationPermission()
            NotificationButton()
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainScreen()
}

Best Practices

• Request Permissions Appropriately: Ask for notification permissions contextually and provide a clear explanation of why your app needs them.
• Use Notification Channels: Categorize notifications into channels to give users control over the types of notifications they receive.
• Prioritize Content: Ensure notifications deliver valuable and timely information.
• Test Thoroughly: Test notifications on various Android versions and devices to ensure compatibility and proper behavior.

Conclusion

Integrating notifications in Jetpack Compose allows you to effectively communicate with users and enhance their experience with your application. By requesting necessary permissions, creating notification channels, and using the NotificationCompat.Builder, you can create and display notifications seamlessly within your Compose-based UI. Following best practices ensures that your notifications are user-friendly and respect user preferences.