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 and the square outline green.
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 enters the new solid red square it should be trapped - it can move around inside the square but it can never leave.

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>