Android: Notifications with Custom Layout

In the previous entries, I have managed to display a notification and make it sticky. Now, since the app I’m developing is supposed to be visible mainly through this notification, I wanted to see if I can customise the actual content. Yes, I know there are options by default, like:

  • Small and large notifications
  • Add some buttons to perform actions

However, I wanted to see if I can, for example, add some icons and buttons like Sonos notification does:

sonos-notification

It turns out that, with a bit of work and an OS Jelly Bean or better, anything is possible!

Preparation

Most for the NotificationBuilder code for custom notification is the same as the other ones:

Now, the builder is prepared to receive the custom layout. To make it compatible with devices pre-JellyBean, you need to do something like this:

The custom content is set (as seen above) with builder.setContent(RemoteViews views). Now all we have to do is to build the remote view.

For the purpose of this exercise, custom layout is designed to have an image, a larger and a smaller text underneath, just like the default notification:

custom-layout

The RemoteViews creation code is:

Once the view object is created, we can set the various components programmatically (e.g. content from an Intent):

Voila! the builder is now complete and we can show the notification as in the previous posts.

Code

Notification Layout

buildNotification Method

For the lazy:

getComplexNotificationView()

HTH,


A little experiment: If you find this post and ad below useful, please check the ad out :-)




29 thoughts on “Android: Notifications with Custom Layout

    1. Depends on purpose. Simplest start is from AS. Then, you can look through github.com. If you want something structured, a book like “Big Need Ranch” is a good start.

  1. It’s a great tutorial.But I want to display the notification toolbar as if in any clean master or security apps . how to do that?

    1. If you mean the colorful layout, you need to figure out what your layout would be and put in rich text with the proper colors.

  2. Is it possible to implement something more complex, which requires an actual code like in an activity? I need to implement a hold&drag gesture within a notification. Is such thing doable actually?
    Thank you for your article!

    1. Unfortunately, I haven’t seen this behaviour at all so far in a notification. This question seems to say it’s impossible. You might want to rethink the workflow and use buttons in the notification or develop a widget…

      1. Thanks for your reply. My intentions might be a surprise for you. I wish to make an app, with which a user interact only via a notification or a widget. The app lets you make one simple settings and a user would like to have it conveniently placed so he/she could easily have glance at what’s the current setting. I would love to have a way to do it without actually having to propose a mod to some community Android distro ;-P (which in turn would seriously reduce its availability)

        1. Nice intention… Unfortunately, RemoteViews don’t support gestures directly. according to this you may be able to simulate swiping with a ListView/GridView. You could also try to add your widget to the quick settings drop-down, but YMMV quite a lot since different devices may have different implementations…

  3. How do i use remote views while retaining the original icon design? Im trying to change only background and text color of the notification using remote views while still applying the default for the icon.

  4. great tutorial, but what about click listeners? can I just add a click listener to, for example, the text view?
    Thanks

  5. Very helpful. Thank you!

    Would you how to add a feature to expand the notification when you slide down?

  6. Sorry if this posts twice.

    Great post. Thanks. Would you know how to make the notification expand when swiping down?

  7. Hey, nice tutorial man.

    Do you have any idea how to reuse the same design of collapsed notification at the top of expanded notification? I just need to customize the area where the bigPicture is shown.

      1. Thanks a lot for the quick reply!

        The provided link is not providing a solution to my problem. Although, this is how I have implemented it now with some manual layout designing.

        Let me give you more context on my problem.

        Consider any expandable notification (native one) with an image. When it is collapsed, it has a view where we have the icon, title, text etc.. once you expand it, you will have this same view on the expanded version with an image at the bottom (the big picture).

        What I want to do is, on the expanded notification I need to replace the image with say, a LinearLayout. I want to have rest of the notification design unchanged.

        In the stackoverflow link you mentioned, ‘setCustomBigContentView()’ is replacing the entire view of expanded notification. I don’t want that to happen.

        Any idea, if there is any way to solve this problem.? I know there is no straight forward method. If you know how to reuse the existing layout of notification, that’d help a lot. :)

          1. This helps. I will try to play around with the source code and find a way to solve this.

            Thanks a lot man! :-)

    1. Heh. This is an entirely different topic. The first thing is to select the right keywords for the store.

  8. how can i handle when application is in background? when application is running custom layout is working but when backgound or killed getting android default notification.

    1. According to this, you need to create a service to handle notifications. If memory helps, you can trigger the service from your background app. As for the case when the app is killed, I think the notification is triggered by Android, not your app.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top