Facebook chat like floating chat heads

Facebook recently released a new feature in Facebook Messenger in which the chat from person floats on screen instead of residing inside conventional application. This feature is very continent for multitasking as user can work and chat at the same time. Like you are using calculator and someone message you on facebook then this chat is shown over calculator like a floating bubble and you can reply to this chat by just by clicking the chat head and then resume your work after ward . So no app switching !!!

Chathead Basics :

At first it looks like some kind of transparent activity. But its not a transparent activity.

That means its a service running in background and controlling the view which is attached to window. As you probably know, an Activity has a Window instance. Dialogs also have their own dedicated Window. Even Services can have Window: InputMethodService uses a Window to receive touch events and draw a keyboard on top of another Window, and DreamService is used to create screensavers.

To open a new window in which you will draw the chathead, you need the SYSTEM_ALERT_WINDOW permission.

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

Preview:

 

 

chat_head_preview

 

Lets get Started :

1. Create new project :

Create a new project File -> New -> Android Project

 

2. Add a new service to project

Add a new class named ChatHeadService.java

3. Update activity_main.xml

Add following code to activity_main.xml. This will add buttons to control the visibility of the chathead.

4. Update manifest file

Update the manifest file by adding service to menifest along with permission for SYSTEM_ALERT_WINDOW

5. Build and Run

Now build and run the project to see the results

 

 

 

 

guru

Technology enthusiast. Loves to tinker with things. Always trying to create something wonderful using technology. Loves coding for Android, Raspberry pi, Arduino , Opencv and much more.

You may also like...

  • Gaurav Mandlik

    can i add a click Listener on That button and open some Application..?

    • Yes you can add onTouchListener and do desired action on touch.

  • Pingback: Creating a system overlay window (always on top) - DexPage()

  • umesh

    How to stop it from displaying over other apps

    • Anmol Arora

      You can stop the service in onPause() method of your Activity.

  • HL ALexander

    I’m very new to coding but i keep getting a error in “package com.example.chatheads;”.
    what do I need to change?

    • Anmol Arora

      Just remove that line and write the package name of your project.

  • pawan kushwaha

    hi, thanx for the code, but i want to run that floating button even after closing the app… menas i have to keep running that service.. is there any solution u already have ??

    • yes this can be done by handling button in service. I will create a tutorial for this in near future.

  • Pingback: Quora()

  • Wessim

    can i add a click Listener on That button and open some Application..?

    • yes just set onClickListener() on head and call your application from there.

  • Rushabh Shah

    your link is not working

  • Ray Smith

    How to add the ClickListener whats the code and where?

  • Sohanoor Rahman Sohan

    How can I setOnclickListner on chatHead ?

  • Fazil T.M

    How to Start the service when dialer open. For example when the dialer open then the service became start. And also how to add close button to close the app.

  • Cody Flies

    Ok so I’m using the code provided and i keep getting the error that says —> Unable to add window android.view.ViewRootImpl$W@84a90bc — permission denied for this window type <— not I'm not really sure what is going on.

  • Oded Bd

    But why when at facebook notifications you can see the alert over the lock screen and in this example you can’t?
    Is it problem with the permission?

  • Miso

    You forgot MainActivity class in this tutorial 🙂