FaceBook Chat Heads Feature

Hi guys,so I was wondering how facebook implemented the Chat Heads feature recently to their messenger & I found a excellent post which explains how they did it. So this basically going to be a repost of the same, I usually dont do this but this really deserves a mention.

Thanks to Pierre-Yves Ricau that this tutorial was possible, i strongly recommend you to visit his site and drop him a thanks for this.

Link to  Pierre-Yves Ricau's site : Pierre-Yves Ricau's Site


Let's get started :

So basically its just a service running in the background which is responsible for displaying the chat head on your screen. And it is able to display it on top of any activity because of a special permission :

android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

================================================================
ChatHeadService.java
================================================================

public class ChatHeadService extends Service {

  private WindowManager windowManager;

  private ImageView chatHead;

  @Override public IBinder onBind(Intent intent) {

    // Not used

    return null;

  }

  @Override public void onCreate() {

    super.onCreate();

    windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);

    chatHead = new ImageView(this);

    chatHead.setImageResource(R.drawable.android_head);

    WindowManager.LayoutParams params = new WindowManager.LayoutParams(

        WindowManager.LayoutParams.WRAP_CONTENT,

        WindowManager.LayoutParams.WRAP_CONTENT,

        WindowManager.LayoutParams.TYPE_PHONE,

        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,

        PixelFormat.TRANSLUCENT);

    params.gravity = Gravity.TOP | Gravity.LEFT;

    params.x = 0;

    params.y = 100;

    windowManager.addView(chatHead, params);

  }

  @Override

  public void onDestroy() {

    super.onDestroy();

    if (chatHead != null) windowManager.removeView(chatHead);

  }

}

================================================================

Ok so what did we do above :

1)Just add a View on top of the window 

2)Created a new ImageView & set the image 

3)Created a instance of Window Manager & added the ImageView to the Window.

4)You should note " WindowManager.LayoutParams.TYPE_PHONE" parameter, this allows it to be on top of the Window.

5)Then we set the position of the ImageView to top left corner 

Now we have the service ready we just need to invoke/start it somehow.

So lets do that by simple creating a Activity as below.

================================================================
Home.java
================================================================

public class Home extends Activity {

Button showChatHead;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.homepage);

showChatHead = (Button)  findViewById(R.id.button);


showChatHead.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

   Intent i = new Intent(getApplicationContext(), ChatHeadService.class);

   startService(i);

}

});

================================================================


Ok so what did we do above :

1) Created a simple Activity which a normal button in it

2) On clicking the button we started the service which we created earlier.

3) Dont forget to register the service in the Manifest & add the permission:

 android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

4) Now on running the application & clicking the button you should see a Android icon pop up on left corner of your Screen.

5) Let's add the functionality of being able to drag this anywhere on the screen.

================================================================


To the same existing ChatHeadService class add the following code
 & you should have the Drag functionality.

================================================================
ChatHeadService.java
================================================================

chatHead.setOnTouchListener(new View.OnTouchListener() {

  private int initialX;

  private int initialY;

  private float initialTouchX;

  private float initialTouchY;

  @Override public boolean onTouch(View v, MotionEvent event) {

    switch (event.getAction()) {

      case MotionEvent.ACTION_DOWN:

        initialX = params.x;

        initialY = params.y;

        initialTouchX = event.getRawX();

        initialTouchY = event.getRawY();

        return true;

      case MotionEvent.ACTION_UP:

        return true;

      case MotionEvent.ACTION_MOVE:

        params.x = initialX + (int) (event.getRawX() - initialTouchX);

        params.y = initialY + (int) (event.getRawY() - initialTouchY);

        windowManager.updateViewLayout(chatHead, params);

        return true;

    }

    return false;

  }

});

================================================================

Now you should have fully functional Chat Head which can be dragged anywhere on the screen !

Well, that was simple wasn't it?

This was just a simple demo tutorial how you can use it using a button, the possibilities are limitless.

Most basic use would be to pop up a notification as a Chat Head for all types of events like SMS,MMS,Calls,Emails etc. Could be used as a Notification Manager or Task Switcher as well.

Happy Hacking !!

Again a big thanks to Pierre-Yves Ricau for sharing this with the general public.

He has the code up on Github as well, so feel free to go there and have a look at it yourself.

Link :

Github Link

That's all for this tutorial from my end, feel free to drop me a comment if you need any help !