Notification Image Slider Example in Android
2 min readFeb 3, 2019
Introduction
I have used FCM for push notification and ViewFlipper view component to slide the multiple images. So let’s start the code!
Steps
- Create a project and integrate FCM or any other push notification service.
- notification_slider_layout.xml: Create a layout file that will be visible in the notification.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Title"
android:padding="8dp"
style="@style/TextAppearance.Compat.Notification.Title"/>
<ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoStart="true"
android:flipInterval="2500"
android:inAnimation="@android:anim/slide_in_left"
android:outAnimation="@android:anim/slide_out_right"/>
</LinearLayout>
3. notification_slider_image.xml: Viewflipper child view
<?xml version="1.0" encoding="utf-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:contentDescription="@string/app_name"
android:id="@+id/imageView"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="200dp"/>
4. MyFirebaseMessageService.kt: Push notification service
class MyFirebaseMessageService : FirebaseMessagingService() {
override fun onMessageReceived(p0: RemoteMessage?) {
super.onMessageReceived(p0)
val imagesList: MutableList<String> = arrayListOf() //TODO add here image URLs that you want to show in the
//image slider.
setNotificationSliderData(imagesList, "Title", "Description")
}
}
setNotificationSliderData(imagesList, "Title", "Description")
private fun setNotificationSliderData(
imagesList: MutableList<String>,
title: String,
desc: String) {
// parent notification layout
val expandedView = RemoteViews(packageName,R.layout.notification_slider_layout)
// notification title
expandedView.setTextViewText(R.id.textViewTitle, title)
for (imgUrl: String in imagesList) { //for loop start val viewFlipperImage =
RemoteViews(packageName,R.layout.notification_slider_image)
if (TextUtils.isEmpty(imgUrl)) { // default image
viewFlipperImage
.setImageViewResource(R.id.imageView,R.mipmap.ic_launcher)
} else { try {
// Below line must not be executed on Mainthread.
val remotePicture =
BitmapFactory.decodeStream(URL(imgUrl).content
as InputStream)
viewFlipperImage.
setImageViewBitmap(R.id.imageView, remotePicture) } catch (e: IOException) {
// set default image
viewFlipperImage .setImageViewResource(R.id.imageView,R.mpmap.ic_launcher)
}
} // Adding each image view in the viewflipper.
expandedView.addView(R.id.viewFlipper, viewFlipperImage) } // for loop finish
showNotification(title, desc, expandedView)
}
showNotification(title, desc, expandedView)
private fun showNotification(
title: String,
desc: String,
expandedView: RemoteViews
) {
val channelId = "MyChannelName"
val notification = NotificationCompat.Builder(applicationContext, channelId)
.setSmallIcon(R.mipmap.ic_launcher)
.setContentTitle(title)
.setContentText(desc)
//.setStyle(NotificationCompat.DecoratedCustomViewStyle())
// Uncomment above line for standard notification format (with logo and time).
.setCustomBigContentView(expandedView)
.build()
val notifyID = 101
val notificationManager =
getSystemService(Context.NOTIFICATION_SERVICE)
as NotificationManager?
// Oreo - channel initialization
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
// The user-visible name of the channel.
val channelName = getString(R.string.app_name)
val importance = NotificationManager.IMPORTANCE_HIGH
val channel = NotificationChannel(channelId, channelName, importance)
channel.setShowBadge(false)
notificationManager?.apply {
createNotificationChannel(channel)
notify(notifyID, notification)
} } else { // below Oreo
notificationManager?.notify(notifyID, notification)
}
}
5. That’s it!
Notes:
- This notification solution support API Level > 16. If you want to support below API Level 16 then call setContent() method of notification with the same remote view object.
- BitmapFactory.decodeStream(): Don’t execute this line on the main thread otherwise you will get NetworkOnMainThreadException Exception.
- Keep your app open to get the notification in the above example. (because I have set the image URLs hard-coded so when you fetch the URLs from the notification then it will work on the background as well).
Happy Coding!