Mobile App Dev 2022W: Tutorial 8

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?

Code

app/src/main/java/carleton/comp1601/dragdemo3/MainActivity.kt

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
        }
    }
}

app/src/main/res/layout/activity_main.xml

<?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>

app/src/main/res/drawable/circle.xml

<?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>

app/src/main/res/drawable/square.xml

<?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>