CIS 542 - Spring 2012
Lab Assignment #7
Apr 10, 2012
Due: Apr 24, 4:30pm
In this assignment, you will create a simple "paintbrush" app that allows the user to draw on the screen. The user can choose different colors and stroke widths from a palette.
To make it slightly more complicated, there is a timer that updates once a second and shows the elapsed time since the app was started, and there is also a button that will clear the drawing area.
When the user is drawing with your application, it should look something like this:
Because you are working on your projects, and probably taking other classes, it is strongly recommended that you work with someone else on this assignment. It can certainly be done by one person, but it is advisable to find someone else to help you out.
Step 1. Set up your application
First, create a new Android project (name it whatever you'd like).
To simplify things for you a little bit, we have provided the main.xml file that you should use for your application's Layout. This file is not complete, though; you will have to make some additions to it in order to get all the pieces working together, but this will at least help you figure out where everything should go.
The app consists of three major parts, as indicated in the diagram below. In the rest of this assignment, you will implement each part.
Step 2. Implement the PaletteView
The PaletteView is at the bottom of the screen and should have the following:
Note that the Button is not part of the PaletteView; you will deal with that later.
- Five colored boxes for selecting the paintbrush color (they don't have to be the same colors in the screen capture above)
- Text for changing the stroke width to be thin or thick
- A timer that increments once per second
When the user clicks on one of the colored boxes, that should set the color in a Paint object that is used to draw the lines in the PaintBrushView.
Likewise, when the user clicks "thin", it should set the strokeWidth in the Paint object to 2, and when the user clicks "THICK", the strokeWidth should be 6.
The timer is somewhat tricky. First of all, you have to use a background thread (AsyncTask) so that it updates once a second. Second of all, you have to make sure that the number of seconds is always shown as two digits, e.g. after 67 seconds it should show "1:07", not "1:7".
Make sure your the color and strokeWidth parts of the PaletteView are working properly before moving onto Step 3 (you can put off the timer until later if you're not sure how to do that part).
Step 3. Implement the PaintBrushView
The PaintBrushView is the drawing area in the middle of the screen. It allows the user to draw by detecting MotionEvents and rendering the user's strokes using the color and strokeWidth chosen by the Palette. Note that the user is not simply selecting start and end points: the app should allow the user to draw using continuous motions ("strokes") in the View, as shown above.
This part can be pretty tricky, so make sure you give yourself a lot of time for it. A few things to look out for:
Once you've figured this out, please be careful about posting "am I doing this right?" questions on Piazza; it's important that all students figure this out for themselves! Ask a member of the instruction staff if you think you've solved this but aren't quite sure.
- Don't just draw squares/dots at all the points where you detect MotionEvents; this will not create a "smooth" drawing
- When the user stops making a drawing (i.e., when they lift their finger and there is a MotionEvent.ACTION_UP), and then they start again, there should not be a line connecting the two strokes
- Each stroke may have its own color/strokeWidth, of course
Step 4. Implement the Clear Button
Last, create a handler method for the Clear Button so that PaintBrushView clears all of the strokes that have been created on it.
As in the previous lab assignments, you may work with one other student on this assignment (even when you are outside the lab). However, you may not discuss or share solutions with any other students, nor should you be receiving any help from outside sources, including students not taking this course or online resources. If you run into problems, please ask a member of the teaching staff for help. Failure to abide by the academic honesty guidelines will result in a grade of 0 for this assignment.
This assignment is due at 4:30pm on Tuesday, April 24. After that, late submissions will be subject to a 10% per day deduction.
If you are working with another student, only one of you needs to submit this assignment.
For this particular assignment, please follow these specific instructions:
Please be sure that you are only submitting one zip or tar file that includes your Eclipse project and your README file.
- You need to submit the entire Eclipse project for your application. Go into the parent directory of the Eclipse project on your file system (not the directory itself!), and tar or zip the project directory. If you don't know how to do this, ask someone for help!
- Your homework submission should also include a README file. This should be a plain-text file that lists: your name and the name of the person you worked with; the Android SDK and Eclipse versions that you used for your assignment; your host operating system (Mac, Linux, Windows, etc.); and, any known issues with your program. This file should be in the root directory of your Eclipse project (not its parent!).
Failure to properly follow the submission instructions could result in a delay of grading your assignment and/or a lateness penalty, so please be sure to do it correctly!
Updated: Mon Apr 9, 6:07pm