Push Notification
A notification is a message shown by Android outside your app’s interface to provide reminders, updates, or communications from others. It allows users to engage with your app or take actions directly from the notification itself. These notifications are “pushed” to the device without the user needing to open the app or manually request the information.
| Type | Resource |
|---|---|
| Design | Figma |
| Mobile | Mobile Storybook |
| Code | Gitlab |
Usage
A push notification component UI typically includes the following key elements to deliver a concise and clear message to users.
val customBigView = RemoteViews(
context.packageName,
com.app.biofarmauilibrary.R.layout.push_notification_big
)
customBigView.setTextViewText(
com.app.biofarmauilibrary.R.id.notification_title,
messageTitle
)
customBigView.setTextViewText(
com.app.biofarmauilibrary.R.id.notification_message,
messageBody
)
val actionIntent = PendingIntent.getActivity(
context,
0,
Intent(context, PushNotificationActivity::class.java),
PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
)
// Handle Show/Hide Profile URL
customBigView.setViewVisibility(
com.app.biofarmauilibrary.R.id.profile_image,
View.GONE
)
// Handle Show/Hide Action Button
if (!showLeftButton || !showCenterButton || !showRightButton) {
customBigView.setViewPadding(
com.app.biofarmauilibrary.R.id.action_button_layout,
0,
0,
0,
0,
)
}
if (showLeftButton) {
customBigView.setOnClickPendingIntent(
com.app.biofarmauilibrary.R.id.left_button,
actionIntent
)
customBigView.setViewVisibility(
com.app.biofarmauilibrary.R.id.left_button,
View.VISIBLE
)
}
if (showCenterButton) {
customBigView.setOnClickPendingIntent(
com.app.biofarmauilibrary.R.id.center_button,
actionIntent
)
customBigView.setViewVisibility(
com.app.biofarmauilibrary.R.id.center_button,
View.VISIBLE
)
}
if (showRightButton) {
customBigView.setOnClickPendingIntent(
com.app.biofarmauilibrary.R.id.right_button,
actionIntent
)
customBigView.setViewVisibility(
com.app.biofarmauilibrary.R.id.right_button,
View.VISIBLE
)
}
// Onclick
customBigView.setOnClickPendingIntent(
com.app.biofarmauilibrary.R.id.notification_title,
actionIntent
)
customBigView.setOnClickPendingIntent(
com.app.biofarmauilibrary.R.id.notification_message,
actionIntent
)
customBigView.setTextColor(
com.app.biofarmauilibrary.R.id.notification_message,
if (!isDarkThemeEnabled(context)) 0xFF64748B.toInt() else 0xFF94A3B8.toInt()
)
customBigView.setTextColor(
com.app.biofarmauilibrary.R.id.notification_title,
if (!isDarkThemeEnabled(context)) 0xFF0C1324.toInt() else 0xFFE2E8F0.toInt()
)
Thread {
try {
val profileBitmap = fetchImage(context, profileUrl)
customBigView.setImageViewBitmap(
com.app.biofarmauilibrary.R.id.profile_image,
profileBitmap
)
if (withImage) {
val messageBitmap = fetchImage(context, messageImageUrl)
customBigView.setImageViewBitmap(
com.app.biofarmauilibrary.R.id.message_image,
messageBitmap
)
customBigView.setImageViewBitmap(
com.app.biofarmauilibrary.R.id.notification_image,
messageBitmap
)
customBigView.setViewVisibility(
com.app.biofarmauilibrary.R.id.message_image,
View.VISIBLE
)
customBigView.setViewVisibility(
com.app.biofarmauilibrary.R.id.notification_image,
View.VISIBLE
)
}
// Build and show the notification on the UI thread
Handler(Looper.getMainLooper()).post {
val notification = NotificationCompat.Builder(context, channelId)
.setSmallIcon(android.R.drawable.ic_notification_overlay)
.setStyle(NotificationCompat.DecoratedCustomViewStyle())
.apply {
setCustomBigContentView(customBigView)
}
.setPriority(NotificationManager.IMPORTANCE_HIGH)
.setAutoCancel(true)
.build()
NotificationManagerCompat.from(context).notify(1, notification)
}
} catch (e: Exception) {
e.printStackTrace()
}
}.start()
Examples
Variant
Set the package name to change the push notification variant from its size.
Push Notification Composition
Push notifications can be set to not display images, only display titles and messages. You can use the basic package to get notifications that don’t show images
Also, You can use the SmallView package to get notifications that display your profile image. Here’s an example of push notification with profile image.
Also, You can use the CustomBigVeiw package to get notifications with image and action. Here’s an example of push notification with profile image.
