Search code examples
androidkotlintouchscreenmotionevent

Android: Display ImageView on the Activity after touching the screen and then move with finger

I have an app. The app now does that when I tap anywhere on the screen, it displays an ImageView at the point of touch. This is hapening in the MotionEvent.ACTION_DOWN. I would like the app to do the following: as long as I touch the screen with my finger and move it the ImageView follows the line of my finger. How can I implement this in MotionEvent.ACTION_MOVE ?

Here is the activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
</RelativeLayout>

and here is the MainActivity.kt :

class MainActivity : AppCompatActivity() {
    @SuppressLint("ClickableViewAccessibility", "UseCompatLoadingForDrawables")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rr = findViewById<View>(R.id.relative_layout) as RelativeLayout


        rr.setOnTouchListener { v, event ->
            if (event.action == MotionEvent.ACTION_DOWN) {

                val x = event.x.toInt()
                val y = event.y.toInt()

                val lp = RelativeLayout.LayoutParams(
                    RelativeLayout.LayoutParams.WRAP_CONTENT,
                    RelativeLayout.LayoutParams.WRAP_CONTENT
                )

                val iv = ImageView(applicationContext)
                lp.setMargins(x, y, 0, 0)

                iv.layoutParams = lp

                iv.setImageDrawable(
                    resources.getDrawable(
                        R.drawable.ic_baseline_blur_circular_24
                    )
                )
                (v as ViewGroup).addView(iv)
            }
            if (event.action == MotionEvent.ACTION_MOVE) {
                // what should i do here to move the ImageView follow my finger?

            }
            false
        }
    }
}

When I touch the screen anyywhere:

enter image description here

Solution

  • I solved this problem:

    class MainActivity : AppCompatActivity() {

    @SuppressLint("ClickableViewAccessibility")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val relativeLayout = findViewById<RelativeLayout>(R.id.relative_layout)
        val yourImage = findViewById<ImageView>(R.id.image_view)

        relativeLayout.setOnTouchListener(View.OnTouchListener { view, event ->

            val newX: Float
            val newY: Float

            when (event?.action) {
                MotionEvent.ACTION_DOWN -> {
                    val x = event.x
                    val y = event.y
                    yourImage.setX(x - yourImage.getWidth() / 2)
                    yourImage.setY(y - yourImage.getHeight() / 2)
                    yourImage.isVisible = true
                }
                MotionEvent.ACTION_MOVE -> {
                    val x = event.x
                    val y = event.y
                    yourImage.setX(x - yourImage.getWidth() / 2)
                    yourImage.setY(y - yourImage.getHeight() / 2)
                }
                ACTION_UP -> {
                    yourImage.isVisible = false
                }
                else -> { // Note the block
                    return@OnTouchListener false
                }
            }
            true
        })
    }
}