How does Facebook Messenger draw a chathead? (Android)

问题

I know this has already been asked a lot of times here on StackOverflow, but I'm fascinated how Facebook Messenger draws the Chatheads.

I followed this tutorial to place an ImageView as an overlay. However, dragging it around is very sluggish, unlike Chatheads which show extremely smooth animation.

Turning on the "Show GPU view updates" option in Developer options flashes the screen while a Chathead is being dragged. However, dragging my ImageView doesn't trigger any flashing.

Here's a small screencast: https://dl.dropboxusercontent.com/u/13595927/temp/TRIM_20140225_134543.mp4

I tried setting the layer type to LAYER_TYPE_SOFTWARE, but it didn't change anything. What else am I missing?

回答1:

my chathead like facebook messenger :
https://github.com/henrychuangtw/FB-ChatHead

• Dragging and Bounce animation
  
  
  
  
  
• Messenger : show text and sendtext
  
  
  
  
  
  
  
  • LongPressing to Stop
    
    

回答2:

here is my simple solution: 1) Create a Service (don’t forget to add it in Manifest.xml).

2) Add ImageView (or other View) which you want to be drawn on your window. You must specify exactly the place on the screen via initialization of LayoutParams.

3) Add OnTouchListener to the View you want to move and then calculate in MotionEvent.ACTION_UP (this is when you drop the View) when you must remove it from the screen (in my case when the crumpled paper is in the recycle bin).

4) Don’t forget to add in your Manifest.xml the following code snippet:

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

5) Don’t forget to remove all the views you’ve drawn in onDestroy() in your Service:

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

    // remove views on destroy!
    if (ivCrumpledPaper != null) {
        mWindowManager.removeView(ivCrumpledPaper);
        ivCrumpledPaper = null;
    }

    if (ivRecycleBin != null) {
        mWindowManager.removeView(ivRecycleBin);
        ivRecycleBin = null;
    }
}

6) Here you are the result:

7) I created a blog post which contains more details and full code - here

来源：https://stackoverflow.com/questions/22008740/how-does-facebook-messenger-draw-a-chathead-android