# Lecture 2 & HW 2: Modifiers, Lazylists and Reactive UI
### **Textbook**: [1. Jetpack Compose](/chapters/2.-jetpack-compose.md)
### **Lecture:** [**Google Slides Link**](https://docs.google.com/presentation/d/1MEaINGF7W93Q1xThBHOLf02FnfwX_KgEE1w8d130DEg/edit)**,** [**Demo**](https://drive.google.com/file/d/1u-ns7UjxxVYz_dqx_eAQDxZKwET2iFeu/view?usp=sharing)
### **Demo:** [**Google Slides Link**](https://docs.google.com/presentation/d/1iRnS3pCMwvEnff_ZldPL4il4-4NQ4oe-q3orQbJKRQA/edit?usp=drive_link)**,** [**Solution**](https://drive.google.com/file/d/1eXNA7ERx8rOzRdxH6VzaMK_uCTGbajGK/view?usp=sharing)
## **Assignment: P2**
This week, we'll be creating a color selector app! In this app, the user can use the sliders to select any color values they want. Apps like this are super useful for UI/UX designers and what we implement today is a feature in many popular design apps like Adobe XD and Figma!
This week will be the first time you will create an Android Studio project from scratch, meaning there is no source code! If any part of making your own project is confusing see the Lecture 1 Demo to refresh your memory or come to office hours! We will help you get it sorted out!
FYI: For this project and future projects (unless stated otherwise), you should be using an Empty Activity to create your projects.
Since we are going to focus more on composables and app layout we want you to create a specific user interface...
The app should look like this:
\
### Requirements:
1\. There must be three Sliders, corresponding to red, green, and blue, and a color square that is horizontally centered.
2\. The thumb and active track of each Slider must correspond to its name (ie. the red Slider is colored red).
3\. There must be a Text component to the left of the Slider with the color and its current value. The current value should be in the range 0 through 255. The Text and slider components must be vertically centered within the Row
4\. Moving the thumb on the Slider should change the text label and the color square accordingly.
5\. Below the color square, there should be a button that saves the current color in the box to a list of Color objects. This list should be displayed below the button using a lazylist. Newly added items should be displayed without reloading the screen (use states!)
6\. Each List item should have the red, green, and blue color values in the format “Red: x, Green: y, Blue: z" where x, y, and z are the actual values. The background color of the component should be that specific color.
### Tips and tricks:
Take a look at the [Slider](https://developer.android.com/develop/ui/compose/components/slider) documentation to learn how to change its different properties.
Use [Spacers](https://developer.android.com/reference/android/widget/Space) to make your UI look more visually pleasing, and add vertical space between rows or columns. Use the [weight](https://developer.android.com/develop/ui/compose/modifiers#weight-in-row-and-column) modifier to distribute the space between components.
[Documentation](https://developer.android.com/develop) is your best friend!
### If Stuck, Lost, Or Need Help:
Try these tips:
1. Try looking over the lecture again and see if there is a section that explains it.
2. Google it! Learning to read the Android Documentation is one of the best skills we can have as Android Devs! Stack Overflow is also allowed (use responsibly, no copy-pasting blocks of code)
3. Come to office hours! We are here for you!
4. Try posting a question on Ed Discussion!
## Submission
After completing the assignment, you will need to export your project as a zip file and upload it to CMS which you can see in the tutorial on this page: [Importing, Exporting, & Submitting Your Project](https://android-course.cornellappdev.com/resources/submitting-your-projects)
If you have any trouble at all, do not hesitate to reach out to the course staff, we are all happy to help or just talk! Best of luck!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://android-course.cornellappdev.com/archive/fall-2024-course-material/lecture-2-views-and-layouts.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.