Lecture 2 & HW 2: Modifiers, Lazylists and Reactive UI
Last updated
Last updated
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:
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.
Take a look at the Slider documentation to learn how to change its different properties.
Use Spacers to make your UI look more visually pleasing, and add vertical space between rows or columns. Use the weight modifier to distribute the space between components.
Documentation is your best friend!
Try these tips:
Try looking over the lecture again and see if there is a section that explains it.
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)
Come to office hours! We are here for you!
Try posting a question on Ed Discussion!
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
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!
