Test Script

Wednesday, May 8, 2013

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_PHONEparameter, 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 !














8 comments:

  1. Can you give me full source code...?
    Please...

    Because your code still error when i try to implement it....

    Thank You...

    ReplyDelete
    Replies
    1. Thats the entire source code & it works fine for me ! The only other file missing is Android Manifest which has just the declaration of the activity & a service. What error are you getting?

      Drop me your email id i will mail you the entire source code anyways !

      Delete
  2. I get error in
    super.onCreate();
    *undefined type provider.service

    windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
    *WINDOW_SERVICE can't resolved variabel

    And Many More....

    If you can mail your entire source code, please send to velyshredder@gmail.com

    Thank you...

    ReplyDelete
  3. Can you give me full source code...?
    Please send my mail id city0666@gmail.com

    ReplyDelete
  4. Can you give me also? Thanks
    murky.ray@gmail.com

    ReplyDelete
  5. Have you posted the source somewhere or could you send me it ian.hutty@intellifix.com

    ReplyDelete

UA-42774700-1 Twitter Bird Gadget