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:

 

[su_button url=”https://github.com/androidsrc/FacebookLikeChathead” target=”blank” style=”stroked” background=”#51d461" color=”#ffffff” size=”6" center=”yes” radius=”0" icon=”icon: arrow-circle-o-down”]Download Full Source Code[/su_b[/su_button]p> 

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

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...

24 Responses

  1. Gaurav Mandlik says:

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

  2. umesh says:

    How to stop it from displaying over other apps

  3. HL ALexander says:

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

  4. pawan kushwaha says:

    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 ??

  5. Wessim says:

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

  6. Rushabh Shah says:

    your link is not working

  7. Ray Smith says:

    How to add the ClickListener whats the code and where?

  8. Sohanoor Rahman Sohan says:

    How can I setOnclickListner on chatHead ?

  9. Fazil T.M says:

    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.

  10. Cody Flies says:

    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.

  11. Oded Bd says:

    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?

  12. Miso says:

    You forgot MainActivity class in this tutorial 🙂

  13. Souvik Mitra says:

    can you open a Activity when chatHead will be clicked

  14. tejas says:

    hi, there on click on chathead is it possible to open app drawer of app…….

  1. July 11, 2015

    […] It uses permission “android.permission.SYSTEM_ALERT_WINDOW” full tutorial on this link : http://cs2guru.com/facebook-chat-like-floating-chat-heads/ […]

  2. March 22, 2016

    What is the technology stack behind the VooDoo app?

    If you are asking regarding how VooDoo app is able to read the active app’s content, then the answer is Accessibility options. It’s a clever hack really, as accessibility options are meant for providing a way to users with disability to understand th…

  3. November 11, 2017

    […] It uses permission “android.permission.SYSTEM_ALERT_WINDOW” full tutorial on this link : http://androidsrc.net/facebook-chat-like-floating-chat-heads/ […]

  4. December 17, 2017

    […] It uses permission “android.permission.SYSTEM_ALERT_WINDOW” full tutorial on this link : http://androidsrc.net/facebook-chat-like-floating-chat-heads/ […]

Leave a Reply

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