How to add smooth movement, relative positioning and animations to chat heads like views

Question

I am using "Draw over other aps" to show a chat head like view.
I need to position it relatively and show animation while dismissing it.

Please see first video/gif of google:
Please note:
a) In first video: the view can be position relative to screen blocks designed by system.
b) The movement is smooth.
c) While dismissing/closing view an animation cross is displayed.

Please see second video/gif of my app:
The movement is not that smooth, its plain and no animation.

Below is my code:

floatingView.setOnTouchListener(object : View.OnTouchListener {
        private var initialX = 0
        private var initialY = 0
        private var initialTouchX = 0f
        private var initialTouchY = 0f

        override fun onTouch(v: View, event: MotionEvent): Boolean {
            when (event.action) {
                ACTION_UP -> {
                    overlayView.visibility = INVISIBLE
                    if (v.isOverlap(overlayView)) {
                        stopSelf()
                    }
                    return false
                }
                ACTION_MOVE -> {
                    overlayView.visibility = View.VISIBLE
                    layoutParams.x = (initialX + (event.rawX - initialTouchX).toInt())
                    layoutParams.y = (initialY + (event.rawY - initialTouchY).toInt())
                    windowManager.updateViewLayout(floatingView, layoutParams)
                    return false
                }
                ACTION_DOWN -> {
                    initialX = layoutParams.x
                    initialY = layoutParams.y
                    initialTouchX = event.rawX
                    initialTouchY = event.rawY
                    return false
                }
            }
            return false
        }
    }

How should I tweak it to achieve the first video ?

I am using WindowManager.LayoutParams

var floatingView = LayoutInflater.from(this).inflate(R.layout.chat, null)
var windowManager: WindowManager getSystemService(WINDOW_SERVICE) as WindowManager
var layoutParams: WindowManager.LayoutParams = WindowManagerLayoutParams(WRAP_CONTENT, WRAP_CONTENT, LAYOUT_FLAG, FLAG_NOT_FOCUSABLE, TRANSLUCENT).apply {
            gravity = TOP or START
            x = 0
            y = 100
        }
windowManager.addView(floatingView, layoutParams)

Answer 1

Please try below code and check if it's not working then tell me.

     @SuppressLint("ClickableViewAccessibility")
private fun onTouchListener()
        : View.OnTouchListener {
    return View.OnTouchListener { view, event ->
        val x = event.rawX.toInt()
        val y = event.rawY.toInt()

        when (event.action and MotionEvent.ACTION_MASK) {
            MotionEvent.ACTION_DOWN -> {
                val lParams = view.layoutParams as RelativeLayout.LayoutParams
                xDelta = x - lParams.leftMargin
                yDelta = y - lParams.topMargin
            }
            MotionEvent.ACTION_UP -> {

            }
            MotionEvent.ACTION_MOVE -> {
                val layoutParams = view
                    .layoutParams as RelativeLayout.LayoutParams
                layoutParams.leftMargin = x - xDelta
                layoutParams.topMargin = y - yDelta
                layoutParams.rightMargin = 0
                layoutParams.bottomMargin = 0
                view.layoutParams = layoutParams
            }
        }
        your_view.invalidate()
        true
    }
}