Notification Image Slider Example in Android

Photo by Jamie Street on Unsplash

Introduction

I have used FCM for push notification and ViewFlipper view component to slide the multiple images. So let’s start the code!

Steps

1. Create a project and integrate FCM or any other push notification service.
2. 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!

Notification Slider

Notes:

1. 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.
2. BitmapFactory.decodeStream(): Don’t execute this line on the main thread otherwise you will get NetworkOnMainThreadException Exception.
3. 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!