Documentation
Questions
- How does this code determine the center of the square and the circle, relative to where the user touched the screen? How does this compare to how we did this in Tutorial 3?
- What is the difference between how the circle and square are drawn on the screen?
- How is the circle moved?
- What happens to the position of the circle when the screen is rotated? Why?
- What is the position of the circle in onCreate? How does this compare to its position inside trackCircle?
Tasks
- Change the initial text to say "Welcome!" The app should still give directions once the user starts dragging the circle.
- Remove the title bar saying "Drag Demo 3"
- Move the status text to the top. Don't use any fixed coordinate values or biases.
- Make the circle solid green and the square outline green. (Neither should be blue or red anymore.)
- Make a new square in the center that is solid red in color. Make sure its position isn't specified using any coordinates.
- Make it so that if the circle is ever left placed inside the new solid red square it should be trapped - it can move around inside the square but it can never leave. Note that it should be possible for a user to drag the circle through the red square without it becoming trapped. The trap should only trigger if the drag ends inside of the red square.
Code
package carleton.comp1601.dragdemo3
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MotionEvent
import android.view.View
import kotlin.math.abs
import android.widget.TextView
class MainActivity : AppCompatActivity() {
private lateinit var redCircle: View
private lateinit var blueSquare: View
private lateinit var status: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
redCircle = findViewById(R.id.redCircle)
redCircle.setOnTouchListener(trackCircle)
blueSquare = findViewById(R.id.blueSquare)
status = findViewById(R.id.status)
}
val trackCircle = object: View.OnTouchListener {
override fun onTouch(v: View?, event: MotionEvent?): Boolean {
if (event == null || v == null) {
return false
}
val action = event.getAction()
val x = event.rawX
val y = event.rawY
var circleScreenLoc = IntArray(2)
redCircle.getLocationOnScreen(circleScreenLoc)
val circleOffsetX = circleScreenLoc[0] - redCircle.x
val circleOffsetY = circleScreenLoc[1] - redCircle.y
if (action == MotionEvent.ACTION_MOVE) {
redCircle.x = x - (redCircle.width/2 + circleOffsetX)
redCircle.y = y - (redCircle.height/2 + circleOffsetY)
}
var squareScreenLoc = IntArray(2)
blueSquare.getLocationOnScreen(squareScreenLoc)
val squareCenterX = squareScreenLoc[0] + blueSquare.width/2
val squareCenterY = squareScreenLoc[1] + blueSquare.height/2
if ((abs(x - squareCenterX) < 50) and
(abs(y - squareCenterY) < 50)) {
status.setText("Success!")
} else {
status.setText("Drag the circle into the box")
}
return true
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/blueSquare"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="20dp"
android:layout_marginStart="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/square" />
<ImageView
android:id="@+id/redCircle"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="@drawable/circle" />
<TextView
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Drag the circle into the box"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff0000"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="10dp" android:color="#0000ff" />
</shape>