Kotlin: Draggable ImageView

Andrew Fenner

There are multiple ways to implement a draggable ImageView in Kotlin for Android. Here’s one way to get started:

For simplicity, use the design tab on your main_activity_xml file to drag a new ImageView to your main activity:

To keep things nice and centered we’ll constrain the image to each side of the layout. Next, we’ll set the ID of our image to draggableImage so we can refer to it in our Kotlin code.

For this tutorial, we’re going to hide the supportActionBar from within our just onCreate function. This is so that we have a nice wide open space for our ImageView to roam free.

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Hide the action bar
val actionBar = supportActionBar

actionBar!!.hide()

Next, we’ll create an OnTouchListener by passing a function to its constructor:

var listener = View.OnTouchListener(function = {view, motionEvent ->

if (motionEvent.action == MotionEvent.ACTION_MOVE) {

view.y = motionEvent.rawY - view.height/2
view.x = motionEvent.rawX - view.width/2
}

true

})

The function we pass takes a view and motionEvent and returns a boolean to let us know if the touch has been successful.

The view is just the view being touched and motionEvent is an event object that allows us to retrieve information about the nature of the touch event. Right now, we’re only interested in the event ACTION_MOVE so we’ll check to see if thats the state of our motionEvent with an ‘if statement’ before moving the view:

if (motionEvent.action == MotionEvent.ACTION_MOVE) {

view.y = motionEvent.rawY - view.height/2
view.x = motionEvent.rawX - view.width/2
}

I want to keep my finger centered in the view so I’m going to place my image to the upper left of the touch event. To do this, we subtract half the width of the view from the rawX value and half the height from the rawY value.

                view.y = motionEvent.rawY - view.height/2
view.x = motionEvent.rawX - view.width/2

rawY and rawX give us the coordinates of the touch with respect the origin of our mainActivity instead of with respect to the origin of our view.

class YourMainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Hide the action bar
val actionBar = supportActionBar

actionBar!!.hide()

setContentView(R.layout.activity_shapes_view)

var listener = View.OnTouchListener(function = {view, motionEvent ->

if (motionEvent.action == MotionEvent.ACTION_MOVE) {

view.y = motionEvent.rawY - view.height/2
view.x = motionEvent.rawX - view.width/2
}

true

})

// Declared in our activity_shapes_view.xml file.
draggableImage.setOnTouchListener(listener)

}
}

The final thing is to assign the listener we just defined to the image we want to drag around the screen. When setting up our view, we gave it the ID “draggableImage” so we can access it directly from our code.

// Declared in our activity_shapes_view.xml file.
draggableImage.setOnTouchListener(listener)

and that’s it!

The final code should look like this:

class YourMainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Hide the action bar
val actionBar = supportActionBar

actionBar!!.hide()

setContentView(R.layout.activity_shapes_view)

var listener = View.OnTouchListener(function = {view, motionEvent ->

if (motionEvent.action == MotionEvent.ACTION_MOVE) {

view.y = motionEvent.rawY - view.height/2
view.x = motionEvent.rawX - view.width/2
}

true

})

// Declared in our activity_shapes_view.xml file.
draggableImage.setOnTouchListener(listener)

}
}

Andrew Fenner

Written by

Learning Architect/Mobile Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade