` CS151

CS 151 - Lecture 19

Cover page image

Cay S. Horstmann

Project Status Update

LogCat

Remember—no System.out
Log manager collects, presents logging messages
Can see LogCat output in Android Studio
Can attach device to USB and get logs
```
adb logcat
```
Lots of apps to inspect the logs on a device, e.g. CatLog
API makes it as easy as possible:
```
Log.e(getClass().toString(), message);
```
Log.d for debug, Log.w for warnings etc.
First parameter is tag (for filtering), second is message text

Canvas

In Android, components are views: TextView, Button, etc.
Can draw on a plain View
- Subclass and override
```
protected void onDraw(Canvas canvas)
```
Canvas is like Graphics2D
Don't have Shape classes
- Instead, call methods
```
canvas.drawCircle(50, 250, 20, paint)
```
Paint object has color, stroke width, and so on.

Touch Events

Similar to mouse, mouse motion events in Swing
You don't add a listener.

Instead, override onTouchEvent:

public boolean onTouchEvent(MotionEvent event) {
int x = Math.round(event.getX()); // It's a float
int y = Math.round(event.getY());
int action = event.getActionMasked();
if (action == MotionEvent.ACTION_DOWN) { . . . }
return true;
}

If you update the view, force repaint by calling
```
postInvalidate();
```

Lab

Work with a buddy
Both of you submit a screen shot of your app on androidLab/screen3.png via Git

Painting

Adapted from https://github.com/codepath/android_guides/wiki/Basic-Painting-with-Views

Make a new project, as before. Add this class:

public class SimpleDrawingView extends View {
    public SimpleDrawingView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

Add this to the layout XML, adjusting the package name as necessary:

<edu.sjsu.cs151.graphicsdemo.SimpleDrawingView
    android:id="@+id/simpleDrawingView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true" />

Add this method:

@Override protected void onDraw(Canvas canvas) {
    Paint paint = new Paint();
    paint.setStrokeWidth(5);
    paint.setStyle(Paint.Style.STROKE);
    canvas.drawRect(new Rect(10, 20, 30, 40), paint);
}

Run the program. You should now see a square being painted.
Look at the documentation of Rect. Why is it a square?

Touch Operations

Now we want to add more squares when the user clicks with the mouse. Add an instance variable private Rect square. Add this code to the onDraw method:
```
if (square != null) canvas.drawRect(square, paint);
```
Add an onTouchEvent method to your view class. Inside, add this code:
```
square = new Rect(x - 10, y - 10, 20, 20);
```
Run your program. What happens?
That's weird. Let's see if the onDraw method got called. Add a statement
```
Log.i(getClass().getName(), "onDraw square=" + square);
```
Run your program. You should see the log message at least once in the Run window.
Click on the view. Do you see a log message? If not, check whether you forced redrawing (see the slides). If you didn't, recompile and re-run. Now you should really see the message when you click.
Why isn't the square showing up? It's not null. (Hint: Carefully read through the documentation of Rect. It may also be helpful to click all the way in the top left corner.)
Now fix the code so the square shows up.

Dragging

Now we want to add a bunch of squares. Replace the rect instance variable with an ArrayList<Rect> rects. In the onDraw method, draw them all:
```
for (Rect r : rects) 
   canvas.drawRect(r, paint);
```
In the onTouchEvent method, add a new one at the touch location:
```
Rectangle current = new Rect(x - 10, y - 10, x + 10, y + 10);
rects.add(current);
```
Run your program. If all is well, you should see a bunch of rectangles, one for each touch.

Now we want to move the rectangle that is being touched. First, make current an instance variable since we need to remember it from one touch to the next. Then add this method:

private Rect find(int x, int y)
{
    for (Rect r : rects)
        if (r.contains(x, y)) return r;
            return null;
}

In the onTouchEvent method, add a new rectangle only if one doesn't touch an existing one:

int action = event.getActionMasked();
if (action == MotionEvent.ACTION_DOWN) {
    current = find(x, y);
    if (current == null) { . . . }
}

Also add a case

else if (action == MotionEvent.ACTION_MOVE) {
    current.set(x - 10, y - 10, x + 10, y + 10);
}

What happens when you touch a rectangle and drag it? Why?