Mobile App Dev 2022W: Tutorial 8

Documentation

• Android: Drawables from xml
• Android: Drag an object
• Android: getLocationOnScreen

Questions

1. 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?
2. What is the difference between how the circle and square are drawn on the screen?
3. How is the circle moved?
4. What happens to the position of the circle when the screen is rotated? Why?
5. What is the position of the circle in onCreate? How does this compare to its position inside trackCircle?

Tasks

1. Change the initial text to say "Welcome!" The app should still give directions once the user starts dragging the circle.
2. Remove the title bar saying "Drag Demo 3"
3. Move the status text to the top. Don't use any fixed coordinate values or biases.
4. Make the circle solid green and the square outline green. (Neither should be blue or red anymore.)
5. Make a new square in the center that is solid red in color. Make sure its position isn't specified using any coordinates.
6. 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

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>