From 9d141324c68f981ef986fca39c31e45345481348 Mon Sep 17 00:00:00 2001
From: hdsnglmr <hdsnglmr@uw.edu>
Date: Mon, 25 Nov 2019 08:14:10 -0800
Subject: [PATCH 1/2] updated doodle files
---
assignments/doodle.md | 22 +++-------------------
1 file changed, 3 insertions(+), 19 deletions(-)
diff --git a/assignments/doodle.md b/assignments/doodle.md
index 4aec3b3..8e704f0 100644
--- a/assignments/doodle.md
+++ b/assignments/doodle.md
@@ -40,6 +40,7 @@ If you find yourself taking additional time on this submission, we strongly sugg
- Create animations in Android Studio.
- Begin considering how to style your Android apps.
+
# Part 1
***
@@ -60,9 +61,6 @@ Subclasses of `Part1` will have access to these methods once they are implemente
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.
-Additionally, there are instances where the the image CSV file fails to load properly due to discrepencies in line endings (CRLF vs LF). If you run into this,
-try redownloading the file or re-saving it in a text editor.
-
### Specs for addImage
```java
ImageView addImage(FrameLayout mainCanvas, String imageName, float x, float y, int size);
@@ -93,14 +91,12 @@ addText(mainCanvas, "CSE340", scaleX(550), scaleY(200), 60, Color.rgb(51,0,111))
### Specs for addLine
```java
-ImageView addLine(FrameLayout mainCanvas, float startX, float startY, float endX, float endY, int width, int color);
+LineView addLine(FrameLayout mainCanvas, float startX, float startY, float endX, float endY, int width, int color);
```
There are several ways to draw a line. [android--code](https://android--code.blogspot.com) has [a good example](https://android--code.blogspot.com/2015/11/android-how-to-draw-line-on-canvas.html).
-For your `Bitmap`, you can use `Bitmap#createBitmap(int, int, Bitmap.Config)` to create a new `Bitmap` with the width and height of the current screen. **You can find the width and height of the current device screen in the `PHONE_DIMS` constant of `Doodler`**. It will be available to you in `Part1`.
-
-**You may notice that the line does not fully span the width of the screen.** This is due to the `ImageView` in which the `Bitmap` resides having a margin around it. To fix this, **set the width and height of the `ImageView` to match the dimensions you set for the `Bitmap`**. See `addImage` for how to adjust the width and height of an `ImageView`.
+For this function, you will be implementing a LineView class whose job is to draw a line onto the canvas. To this end, we have provided some blank stub code for you to fill in. Parameters for this function should be passed into your LineView constructor, and you will be implementing both the constructor and `onDraw` functions to successfully draw the line onto your device screen. Each `LineView` should draw a single line onto the canvas.
If you implement it correctly, you'll see the image below if you run:
```java
@@ -165,17 +161,6 @@ If you use your own images in [Part 2](#part-2), please include them in a ZIP ar
If you're positioning a large number of images for [Part 2](#part-2), it may be best to use a CSV similar to `data.csv` which is used for the heart in [Part 1](#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)`.
-## Reflection
-In addition, you are expected to turn in a short reflection on this assignment. Moving forward for this quarter, you will be expected to fill out a reflection for each assignment. These reflections are your opportunity to offer us feedback on the structure of each assignment, as well as reflect on the topics covered.
-
-These reflections should always be submitted directly to Gradescope.
-
-For this assignment, your reflection should at minimum cover the following:
-
-- *Why might it be better to animate a view, rather than invalidate/redraw its contents?*
-
-- *At the moment our application is pretty static. Think of at least two ways that you would go about adding interactivity to this application.*
-
## Grading (10pts)
- Part 1
@@ -189,4 +174,3 @@ For this assignment, your reflection should at minimum cover the following:
- Using an animation: 1 pt
- Complete assigned peer grading: 1 pt
- Turn-in and compiles: 1 pt
-
--
GitLab
From 0fa2e819305810df1529283e2f5e88d766d30db0 Mon Sep 17 00:00:00 2001
From: hdsnglmr <hdsnglmr@uw.edu>
Date: Mon, 25 Nov 2019 08:35:03 -0800
Subject: [PATCH 2/2] updated layout
---
assignments/layout.md | 128 +++++++-----------------------------------
1 file changed, 20 insertions(+), 108 deletions(-)
diff --git a/assignments/layout.md b/assignments/layout.md
index b8f8241..174ebb7 100644
--- a/assignments/layout.md
+++ b/assignments/layout.md
@@ -28,48 +28,9 @@ hci_goals:
* TOC
{:toc}
-# Assignment Description
-
This is the assignment spec for Exercise 2. Scroll down below part 5 for some development strategies and tips curated from last spring's students!
-In Spring 2019, students spent about 10 - 12 hours on average on this assignment. It has been modified somewhat since then, but make sure that you are getting started early -- part 4 is often the most difficult, so start early on that, as this can quickly become one of the more time-consuming assignments of the quarter.
-
-## Learning Goals
-
-- Understand Android layout GUI and XML
-- Familiarize with Android programmatic layout API
-- Understand Android constraints implementation
-- Handle portrait and landscape orientation correctly
-- Handle fixed and variable size container views
-
-- Make use of interactor hierarchy
-- Use constraints to create responsive layouts
-- Make use of complex built-in layouts
-- Implement reusable layouts
-- Understand how scrolling works
-- Understand how sizes influence layout
-
-<!-- These are just borrowed from the assignment header for now -->
-
-# Introduction to Parts 1 and 2
-
-For parts 1 and 2, you will be building the same layout twice.
-
-For part 1, you will create the desired layout using Android Studio's built-in layout editor to create the desired layout.
-
-For part 2, you will create the same layout programatically, using Java syntax to construct view objects and add them to our activity.
-
-{:width="75%"}
-
-{:width="25%"}
-
-{:width="50%"}
-
-The interactor hierarchy for parts 1 and 2 is shown below:
-
-
-
-## Part 1
+# Part 1
---
@@ -83,7 +44,7 @@ Tasks:
When it comes to layout, working directly with XML can be a pain, especially when there's several attributes to keep track of on each element. Luckily, Android Studio provides a visual editor which you can use to build your app layout without knowing any XML.
-For `Part1View`, you will accomplish the following:
+For `part1.xml`, you will accomplish the following:
* Use the visual/XML editor to construct a single, scrollable column of images.
@@ -95,7 +56,7 @@ For `Part1View`, you will accomplish the following:
You may find the following link helpful in composing your layout:
[Linear Layouts | Android Developers](https://developer.android.com/guide/topics/ui/layout/linear)
-## Part 2
+# Part 2
---
@@ -107,11 +68,11 @@ Tasks:
In `Part2Activity` we have set up the basic scaffolding necessary to complete the given layout. For this section you will be instantiating the view objects from Part 1 programmatically.
-<!-- Before getting started on this section, try constructing a [LayoutInflater](https://developer.android.com/reference/android/view/LayoutInflater.html) and passing in your `part1.xml` file.
+Before getting started on this section, try constructing a [LayoutInflater](https://developer.android.com/reference/android/view/LayoutInflater.html) and passing in your `part1.xml` file.
-*Hint: Look for a method which accepts our current context as a parameter and returns a new LayoutInflater.* -->
+*Hint: Look for a method which accepts our current context as a parameter and returns a new LayoutInflater.*
-<!-- The LayoutInflater allows us to accept a valid XML file, in this case our `part1.xml` file, and convert it into a customizable View object. The XML/visual editor makes it much easier to build our app layouts, so we can use that to create new layouts, then use an inflater to convert the XML into an object before programmatically appending it to our current app layout. -->
+The LayoutInflater allows us to accept a valid XML file, in this case our `part1.xml` file, and convert it into a customizable View object. The XML/visual editor makes it much easier to build our app layouts, so we can use that to create new layouts, then use an inflater to convert the XML into an object before programmatically appending it to our current app layout.
Note that, although you have been given the list of image names to add to your view, you still need a way to access that image resource programmatically. There are a number of ways to accomplish this, so you are encouraged to search around for potential solutions.
@@ -119,10 +80,7 @@ Your `Part2View` submission should accomplish the following:
* Achieve the layout from `Part1View` without using an XML file. That is, you should accomplish the layout requirements from Part 1 programmatically, creating Views in Java to accomplish your desired layout.
-You may not make use of your part 1 solution when writing the code for this part of the assignment.
-
-<!-- For this part, you cannot use the LayoutInflater in your final submission. However, it may be useful to inflate your layout from part 1 in order to better understand how your XML is structured. -->
-
+For this part, you cannot use the LayoutInflater in your final submission. However, it may be useful to inflate your layout from part 1 in order to better understand how your XML is structured.
# Part 3
@@ -130,10 +88,6 @@ You may not make use of your part 1 solution when writing the code for this part
The `Part3View` starter code can be found in the `cse340.layout` directory in Android Studio.
-The interactor hierarchy for Part 3 is shown below:
-
-
-
Tasks:
- Utilizing a combination of programmatic and pre-written layouts to produce a working model based on a provided spec sheet.
@@ -181,7 +135,7 @@ You may find the following link helpful when working with constraint layouts: ["
The `Part4View` starter code can be found in the `cse340.layout` directory in Android Studio.
-For part 4, feel free to explore anything pertaining to layout that we have discussed in the past 2 weeks. Your task is to wireframe and recreate an interface from another popular app. For instance: Twitter, Facebook, Instagram, etc. (not Pinterest!)
+For part 4, feel free to explore anything pertaining to layout that we have discussed in the past 2 weeks. Your task is to wireframe and recreate an interface from another popular app. For instance: Twitter, Facebook, Instagram, etc.
Your layout must meet the following requirements:
@@ -191,68 +145,24 @@ Your layout must meet the following requirements:
* In your final submission, you must provide a wireframe of the application you used as reference.
-## Wireframe requirements
-
-Your wireframe should clearly identify the application which you are recreating. When building a wireframe, you should provide labels connecting placeholder "wireframe" objects to application level implementations -- for instance, a wireframe for our Pinterest layout might label
-
When working with more advanced constraint layouts, you may find the following resource helpful: ["What's new in Constraint Layout 1.1.0"](https://android.jlelse.eu/whats-new-in-constraint-layout-1-1-0-acfe30cfc7be)
# Part 5
---
-For this part, you will submit your reflection on this assignment. The reflection should abide by the following layout:
-
-## Paragraph 1: Assignment Feedback
-
----
-
-We would appreciate your feedback on this assignment, particularly in parts 1 through 3 (though feel free to cover anything in part 4 that is not relevant to paragraph 1).
-
-Things to consider:
-
-* Relative Difficulty
- * How did the difficulty of this assignment feel?
- * By an estimate, how much time did you spend working on your submission?
- * Do you feel the workload was too much, too little, or just right?
- * Is there anything you would add to/remove from this assignment?
-
-* Suggestions
- * Do you think it contributed positively to the course material thus far? If not, why?
- * If you had the opportunity, how would you change this assignment?
-
-## Paragraph 2: Reflection on Part 4 (optional)
-
----
-
-You should spend at least a paragraph describing your submission for part 4. This reflection is open ended, however you should take the following guidelines into consideration:
-
-* Inspiration
- * If your layout submission is based on the layout of another popular interface, what interface did you use? If the layout was designed for another platform, what considerations did you take when porting it over to Android?
- * If your layout submission is original, what inspired your decisions regarding layout and design? Was there anything you used as a resource when considering layout?
- * Additionally, if you choose to go this route you should take a sentence or two to describe the use case of your mock layout application.
-
-* Implementation
- * What resources did you use within Android Studio to accomplish your desired layout?
-
-* Successes and Struggles
- * How successful do you feel with your submission? What worked and what didn't? Is there anything that you wanted to implement but could not figure out?
-
-<!-- do we want to do this? -->
-In addition, you should provide a labeled draft of your current app layout. The blueprint view in the visual studio is a good starting point for this.
-
-## Paragraph 3: General Feedback
-
-Here, you should consider the assignment's usefulness in the greater scope of the course. Any miscellaneous feedback you have for the TA team should be provided here as well.
+For this part, you simply need to provide a short reflection on your submission. Some things you may want to cover here:
-Some things to mention:
-* Do you feel like you were well-prepared for this assignment in lecture and section?
+* Your experience, positive or negative, working on parts 1 - 4. We are always looking to revise these specs as necessary, so any feedback provided here will improve the quality of assignment rubrics for future quarters.
-* Is there anything we could cover in greater detail that would benefit students directly on this assignment?
+* Anything new that you learned while working on the assignment. This can be anything related to the process of building your app, including:
+ * new concepts in Java/Android
+ * new strategies for designing wireframes and layouts
+ * Advice you received from an instructor or peer which helped you complete the assignment.
-<!-- TODO: Integrate part 4 optional reflection -->
+* Any feedback you have on the provided rubrics. Was anything unclear? Let us know!
-As before, this reflection will be submitted to Gradescope.
+* Anything you want more explanation on in class. Although we can't cover everything, we will take these suggestions into account when planning out future material.
# Development Strategies
@@ -277,7 +187,7 @@ You will turn in the following files [here](https://gradeit.cs.washington.edu/uw
```
─ part1.xml
-─ part2.xml
+─ Part2View.java
- Part3View.java
- Part4View.java
- part4_grid.xml
@@ -297,7 +207,9 @@ You will turn in the following files [here](https://gradeit.cs.washington.edu/uw
- (Portrait and Landscape) Correct image widths: 1 pt
- (Portrait and Landscape) Correct image margins: 1 pt
- Part 4
- -
+ - Portrait and Landscape: 2 pts
+- Part 5
+ - Completed reflection: 1 pt
- Code Organization and Style: 1 pt
## IDE Errors/Warnings you can ignore
--
GitLab