Android: Chat head View like in Facebook Messenger App

In the recent update of the  Facebook Messenger App, you can able to see this new view called "Chat heads".

The logic behind this Chat heads is just adding a view in Window.The awesome part is it will draw small window with chat heads on top of other applications too.

Let see the implementation part now.

 Chat head service class:

package com.hopabit.chathead.services;

import android.app.Service;
import android.content.Intent;
import android.graphics.PixelFormat;
import android.os.IBinder;
import android.view.Gravity;
import android.view.WindowManager;
import android.widget.ImageView;

import com.cloudinfy.chathead.R;

public class ChatHeadService extends Service {

 private WindowManager windowManager;
 private ImageView chatHead;

 @Override
 public IBinder onBind(Intent intent) {
  // TODO Auto-generated method stub
  return null;
 }

 @Override
 public void onCreate() {
  super.onCreate();

  windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
  chatHead = new ImageView(this);
  chatHead.setImageResource(R.drawable.chat_head);

  final 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() {
  // TODO Auto-generated method stub
  super.onDestroy();
  if (chatHead != null)
   windowManager.removeView(chatHead);
 }
}

Then we need to start the ChatHeadService class in our activity:

startService(new Intent(context, ChatHeadService.class));  

Also, we can add the action/event in that view.Refer the below code for drag event.

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;
   }
  });

Don't forget to include the following permission in the manifest file:

SYSTEM_ALERT_WINDOW

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




Happy coding :)