# [CSE 340](/courses/cse340/23wi/schedule.html) Lab 2 Winter 23 ## Week 2: Finishing Doodle, Introducing Layout .title-slide-logo[  ] --- # Doodle and Layout Timeline Doodle - Doodle Code, Video, Reflection Due: Fri 13-Jan - Doodle Peer Evals: Out Sat 14-Jan, Due Mon 16-Jan Layout - Out: Thur 12-Jan - Code Checkpoint: Thur 19-Jan - Due: Thur 26-Jan --- # Section 2 Objectives - Animations Review - [Different Layouts in Android](#8) - [Interactor Hierarchy](#11) - Turning in Assignments/Doodle Questions --- # Wrapping Up Doodle... - **Submit 3 peer reviews** on [Canvas](https://canvas.uw.edu/courses/1612287/assignments/7805479) - This is graded, responses will be automatically sent to you after the Canvas deadline - Please remember to mark the rubric on the side (clicking on each point as needed) and leave a comment so your submission shows up as “completed” on our side. - [Submit Doodle video](https://canvas.uw.edu/courses/1612287/assignments/7805481) on Canvas. Rubric is on the assignment page. - Submit Reflection to [Gradescope](https://www.gradescope.com/courses/464273/assignments/2410726) --- # Gradescope: IMPORTANT Please match all uploaded pages on Gradescope before hitting submit.  --- # Reflections Writing - View the [Ed Lesson](https://edstem.org/us/courses/32031/lessons/51551/slides/288714) for this section to get an idea of what we expect for reflection writing. --- exclude: true # Reflections - You will be writing a reflection for each assignment. - Imagine you were given the prompt: "What did you learn from reading the peer evaluation about the user experience of your doodle?" - Please rate the following reflections out of 3 points using the rubric on the next page. - [How to Write a Reflection](https://courses.cs.washington.edu/courses/cse340/22wi/assignments/reflection.html) - You will be able to see this rubric when you submit and match your pages to the questions. --- exclude: true # Rubric (also on [Gradescope](https://www.gradescope.com/courses/378144)) - (+1) Student gives at least a minimum answer to all parts of the guiding question. - (+1) Clear/concise but descriptive examples are given throughout the response. An uninformed reader can create a mental picture of the situation being described. Abstract concepts are explained accurately. - (+1) Student elaborates on the significance and meaning of the examples; why they are important / how it changed their thinking process / implications for future work. - (+1) Extra cred: particularly insightful reflection (rarely given) --- exclude: true # Sample Reflection 1 People said they liked how I used a rainbow gradient effect on my triangle shapes and a bouncing effect to my CircleViews in the animation. People didn’t like the lack of a central aesthetic theme. --- exclude: true # Sample Reflection 2 My peer reviewers liked my object transformations. --- exclude: true # Sample Reflection 3 Users found my app too jarring; animations were too abrupt to comprehend, part of the text was cut off on the side, and there were intense flashing colors that increased eye strain and might induce seizures. I would change my doodle to have less sudden animations and less contrasting colors. --- exclude: true # Reflection Answers Reflection 1 (2/3): Provided some detailed descriptions, but could have mentioned the significance of people’s feedback or what they could improve on for future apps. Reflection 2 (1/3): Answers what they got from feedback, but does not provide enough details that would be understandable to an “uninformed reader.” Reflection 3 (3/3): Answered all parts of the question, mentioned how aspects of the app could have negatively impacted the user, and what they would change. --- exclude: true # Possible Extra credit - +1 possible extra credit examples: - I was surprised to learn that some of my peers felt physically sick from watching the animations. - My feedback relates to the lecture on animation pacing; my animation didn’t mimic the real world (objects moving randomly/abruptly), so people may have found it “jarring”. - Next time, I would have a second person give their opinion about my app before putting out a final product to avoid alienating users with my assumptions. --- exclude: true # Tips for Projects moving forwards... - Students should read starter code and understand what all the variables and methods are for, the architecture of the class, the logic of the implementation before starting! - Start EARLY so you can go to OH and utilize Ed - Read the entire spec and write down questions you have about it - Understand the class hierarchy --- exclude: true # Tips for Projects moving forwards... - Students should read starter code and understand what all the variables and methods are for, the architecture of the class, the logic of the implementation before starting! - Start EARLY so you can go to OH and utilize Ed - Read the entire spec and write down questions you have about it - Understand the class hierarchy - What is onCreate() doing? (Check inside the class that extends AppCompatActivity) --- exclude: true # Tips for Projects moving forwards... - Students should read starter code and understand what all the variables and methods are for, the architecture of the class, the logic of the implementation before starting! - Start EARLY so you can go to OH and utilize Ed - Read the entire spec and write down questions you have about it - Understand the class hierarchy - What is onCreate() doing? (Check inside the class that extends AppCompatActivity) - Work through the TODOs. You will not have to work beyond the TODOs. - Reread the spec before turning in --- <div style="font-size: 0.75em;"> .markdown[ # Animations Review Attempt Question 1 on [Worksheet](https://docs.google.com/document/d/1FUwM8AB1NxuON9N1_Qub4NoM_j3ZNTn1ac_-c53HVd4/edit?usp=sharing) and Ed. Submit on Ed. .left-column50[ We are creating an application that helps individuals with their medical health by providing reminders to take their medication. The design team has decided that upon the launch of the app, the app name, “MedReminds”, stored in the `TextView` field `appName`, will continuously move up to down with starting coordinate stored in `float` start and ending coordinate `float` end for a set duration of 3 seconds. They also want the animation to only start 2 seconds after the app is launched, after which the animation then loops forever. The text should be added onto their main view, `ConstraintLayout`, `homeView`. ] .right-column50[ Given Variables: - Text to Animate: `TextView` appName - Delay Time: 2 seconds - Duration of Animation: 3 seconds - Starting Coordinate: `float` start - Ending Coordinate: `float` end - Main View: `ConstraintLayout` homeView List the method calls, in sequential order, needed to fulfill the above requirements. (Hint: look at the documentation for ObjectAnimator) ] ] </div> --- # Layout Types in Android - [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) - good for position views on top of each other, or encapsulating a bunch of views. Used in [Doodle](https://courses.cs.washington.edu/courses/cse340/21wi/assignments/doodle.html). - [LinearLayout](https://developer.android.com/reference/android/widget/LinearLayout) - places views one after the other in order according to the orientation (Horizontal or Vertical). Used in [Layout](/assignments/layout). - [RelativeLayout](https://developer.android.com/reference/android/widget/RelativeLayout) - Positions of the children are described in relation to one another - [TableLayout](https://developer.android.com/reference/android/widget/TableLayout.html) - Rows and columns style way of declaring a layout. Used in Accessibility assignment. - [GridLayout](https://developer.android.com/reference/android/widget/GridLayout.html) - Uses an [adapter](https://developer.android.com/reference/android/widget/Adapter) that provides items to display in a grid - [ConstraintLayout](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout) Lets you use constraints to specify how things should lay out. Used in [Layout](../../assignments/layout). - More documentation [here](https://developer.android.com/guide/topics/ui/declaring-layout.html) --- # Layouts Exercise - Attempt Questions 2 and 3 on Worksheet/Ed. Submit on Ed - Question 2: Identify the best Layout Type - Question 3: Identify all Layout Types used --- # Worksheet: Interactor Hierarchy Q4 What would be the Component Tree for the Layout Part 1-2 program? .left-column50[  ] -- .right-column50[ <div class="mermaid" style="font-size: small;"> graph TD LL(LinearLayout) --> S[StatusBar] LL --> RL[RelativeLayout] RL --> SV[ScrollView] RL --> BN[BottomNav] SV --> CL[ConstraintLayout] CL --> V2[ImageView] CL --> V3[...] CL --> V4[ImageView] class LL,RL,SV,CL darkblue class S,SV,BN,V2,V3,V4 blue </div>] --- # Attempt Question 5 on the Worksheet - Hint: think about the constraints you need - work in groups --- # Worksheet: Interactor Hierarchy Q5 **What is the basic idea you have for how to fix it?** > Constrain the top of the scroll to the bottom of the text view. **Which view would you need to modify (provide the value you would set `android:id` to)?** > `@+id/scrollView` --- # Worksheet: Interactor Hierarchy Q5 **What one line of XML would you add? Pseudocode ok here, you don't have to use exact names.** > `app:layout_constraintTop_toBottomOf="@id/textView"` --- exclude: true # (Optional) Practice with [Layout Lab](https://github.com/harshitha-akkaraju/layoutlab) - Clone [https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/) - Switch between the challenges via the `AndroidManifest.xml` - Try getting the four buttons to show on the screen using only XML, then using Java (harder). - [Possible Solutions](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/tree/jay-solution-with-comments): don't peek until you've tried first! --- exclude: true # Section 2 Exercise .left-column50[ 1. Take a screenshot of any app and draw 2 different interactor hierarchies to represent it. 2. Choose and justify which interactor hierarchy provides the better design for the functionalities of your chosen application. 3. Submit on [Ed Lessons](https://edstem.org/us/courses/21053/lessons/31157/slides/180466). ]  --- # Any Last Questions about Doodle?
