Create Chat Heads Like Facebook Messenger

Create Chat Heads Like Facebook Messenger

We all love the chat heads (or chat bubbles) from the popular Facebook Messenger. This provides very handy and easy access to the chat conversation screen no matter on which screen you are. Chat heads are very convenient for multitasking as a user can work and chat at the same time. That means if you are using the calculator app on your phone and if any new message arrives, you can open the conversation and replay the message without switching app. Pretty cool!!!

In this tutorial, we are going to learn how to create simple chat head and allow user to drag them across the screen. So that user can adjust the position of the floating widget in the screen.

So, let’s get started.

Understanding the basics:


Step-1: Add android.permission.SYSTEM_ALERT_WINDOW permission to the AndroidManifest.xml file. This permission allows an app to create windows , shown on top of all other apps.

Step-2: Create the layout of the chat head you want to display.

Step-3: Add music control widget to the window and handle dragging:

Step-4: Handle Overdraw permission:

That’s it. Now build and run the project to see the results.

Here is the sample of how our final application should look like. sample.gif

Don’t worry if you have any problems while building the project. Full source code is also available on GitHub. Go ahead, download and run it. Still, if you have any queries let me know in comments below or hit me on Twitter.