1. CIS 470 Mobile App Development
Lecture 22
Wenbing Zhao
Department of Electrical Engineering and Computer Science
Cleveland State University
9/10/2019
CIS 470: Mobile App Development

2. CIS 470: Mobile App Development
Outline
Basic Painting with Views
9/10/2019
CIS 470: Mobile App Development

3. CIS 470: Mobile App Development
Basic Painting with Views
Build a custom view that allows the user to paint on the screen by pressing down their finger
This will illustrate how to build custom components, how to draw shapes and paths on a view and also how to handle user touch interactions
9/10/2019
CIS 470: Mobile App Development

4. CIS 470: Mobile App Development
Main Activity Layout
<RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.wenbing.simplepaint.SimpleDrawingView 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" /> </RelativeLayout>
9/10/2019
CIS 470: Mobile App Development

5. CIS 470: Mobile App Development
MainActivity
import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
9/10/2019
CIS 470: Mobile App Development

6. CIS 470: Mobile App Development
Creating Custom View
Create a new project and name it SimplePaint
Add a new Java class named SimpleDrawingView
public class SimpleDrawingView extends View {
// setup initial color private final int paintColor = Color.BLACK;
// defines paint and canvas
private Paint drawPaint;
public SimpleDrawingView(Context context, AttributeSet attrs) {
super(context, attrs);
setFocusable(true);
setFocusableInTouchMode(true);
setupPaint(); }
// Setup paint with color and stroke styles
private void setupPaint() {
drawPaint = new Paint();
drawPaint.setColor(paintColor);
drawPaint.setAntiAlias(true);
drawPaint.setStrokeWidth(5);
drawPaint.setStyle(Paint.Style.STROKE);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
// Let's draw three circles
@Override
protected void onDraw(Canvas canvas) {
canvas.drawCircle(50, 50, 20, drawPaint);
drawPaint.setColor(Color.GREEN);
canvas.drawCircle(50, 150, 20, drawPaint);
drawPaint.setColor(Color.BLUE);
canvas.drawCircle(50, 250, 20, drawPaint); }
9/10/2019
CIS 470: Mobile App Development

7. CIS 470: Mobile App Development
Handling Touch Interactions
private List<Point> circlePoints;
public SimpleDrawingView(Context context, AttributeSet attrs) {
super(context, attrs); setupPaint(); // same as before
circlePoints = new ArrayList<Point>(); }
// Draw each circle onto the view
@Override
protected void onDraw(Canvas canvas) {
for (Point p : circlePoints) {
canvas.drawCircle(p.x, p.y, 5, drawPaint);
// Append new circle each time user presses on screen
public boolean onTouchEvent(MotionEvent event) {
float touchX = event.getX(); float touchY = event.getY();
circlePoints.add(new Point(Math.round(touchX), Math.round(touchY)));
// indicate view should be redrawn
postInvalidate();
return true;
private void setupPaint() {
// same as before
drawPaint.setStyle(Paint.Style.FILL);
// change to fill // ...
Suppose now we wanted to draw a circle every time the user touches down on the drawing view. This would require us to keep track of an array of points for our circles and then append a point for each onTouch event triggered
9/10/2019
CIS 470: Mobile App Development

8. CIS 470: Mobile App Development
Handling Touch Interactions
9/10/2019
CIS 470: Mobile App Development

9. CIS 470: Mobile App Development
Drawing with Paths
We can improve our drawing application by removing the list of circles and instead drawing with paths
The Path class is ideal for allowing the user to draw on screen
A path can contain many lines, contours and even other shapes
Next, let's append points to the path as the user touches the screen. When the user presses down, let's start a path and then when they drag let's connect the points together
To do this, we need modify the onTouchEvent to append these points to our Path object
9/10/2019
CIS 470: Mobile App Development

10. CIS 470: Mobile App Development
private Path path = new Path();
// Get x and y and append them to the path
public boolean onTouchEvent(MotionEvent event) {
float pointX = event.getX();
float pointY = event.getY();
// Checks for the event that occurs
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Starts a new line in the path
path.moveTo(pointX, pointY);
break;
case MotionEvent.ACTION_MOVE:
// Draws line between last point and this point
path.lineTo(pointX, pointY);
default:
return false; }
postInvalidate(); // Indicate view should be redrawn
return true; // Indicate we've consumed the touch
// Draws the path created during the touch events
@Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(path, drawPaint);
private void setupPaint() {
// same as before
drawPaint.setStyle(Paint.Style.STROKE); // change back to stroke
// ...
Drawing with Paths
9/10/2019
CIS 470: Mobile App Development

11. CIS 470: Mobile App Development
Homework #23
Add a toggle button at the top of the main layout to change the way the drawing is done: (1) using circle, (2) using path
9/10/2019
CIS 470: Mobile App Development