how to make overlay window view clickable and touchable in android

Question

I am trying to learn how to create an overlay window similar to Facebook chat head messenger icon in Android.

I managed to create the following class which enabled me to create an overlay window view similar to fb's chat head. however, I am having difficulty with the Clickable Listener and Touchable Listener. Touchable Listener doesn't work if I use Clickable Listener and vice-versa.

I want the overlay window view to be clickable to resume the application when I tap on it and touchable to move the icon anywhere on the screen.

Code:

public class FloatingViewService extends Service {

private WindowManager mWindowManager;
private View mFloatingView;

@Override
public IBinder onBind(Intent intent) {
    return null;
}

@Override
public void onCreate() {
    super.onCreate();
    Log.d(TAG, "onCreate: Floating Service is create");

    //the xml file
    //Inflate the floating view layout we created
    mFloatingView = LayoutInflater.from(this).inflate(R.layout.layout_floating_widget, null);

    //Add the view to the window.
    final WindowManager.LayoutParams params = new WindowManager.LayoutParams(
            WindowManager.LayoutParams.WRAP_CONTENT,
            WindowManager.LayoutParams.WRAP_CONTENT,
            LAYOUT_FLAG,
            WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
            PixelFormat.TRANSLUCENT);



    //Specify the view position
    params.gravity = Gravity.TOP | Gravity.LEFT;        //Initially view will be added to top-left corner
    params.x = 0;
    params.y = 100;

    //Add the view to the window
    mWindowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
    mWindowManager.addView(mFloatingView, params);

    //The root element of the iconView view layout
    final View iconView = mFloatingView.findViewById(R.id.icon_view);


    //the icon view inside the xml file
    //Open the application on the tap click
    iconView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            //Open the application with click.
            Intent intent = new Intent(FloatingViewService.this, MyActivity.class);
            startActivity(intent);

            //close the service and remove view from the view hierarchy
            stopSelf();
        }
    });

    //Drag and move floating view using user's touch action.
    mFloatingView.findViewById(R.id.root_container).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:

                    //remember the initial position.
                    initialX = params.x;
                    initialY = params.y;

                    //get the touch location
                    initialTouchX = event.getRawX();
                    initialTouchY = event.getRawY();
                    return true;
                case MotionEvent.ACTION_UP:
                    return true;
                case MotionEvent.ACTION_MOVE:
                    //Calculate the X and Y coordinates of the view.
                    params.x = initialX + (int) (event.getRawX() - initialTouchX);
                    params.y = initialY + (int) (event.getRawY() - initialTouchY);


                    //Update the layout with new X & Y coordinate
                    mWindowManager.updateViewLayout(mFloatingView, params);
                    return true;
            }
            return false;
        }
    });
}


@Override
public void onDestroy() {
    super.onDestroy();
    if (mFloatingView != null) mWindowManager.removeView(mFloatingView);
}
}

Answer 1

You can record current timemillis when your ACTION_DOWN event was triggered, so you can do something you want like handle onclick in your ACTION_UP event.

Answer 2

public class FloatingViewService extends Service {

    private WindowManager mWindowManager;
    private View mFloatingView;
    private long interval = 0;


    @Override
    public IBinder onBind(Intent intent) {
        return null;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        Log.d(TAG, "onCreate: Floating Service is create");

        //the xml file
        //Inflate the floating view layout we created
        mFloatingView = LayoutInflater.from(this).inflate(R.layout.layout_floating_widget, null);

        //Add the view to the window.
        final WindowManager.LayoutParams params = new WindowManager.LayoutParams(
                WindowManager.LayoutParams.WRAP_CONTENT,
                WindowManager.LayoutParams.WRAP_CONTENT,
                LAYOUT_FLAG,
                WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
                PixelFormat.TRANSLUCENT);


        //Specify the view position
        params.gravity = Gravity.TOP | Gravity.LEFT;        //Initially view will be added to top-left corner
        params.x = 0;
        params.y = 100;

        //Add the view to the window
        mWindowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
        mWindowManager.addView(mFloatingView, params);

        //The root element of the iconView view layout
        final View iconView = mFloatingView.findViewById(R.id.icon_view);


        //the icon view inside the xml file
        //Open the application on the tap click
        iconView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //Open the application with click.
                Intent intent = new Intent(FloatingViewService.this, MyActivity.class);
                startActivity(intent);

                //close the service and remove view from the view hierarchy
                stopSelf();
            }
        });

        //Drag and move floating view using user's touch action.
        mFloatingView.findViewById(R.id.root_container).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:
                        interval = System.currentTimeMillis();
                        //remember the initial position.
                        initialX = params.x;
                        initialY = params.y;

                        //get the touch location
                        initialTouchX = event.getRawX();
                        initialTouchY = event.getRawY();
                        return true;
                    case MotionEvent.ACTION_UP:

                        if ((System.currentTimeMillis() - interval) < 300) {
                            // if time is less than 300 ms it means the user has clicked your view.
                            // handle your click here
                        } else {
                            //Calculate the X and Y coordinates of the view and update view
                            params.x = initialX + (int) (event.getRawX() - initialTouchX);
                            params.y = initialY + (int) (event.getRawY() - initialTouchY);


                            //Update the layout with new X & Y coordinate
                            mWindowManager.updateViewLayout(mFloatingView, params);
                        }


                        return true;
                    case MotionEvent.ACTION_MOVE:
                        //Calculate the X and Y coordinates of the view.
                        params.x = initialX + (int) (event.getRawX() - initialTouchX);
                        params.y = initialY + (int) (event.getRawY() - initialTouchY);


                        //Update the layout with new X & Y coordinate
                        mWindowManager.updateViewLayout(mFloatingView, params);
                        return true;
                }
                return false;
            }
        });
    }


    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mFloatingView != null) mWindowManager.removeView(mFloatingView);
    }
}