Implementing Notification Bubbles for Android like Facebook Messenger

Hi there, today I came up with an easy solution to use the notification bubbles for android app as they are in used in facebook messenger. You would learn how to add those notification bubbles …

notification bubbles for android

Hi there, today I came up with an easy solution to use the notification bubbles for android app as they are in used in facebook messenger. You would learn how to add those notification bubbles for android as per your need. You will also define onClicks and other stuffs in the notification bubbles created.Without wasting any time, let’s get started. Few snaps of the output of this project can be seen below.

notification bubbles for android
Notification Bubbles for Android

Implementing Notification Bubbles for Android

  • Create a new Android Studio project with an empty activity. As your gradle is built and files get loaded, begin with adding the dependency to your app level gradle  as it is given below.
  • This would add the Bubbles for Android library to your project and hence facilitate all its classed which are required in this project.
  • In your Project level gradle,add a line as shown below:-

  • In your app level gradle, add the line as shown below:-

  • Now, sync the project to download the required library.
  • As you have the bubbles library added to your project, its time to configure the MainActivity.java and activity_main.xml.
  • Here’s the MainActivity.java. It simply consists of methods to create a new bubble ,define on click listener and so on. Apart from methods, it also has permissions for the bubbles to overlay the window at any time. So, add the code below to your MainActivity.java.

  • Here’s the activity_main.xml. It just  has a button to add new bubbles.

  • Now, we need to create some xml resource files to configure the bubbles, its trash container and so on.
  • Begin with creating a new layout resource file named bubble_layout.xml and add the code below. In the code below, the TextView is used to display  the number of messages which appears in red and you can configure it as per your need.

  • The above code will generate the output shown below (It will do once we are done setting the drawable resources)

bubble_layout

  • Next, create another layout resource file named bubble_trash_layout.xml and add the code below. It simply contains the ImageView used to show the bubble trash container.

  • The above code will generate the  preview shown below(It will do once we are done setting the drawables):-

bubble_trash_layout

  • By now we are done the layout files. It time to configure the drawables.
  • Begin with creating a new drawable resource file named bubble_counter_bkg.xml and add the following code. It configures the shape and the background of the tag which comes in red and  displays the number of messages.

  • Next, get the images required from the below link and copy them inside your drawable folder. Just make sure you don’t change the names of the images. If you will change the names you also need to change some lines in xml files.

[download id=”3557″]

  • We are almost done. Just add a permission to your manifest as shown below and you would be good to go.

  • And your project is ready for the run. Run the app now and have fun with the bubbles. Use them do something different and innovative.
  • You can also get the source code from the link given below.

[sociallocker id=1372] [download id=”3560″] [/sociallocker]

If you find some problem in the above lesson, let me know in the comments section. That’s all for now. Stay tuned for more android tutorials.

Hello, I am Manish Kumar. I am a B.Tech Student at NIT Jamshedpur. Fortunately, I find myself quite passionate about Computers and Technology. Android is my most recent Crush.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x