Facebook Style Cross Button to remove chat head in android

Question

I have been working on an android application, in which i need to implement chat head functionality. I have been able to create the chat head but unable to find a way in which i can add the Cross button that appears on long click and drag of the icon. What I want to know is what is that cross icon and how on drag and drop it can be overlayed on the existing screen just like the chat head itself. Is that another chat head or something else?

Answer 1

I work on the Tooleap SDK which provides chat heads functionality to apps. I've also investigate this issue, and it seems that the bottom cross icon is not a chat head, but a transparent view that takes the entire bottom third of the screen (You can notice it by the tint that appears around the icon). inside of that view there is another view, which is the cross icon itself. Because the view is transparent, the chat head appears to be displayed on top of that view.

Answer 2

mWindowManager = (WindowManager) getSystemService(WINDOW_SERVICE);

//get the screen size to decide the area from where u want to drag and remove the bubble.

    Display display = mWindowManager.getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        screenWidth = size.x;
        screenHeight = size.y;

        LayoutInflater inflater = LayoutInflater.from(this);
        mChatHead = inflater.inflate(R.layout.chatheaddemo, null);
        mChatHeadImageView = (ImageView) mChatHead
                .findViewById(R.id.chathead_imageview);
        mChatHeadTextView = (TextView) mChatHead
                .findViewById(R.id.chathead_textview);
        mLayout = (LinearLayout) mChatHead
                .findViewById(R.id.chathead_linearlayout);


        final WindowManager.LayoutParams parameters = new WindowManager.LayoutParams(
                WindowManager.LayoutParams.WRAP_CONTENT, 
                WindowManager.LayoutParams.WRAP_CONTENT, 
                WindowManager.LayoutParams.TYPE_PHONE, 
                WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, 
                PixelFormat.TRANSLUCENT 
        );

        parameters.x = 0;
        parameters.y = 50;
        parameters.gravity = Gravity.TOP | Gravity.LEFT;

        // Drag support!
        mChatHeadImageView.setOnTouchListener(new OnTouchListener() {

            int initialX, initialY;
            float initialTouchX, initialTouchY;

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

                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    initialX = parameters.x;
                    initialY = parameters.y;
                    initialTouchX = event.getRawX();
                    initialTouchY = event.getRawY();
                    mChatHeadTextView.setText("BDCS!!!");
                    Toast.makeText(getApplication(),
                            "Drag and remove!", Toast.LENGTH_SHORT)
                            .show();
                    return true;

                case MotionEvent.ACTION_MOVE:
                    mChatHeadTextView.setVisibility(View.GONE);
                    parameters.x = initialX
                            + (int) (event.getRawX() - initialTouchX);
                    parameters.y = initialY
                            + (int) (event.getRawY() - initialTouchY);
                    mWindowManager.updateViewLayout(mChatHead, parameters);
                    return true;

                case MotionEvent.ACTION_UP:

                    if (parameters.y > screenHeight * 0.8) {
                        mChatHead.setVisibility(View.GONE);
                        Toast.makeText(getApplication(), "Removed!",
                                Toast.LENGTH_SHORT).show();
                        stopSelf();
                    }

                    if (parameters.x < screenWidth / 2) {
                        mLayout.removeAllViews();
                        mLayout.addView(mChatHeadImageView);
                        mLayout.addView(mChatHeadTextView);
                        mChatHeadTextView.setVisibility(View.VISIBLE);

                    } else { // Set textView to left of image
                        mLayout.removeAllViews();
                        mLayout.addView(mChatHeadTextView);
                        mLayout.addView(mChatHeadImageView);
                        mChatHeadTextView.setVisibility(View.VISIBLE);
                    }
                    return true;

                default:
                    return false;
                }`enter code here`
            }
        });

        mWindowManager.addView(mChatHead, parameters);

This removes the bubbles after dragging at the defined location.