AS1: Doodle

Last revised: 10:30 PM Tuesday, March 31, 2020
Assigned:
  • Wednesday, April 1, 2020
Due:
  • Code
    Due 10:00pm, Thursday, April 9, 2020
    Lock 10:00pm Saturday, April 11, 2020
  • Peer evaluation
    Out late Saturday night or Sunday morning
    Due 10:00pm, Tuesday April 14, 2020
  • Reflection
    Due 10:00PM Wednesday April 15, 2020

Android Goals:

  • Get familiar with Android Studio
  • Understand XML and View
  • Load image and drawable resources
  • Learn Activity Lifecycle

HCI Goals:

  • Use abstractions to draw on screen
  • Create animations
  • Use coordinate transformation
  • Try to create something appealing

Assignment Description

For this assignment, you will be creating an activity class which will allow you to create “Doodles” consisting of images, lines, and text.

This assignment will take about 6 - 8 hours to complete. You should expect this amount of workload on most assignments this quarter, so make sure to build good habits when completing it.

If you find yourself taking additional time on this submission, we strongly suggest that you get in touch with the course staff on Ed or in person.

The assignment is broken into four parts

Part 1: Learning by Doing

Tasks:

Prepping your development environment

Instructions for downloading and installing the Android development environment are on our schedule page and have been sent out through our Ed discussion platform. Please come to our first section or office hours if you are having any trouble with your machine set up.

Use GitGrade to accept the assignment and receive the starter code. See the instructions for more details.

Understanding the starter code

We have provided you with the shell of an application which has the following class structure.

classDiagram AppCompatActivity --> TabActivity TabActivity --> Doodler Doodler --> Part1 Part1 --> Part1Activity Part1 --> Part2Activity View --> ImageView View --> TextView View --> LineView class Doodler { <<abstract>> +addImage() +addText() +addLine() +doodle() } class Part1 { +addImage() +addText() +addLine() } class LineView { - endPoint - brush } class Part1Activity { +doodle() } class Part2Activity { +doodle() }

AppCompatActivity is an Android class that we subclassed in TabActivity so we can switch back and forth between your Part 1 and Part 2 code using the blue navigation bar at the bottom of the screen. You should not edit this part of the code but if you are curious, this tabbing functionality is controlled by the code in the Part1Activity#onCreate(Bundle) and Part2Activity#onCreate(Bundle) methods. We are using a View called BottomNavigationView that gives the functionality of a navigation bar - the switch statement in each of the onCreate methods tells the program when to show which activity.

Note: The notation such as Part1Activity#onCreate(Bundle) is a common shortcut to demonstrate a specific method in a specific class (here the onCreate method which takes a Bundle as parameter in the Part1Activity class).

Your Tasks…

This task involves implementing three methods in Part1.java. Each method is named here but detailed doc comments can be found in Part1’s superclass, Doodler, which also defines some nice helper methods. It also defines the onCreate behavior of the Activity which calls the method Doodler#doodle(FrameLayout).

In Part1, you’ll find missing implementations for three methods: addImage, addText, and addLine.

Subclasses of Part1 will have access to these methods once they are implemented. Take a look at an example of this in Part1Activity. It extends Part1 and uses the three methods to draw the following image on the screen:

A screenshot with a heart on it made up of smaller pictures. There's an "I" in the upper left and a "UW" in the middle left

You’ll notice in doodle in Part1 that we use scaleX and scaleY around our coordinates (and size for images). These allow us to ensure the doodle still looks good on smaller screen sizes. If you use any pixel coordinates in your solutions, remember to wrap them in these scaling methods. These will scale coordinates from the Pixel 2 XL to the dimensions of your device’s screen. We’d recommend that you use a Pixel 2 XL emulator to compare the finished doodle against our screenshot to be sure you’re implementing everything right.

Specification for addImage

ImageView addImage(FrameLayout doodleView, String imageName, float x, float y, int size);

Most of this method is implemented for you. Please read through it to understand how it works, then try to set the size and location of ImageView added in this method. Critically, the images are going to be squished into a square, so only one size parameter is given.

In order to implement this correctly you need to properly position the bounding box of the view: the x and y location relative to the parents are passed in as parameters and the size parameter is used for both the width and height. Setting the width and height will be done using the
getLayoutParams() and setLayoutParams().

If you implement it correctly, you’ll see the image below if you run:

addImage(doodleView, "food_3", scaleX(300), scaleY(300), scaleX(300));

An image of a sushi bowl in the middle of the screen.

Remember that this is covered in section (😉).

Related APIs: ImageView

Specification for addText

TextView addText(FrameLayout doodleView, String text, float x, float y, int fontSize, int color);

This does not need to have it’s bounding box adjusted.

You may find the comments and the implementation of addImage useful. Make sure you are not editing the xml, addText is an abstracted function for adding text to a canvas, not specific to the contents in Part1. The font-family is the default one, no need to do anything special here.

If you implement it correctly, you’ll see the image below if you run:

addText(doodleView, "CSE340", scaleX(550), scaleY(200), 60, Color.rgb(51,0,111));

A purple text "CSE340" shows at the top right of the screenshot.

Related APIs: TextView

Specification for addLine

LineView addLine(FrameLayout doodleView, float startX, float startY, float endX, float endY,
                int lineWidth, int color);

There are several ways to draw a line. The Android Code snippets blog has a good example.

For this method, you will be using a class called LineView whose job is to draw a line onto the canvas. Parameters passed into addLine should also be passed into the LineView constructor to create a line of the appropriate color. You will be implementing both the constructor and onDraw methods in LineView. To this end, we have provided some blank stub code for you to fill in. Each LineView should draw a single line onto the canvas.

By default, the size of the LineView will start out as the size of it’s parent, i.e. the Canvas. In order to implement addLine correctly you need to adjust the size of this view (the bounding box) to be ONLY from the from startx, starty, to endx and endy, and ensure that it is correctly located at startx starty. To do this you will use the method we discussed in class (getLayoutParams() and setLayoutParams() and setX() setY()).

If you implement it correctly, you’ll see the image below if you run:

addLine(doodleView, scaleX(100), scaleY(250), scaleX(700), scaleY(1200), 15, Color.rgb(200,0,0));
addLine(doodleView, scaleX(400), scaleY(1500), scaleX(250), scaleY(100), 20, Color.rgb(0,0,255));

A red line starts from top left to the center of the screenshot. A blue line also is present

Updated Note for 2020: You only have to handle lines that have a negative, 0, or infinite slope. In other words, you do not need to handle a line that draws from the lower left to upper right OR the upper right to the lower left.

Animating Text

Once you’ve implemented the three methods defined above, your doodle should match. For the last part, you will need to figure out how to animate text. In Part1Activity#doodle(FrameLayout), use animations to move the TextView variable uw from (50f, 1650f) to (1050f, 1650f). Remember to apply scaleX and scaleY to these animations. The animation should last 1000ms (milliseconds not seconds).

Once you’ve finished your animation, your doodle should match this screenshot:

A screenshot with a heart on it made up of smaller pictures. There's an "I" in the upper left and a "UW" in the middle right

A gif of this animation is shown below but you can also see a higher resolution .webm version of this file as well.

An animation with a heart on it made up of smaller pictures. There's an "I" in the upper left and a "UW" in the middle left

Related APIs and documentation:

Important note for Windows Users

In the past we have had issues with the app crashing because of the line endings in the .csv file on Windows machines. When you clone the repository onto your Windows machine, all the line endings are automatically converted to carriage returns (“\r\n”) instead of the usual new line character (“\n”). This will prevent the .csv from being parsed correctly due to the regular expression (regex) we use. There are 2 ways to fix this:

Part 2: Custom Doodle

Tasks:

This is where your creativity comes into play. We’ve created a blank slate for you in Part2Activity. In here you must use all three methods implemented in Part 1 to draw your own doodle, and your doodle should have an animation incorporated into it. You are also welcome to implement new methods in Part2Activity to make a more creative and beautiful doodle.

To start you must spend 5-15 minutes sketching out your idea. Here you should you think about how to incorporate lines, text, and images, and how these will be moved around the screen. Storyboarding is a good way to sketch out how this animation will progress. For more information about storyboarding watch at least the first 1:30 of this video. This storyboard does not have to be very complex - even 2-3 frames will give you an idea of how to progress. This storyboard will be turned in as part of your reflection.

To ensure your peer reviewers see your Custom Doodle once you’ve completed it, take a video of the running doodle to submit through this web form.

Tips:

Related APIs: Android Animation / View Animation / Property Animation / Vogella Tutorials - Android Animation

Commenting your code

Most of the starter code has been fairly well commented for you. However there are some places you should add comments as you are completing your solution:

  1. If you have any significantly complicated code for your custom doodle, add comments that might help your TA effectively grade your awesome work!
  2. If you received significant help from a source on any part of your code, be sure to add a comment referencing their help. See the Collaboration Policies portion of our syllabus for more details.
  3. If you add and use an image that requires copyright, you may add the attribution in your source code where you add the image to the screen. See the Application Content portion of our syllabus for more details.

Part 3: Peer Review

The Custom Doodle will be peer reviewed as part of the grading process. We will use these peer reviews to ensure that you have implemented all of the parts required for Part 2

Peer grading will take place once everyone has turned in their assignments. You will receive an email with links to three other students’ .apk files (and associated videos) and a link to a form to fill out for each student you have been assigned to peer grade. You will load these files into the emulator via Android Studio or onto a physical phone, view and review their custom doodles for Part 2, then fill out the survey to give them your feedback. Note: you must evaluate the a given doodle based on the .apk, using the video only as a backup, for instance, if the animation does not run on your emulator or phone when you load it.

Additionally, you will have a chance to nominate the most creative doodles! The winners will be shown off in class later this term.

Part 4: Reflection

Each assignment this quarter will have a reflection component as it is a vital part of your work as a Programmer, Computer Scientist, and/or Engineer. Your reflections do not have to be long (please no more than a paragraph or two in length). Details on what a well written reflection includes can be found here. You will be graded on your answers to these reflection questions based on the following

Create a MS Word, Google or other type of document and copy the following questions (in italics below) into that document. Add your your responses below each question. You can have more than one answer per page, but if you can, please try to avoid page breaks in the middle of a question. Insert page breaks between questions as needed.

You will need to submit your write up as a PDF file. If you are new to Gradescope, see this document for instructions on how to scan and submit hand-written solutions.

Gradescope accounts will be created on the first (or second) day of the quarter for all registered students. You will receive an email message from Gradescope with a link that you can use to create an account and submit your solution. Your Gradescope username will be your UW email address. If you are not registered for the course before the assignment is due, please email the instructor with your name, your UW ID number, and your UW email address (uwnetid@uw.edu) so we can set up a Gradescope account for you.

For this assignment, your reflection should cover the following:

Turn-in

Part 1 and Part 2: Code

You will turn in the following files on GitGrade here.

Make sure you only edited the following files for turn in:

─ Part1.java
- LineView.java
─ Part1Activity.java
─ Part2Activity.java
- part2.csv (optional)

Do not edit any of the other files with one exception: if you are on a Windows machine and need to modify the scan.useDelimiter(“[\n]”) call in Doodler#addAllImagesFromData(FrameLayout).

If you use your own images in Part 2, please make sure to add and commit them to your repository in the res/drawable directory. If your images are not there, your custom doodle will not work for others and you will NOT get credit for the work you did.

If you’re positioning a large number of images for Part 2, it is best to use a CSV similar to data.csv which is used for the heart in Part 1. Include this as part2.csv if necessary. Remember, the CSV coordinates are on a Pixel 2 XL and scaled to the current screen in Doodler#addAllImagesFromData(FrameLayout).

Remember to submit a video of your custom doodle animation through this web form at the same time you submit your code.

Follow these instructions to submit to GitGrade

Part 3: Peer Evaluation

You will receive more details about this step of the assignment in our second lab. We will send out the emails to your uw.edu email account. Make sure to reach out on our discussion board if you do not receive the emails when it is announced that they were sent out (but check your spam folder first!)

Part 4: Reflection

The reflection will be turned in to Gradescope.

Grading (40pts)

This HW will be out of 40 points and will roughly (subject to small adjustments) be distributed as: