Individual Programming Assignment 2

From CS160 Spring 2014
Jump to: navigation, search

Due 11:59pm on Friday 2/14


In this assignment you will build an application that allows users to paint on top of images, turning painted regions into grayscale instead of color.

The purpose of the assignment is to deepen your understanding of drawing and touch event-handling on the Android platform.

You will submit three things:

  1. your source code
  2. your executable (Make sure your executable has all resources that it needs to run.)
  3. a narrated video demo of your app.

Design Requirements


  • Application:
    • Create an application that allows users select from a set of images, and recognizes and responds to touch events
    • Using the touch data, change the image to grayscale in the regions that are painted over. Continuous dragging should produce continuous lines of converted grayscale on the image.
    • User must be able to switch between "drawing" (strokes that change image from color to grayscale) and "erasing" (strokes that change image from grayscale back to color)
    • User must be able to clear the strokes to reset the screen back to the full-color loaded image
    • User must be able to change the brush size for drawing/erasing.
  • Video: Submit a narrated video demo of your application, 60-90 seconds in lengths, that shows and describes the features.

One way to satisfy the application functionality requirements is to create an application with two views: one of the canvas, and another of an options screen that lets the user change modes and adjust settings.

Extra credit: Up to 5 extra credit points are available if you design and implement more features, such as:

  • Implement an undo/redo stack in your app.
  • Add blur and sharpen brush filters (and UI to preview the different filters and swap between them).
  • Zooming and panning the canvas.
  • Add editable vector primitives to your app, such as arrows or speech bubbles.




You need to load an image. You will likely use a BitmapFactory to create the image bitmap. You will need to work with multiple bitmaps behind the scenes, corresponding to the user's input strokes, the original image, the grayscale image, and the currently displayed image.


First you need to get the user's input. You will need an OnTouchListener over the paint window to catch touch events.

There are a few ways to paint in Android. One way is to paint directly on a View object. If performance is an issue, i.e. for real-time graphics as the case here, its preferred to paint onto a Canvas object which gives the programmer more control and is usually faster. To do this, define a custom class which extends View and override its onDraw method. onDraw is where you do your drawing. onDraw will automatically be called with a Canvas object argument, so you dont need to extract the canvas from the View. In order to draw on the canvas, you will need to create one or more paint objects with the desired colors. (see the Canvas and Drawing developer guide).

To put this custom View object in the hierarchy, create an instance of it in the main onCreate() method as you would for other Views, and then make it a child of a View or Layout widget that you have included in your XML layout file using View.addView. The new view will have "fill_parent" attributes by default, and so will fill available space which is probably what you want.

Because painting in Android (like most other GUI toolkits) is "smart", the display doesn't automatically change when you paint on the canvas. Instead you have to tell android that the image really changed by calling View.invalidate().

This is by no means a brilliant design. You are free to design your own app provided that it has at least the functionality as enumerated above.

Screencast Video

  • What your screencast should contain:
    • Narrated walkthrough of the interface from the user's perspective
    • No implementation details
    • In the end, point out any extra credit points
    • Be CONCISE. Your video shouldn't be longer than 90 seconds for the basic functionality. You may use additional time to point out possible extra credit features.
    • Be prepared to do multiple takes; writing a script down first is helpful.
    • Don't record the entire screen - only record the Android emulator window.

There are different free software packages available to create narrated screencasts. Here are some options:

Please crop your video to only show the emulator - we don't need to see your entire desktop.

Grading criteria

This assignment is out of 20 points

  • 5 points - Usability (you may lose points for design problems, even if your application formally fulfills the requirements. Examples of problems that will cost points are: color choices that make the interface hard to read; inappropriate sizing and positioning, overly complicated and onerous sequences of steps required to complete tasks, lack of feedback, etc.)
  • 3 points - Continuous dragging must produce continuous converted color strokes on the image
  • 3 points - Strokes must make the image change from color to grayscale (or vice versa) in real time, without noticeable lag
  • 3 points - User must be able to switch between "grayscale -> color" and "color -> grayscale" modes (drawing/erasing).
  • 2 points - User must be able to change brush size for drawing/erasing
  • 2 points - User must be able to reset the screen back to the full-color loaded image
  • 2 points - User must be able to select from multiple images on which to draw

Up to 5 extra points will be given if you implement additions that make the application more usable or more useful. (See Extra Credit ideas above)

Sample Solution

The media player is loading...

Submission Instructions

Create a Wiki Page for this assignment

Begin by creating a new wiki page for this assignment. Go to your user page. Edit your user page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[ProgrammingAssignment2-FirstName_LastName|Programming Assignment 2]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should describe any extra credit functionality you implemented and want us to review.

Upload Project

  • Your submitted project must include the full source code as well as the executable of the working application and the video.
  • Create a zip file of your project tree (the top-level folder that includes the Eclipse project. Rename the zip file to
  • Upload the zip file to an EECS instructional machine


  • Once you've uploaded the file, ssh into the machine and submit your assignment:


submit ipa2

  • Upload or link your video file to the ProgrammingAssignment2-FirstNameLastName page you just created. Post a link to the video on YouTube (the mediaplayer plugin is having trouble with video files that are not uploaded to YouTube.)
    • YouTube link: Add a link to your submission page like this: <mediaplayer></mediaplayer>.

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[ProgrammingAssignment2-FirstName_LastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

Links to Finished Assignments

Add your submission below this line.