# Welcome SP26 Edition! There aren't many platforms that provide access to 3.3 billion active devices. With 71.85% of global market share (as of 2026) and growing, there's no question as to which platform dominates the world's smartphone market. It is the reigning champion in India and China, where the total population is approaching 3 billion combined, and internet access among the populace is growing by the second. If you want access to emerging markets, low barriers to entry, and the open-source community, you've got to go green. Here at Cornell AppDev, we recognize that our user base comes from a broad range of backgrounds and uses a broad range of devices from Samsung, OnePlus, and Google. Since we've created our Android subteam in Spring 2018, we've started making strides toward cross-compatibility on all fronts. With Android applications such as Eatery, Uplift, Resell, and Ithaca Transit gaining ground on the Cornell campus, we can fairly say that we know what we're doing, and we'd like to pass it on to you. In this course, you'll learn the basics of Android development. From a low-level understanding of what the system is doing to the usage of higher-level features such as networking and notifications, we'll attempt to impart our knowledge of industry-standard development of Android applications, along with any tips and tricks we find helpful along the way. # Syllabus Course Logistics! ## Welcome to Intro to Android Development! Hello and welcome to the class! We are your instructors for this course, Connie and Melissa, and we’re incredibly excited to help you learn how to make Android apps this semester. It wasn't too long ago that we were learning the intricacies of Android ourselves, and now we wish to pass on the knowledge we've learned to you. It’s going to be a great semester and we can’t wait to get started! ## Course Staff *(If you have any questions or concerns, feel free to reach out the instructors at and .)* | Melissa Velasquez | Course Instructor | | ----------------- | ----------------- | | Connie Liu | Course Instructor | | Gregor Guerrier | TA | | Andrew Cheung | TA | | Amy Wang | TA | | Emil Jiang | TA | | Caleb Shim | TA | | Ryan Cheung | TA | | Brain Hu | TA | | Danny McCance | TA | | Mabel Qiu | TA | | Abigail Labankok | TA | | Preston Williams | TA | | Jarmin Weng | TA | If you have a question for the course staff, ask a private question on Ed Discussion or schedule a meeting during office hours. ## Course Schedule {% hint style="info" %} This schedule is tentative and subject to changes to Cornell's Spring 2026 academic calendar. {% endhint %} Lectures will be held in **Gates 114** at **8:35-9:25pm** every Monday and Wednesday. All lectures will be recorded and posted to AppDev's [YouTube channel](https://www.youtube.com/channel/UCUDPjOx1yPRGxsO6AFtBZSg) after the lecture. Towards the end of the course, you'll be participating in the 2-week Hack Challenge alongside students from other AppDev courses, to create a full-fledged mobile application. Outlined below is a schedule of our lectures, discussions, and projects (with their due dates).
Class DatesTopicProject AssignedProject Due Date
3/11Course Logistics, Kotlin, & Basic UI (Lecture + Demo)A1 (Ungraded)A1 is Ungraded.
3/16States, Components, & LazyColumn (Lecture)A23/22 @ 11:59pm
3/18(Demo)
3/23Navigation & Animations (Lecture)A34/6 @ 11:59pm
3/25(Demo)
Spring Break!
4/6MVVM & FlowsA44/12 @ 11:59pm
4/8(Demo)
4/13Coroutines, Networking, JSONA54/19 @ 11:59pm
4/15(Demo)
4/20Dumb Components (MVVM Component Design) A64/26 @ 11:59pm
4/22(Demo) Guest Speaker Presentation
4/27Bonus Lecture: Getting started on the Hack Challenge
4/29Bonus Lecture:
Developing with ML Kit
## Grading **Note: for SP26, you can take this course for *****up to***** 2 credits, in the event of credit overload. However, regardless of the number of credits you're signed up for, you are still expected to complete 2 credits worth of work.** This is a **2 credit S/U course** and grading will be determined by all projects, with more emphasis on the Hack Challenge final project. Each project is worth 10-12 points, and the final project is worth 20 points: 10 points for the midpoint submission and 10 points for the final submission. Each project (with the exception of the first) will have extra credit opportunities for you to challenge yourself and dive deeper into Android development. **To pass this course, you will need >= 70** **points by the end of the semester.** | Assignments | Weight | | ----------------- | ------------ | | A1 | 0 (Ungraded) | | A2 | 13 | | A3 | 13 | | A4 | 13 | | A5 | 13 | | A6 | 13 | | Hack Challenge | 20 | | Participation | 15 | | **Total** | **100** | | **Passing Score** | **70** | ### Attendance Attendance is required for all students of the course for the lectures, and are permitted at most 3 absences (not including bonus lectures which do not require attendance). If you exceed this amount you will be given a 0 for participation. Attendance will be taken at the end of each lecture (and demo). ### Late policy You are given 6 slip days that you can use on any of the assignments aside from the Hack Challenge project. Each assignment will be opened for late submissions for an extra 2 days after the regular deadline. If you submit an assignment late and run out of slip days, assignments will be automatically docked 2 points. ### Note on grading for assignments: If you are unable to finish the project as a result of an error, please add a note in a README.txt file explaining: 1. the error that you are encountering 2. the suspected cause of the error (doesn't have to be correct!) 3. the solutions you have attempted to resolve the error This helps out the grader quickly find and debug errors and give partial points for effort! It is also helpful to leave broken code in your project (but have it commented out). This will allow us to better understand your thought process and give you partial points for missing features. ## Course Help * If you ever need help, you can always post on the course [Ed Discussion](https://edstem.org/us/join/mUrfgB). We will be monitoring the class feed to be helping you! For more complicated questions, try to attend office hours if at all possible. ## Office Hours * Office hours are held at multiple times throughout the week by instructors and TAs! * See the [OH Google Calendar](https://calendar.google.com/calendar/u/0?cid=Y183ODNhOTQ5YjJiM2IwODUyOWNmMWNjNDhiNTNjMjQ0N2NhYjJmNzQ2MjBjZTgwMTk3ZGNlNDVhZTYzMWYyODE5QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20) for office hour times! * Check Ed Discussion for any TA announcements for OH adjustments. (OH starts on the week of 3/16. If you need any course help before that, feel free to stay after class and ask the instructors questions, or ask on Ed Discussion!) We are here to help you succeed! Our number one goal is for you to LEARN Android development and we will be with you each step of the way to make sure that happens 👏. ## Hack Challenge At the end of the course, you and up to three other members of AppDev courses (Intro to Digital Product Design, Intro to Backend Engineering, Intro to iOS) will have the chance to work in a group and apply all that you’ve learned in the course to create a functional, polished app. Participation in the Hack Challenge is **required** as the final project for this course. The course staff will judge the best apps and there will be sponsored prizes! Last semester’s winners won Google Homes, bluetooth speakers, Echo Dots, or Chromecasts. This could be you this semester, so start brainstorming ideas! ## Academic Integrity & Collaboration As with any other course at Cornell, the code of academic integrity will be enforced in this class. All individual projects must be done by yourself. All University-standard Academic Integrity guidelines should be followed. This includes proper attribution of any resources found online, including anything that may be open-sourced by AppDev. The University guidelines for Academic Integrity can be found [here](https://theuniversityfaculty.cornell.edu/academic-integrity/). We encourage using the internet and AI to learn more about Android development, but again, any code you submit must be written by you! # Git & GitHub Help/How-To ## Git Download: With Android Studio, you don't need to use the terminal to contribute to an Android project on GitHub. It has native integration with git and GitHub to allow most actions via the Android Studio UI. Below gives an overview of some of these actions! ## Cloning the repository If your partner has already created a repo and added files, to get on the same repo, you must clone it! (You do not have to create another repo yourself!) If the repo is private, you must be added as a collaborator first (instructions [here](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-user-account/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository)). When you clone a repository, you copy the repository from GitHub.com to your local machine. Cloning a repository **pulls down a full copy of all the repository data that GitHub.com has at that point in time, including all versions of every file and folder for the project**. When you open Android Studio, it offers the option to open a project from version control. That's the option we'll use (you can also create a new Android Studio project from version control) ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FgExRIu3kGDQF73CJZVJZ%2F8SEqyls.png?alt=media\&token=e36a389f-841d-43ff-a3f0-161c40460970) ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FqTRcnKq4j5oRJ8hAptT8%2Fimage.png?alt=media\&token=c36137dc-1076-48fc-9c4c-4041d74ac7b8) After selecting that option, you can type the URL of the repository, press "Clone", and select a folder. After that, Android Studio will do all the work and open the project ready to go. ![Make sure you choose the correct account to clone from!](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FCNzvxWXyU4J3NKYx5gkd%2FbM92C6R.webp?alt=media\&token=b7eb64cd-388a-4688-a047-b2f1478714e0) ## How can we create repositories? Creating repositories in Android Studio is pain-free (hopefully). If you're working with multiple people, only one person needs to create the repository! First we have to add Git managing to our current Android Studio project Go to: *VCS -> Create Git Repository* ![Your files will turn red, don't worry!](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2F7mdJiEoJNR1Rb8u6tRAF%2Fimage.png?alt=media\&token=48c4a9b5-5ac9-4f9c-ae37-691b6a41043c) Now, we have to create the repository on GitHub and share our files there! Go to: *Git -> GitHub -> Share Project on GitHub* ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FkLZm5QdYtmXHzF6mc38j%2Fimage.png?alt=media\&token=d5052927-f3dd-4177-ab29-b0073e699191) ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FXNdS4tpxL72Orwz4FNUJ%2Fimage.png?alt=media\&token=195746e4-d5d1-4a10-8b0f-7688c03e1554) You can then add your files to your newly created GitHub repository! ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FY4HPRoONC6tjtoBnLNnj%2Fimage.png?alt=media\&token=671bfb9c-1ddb-4b48-858c-9ab543affa11) ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2F52jCT9HTNosLG7g8VWcu%2Fimage.png?alt=media\&token=bb1485b6-a223-4538-b334-d473e41056ee) #### If your repository is private, you should add your collaborators to your repository so they have access too (which you can now do with your newly created repo). The instructions for that are [here](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-user-account/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository). Only the creator of the repository can add collaborators! #### Make your repositories PRIVATE unless stated otherwise (e.g hack challenge) ## Making the change Initially, the default branch will be selected most likely master. Let's create a branch for our change based on the master branch! It's bad practice to make changes directly onto our master branch so we can utilize branches to create developmental spaces at the current state of the master without affecting the master branch! ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2Fs4A88LJEmQgbBbUmEDV9%2Fimage.png?alt=media\&token=97f42ef5-be43-4c5a-a0d0-1bad64fa2a5a) To do that, click where it says "Git: \[default branch]", select the master branch, click "New Branch from Selected", and choose a name for your branch. ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FHpjpdHyDHMxcnsJ6vJEo%2Fimage.png?alt=media\&token=7118dd68-9310-451b-b651-fa13b4bfb243) Once you've actually made some changes to your new branch you have to commit them and push them online! ## Committing and pushing the change Now, we can commit our change. To do this, either press CMD+K (or CTRL+K on Windows) to bring up the commit panel! ![Commit panel](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FbDMzMSA9B5hrjO4tpNWC%2Fimage.png?alt=media\&token=6ed199a4-6a90-407d-adf3-31dfca146073) Review your changes in the screen provided, write a descriptive commit message, select commit and push on the bottom. That will take you to the screen where you'll choose which repository the branch will be uploaded. If you're a maintainer of the origin remote, you can press "Push" and skip to "Creating the pull request". ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FmJxKHzh4bfCAkw6DiX1J%2Fimage.png?alt=media\&token=65928be6-b10b-4166-9810-53eef2c14ac1) ## Creating the pull request Now, go to your repository page on GitHub, and you'll see a prompt to open a Pull Request with your newly pushed branch. When you press that, it will take you to a Pull Request composer. The **Pull Request** (PR for short) is the method by which — specifically using Git and GitHub — you can loop interested parties into reviewing and then approving your change, then merging it into some branch (presumably the trunk). This is where you explain the “whats” and “whys” of your code. Feel free to add your partners as reviewers for your code! Once your PR has been reviewed and is "ready", it can then be merged into your master branch! ## Updating your local files With new changes being pushed from your PR into your master branch (from either yourself or your partner), your local files in Android studio are out of date! You can update your files by "pulling" the changes from your repository online into your local repository! In the top right of your project there's a small toolbar for Git. The blue check mark will update your project! ![The buttons to the right commit and push respectively!](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FEonzHstrgUaUMMkWxjVU%2Fimage.png?alt=media\&token=98e4e4ed-7e03-4ee3-b81d-831ae8375188) # Setting up Android Studio Setting up Android Studio takes just a few clicks. First, be sure you [download the latest version of Android Studio](https://developer.android.com/studio/). ## Windows To install Android Studio on Windows, proceed as follows: 1. If you downloaded an `.exe` file (recommended), double-click to launch it. If you downloaded a `.zip` file, unpack the ZIP, copy the **android-studio** folder into your **Program Files** folder, and then open the **android-studio > bin** folder and launch `studio64.exe` (for 64-bit machines) or `studio.exe` (for 32-bit machines). 2. Follow the setup wizard in Android Studio and install any SDK packages that it recommends. That's it. As new tools and other APIs become available, Android Studio tells you with a pop-up, or you can check for updates by clicking **Help > Check for Update**. ## Mac To install Android Studio on your Mac, proceed as follows: 1. Launch the Android Studio DMG file. 2. Drag and drop Android Studio into the Applications folder, then launch Android Studio. 3. Select whether you want to import previous Android Studio settings, then click **OK**. 4. The Android Studio Setup Wizard guides you through the rest of the setup, which includes downloading Android SDK components that are required for development. That's it. As new tools and other APIs become available, Android Studio tells you with a pop-up, or you can check for updates by clicking **Android Studio > Check for Updates**. ## Linux To install Android Studio on Linux, proceed as follows: 1. Unpack the `.zip` file you downloaded to an appropriate location for your applications, such as within `/usr/local/` for your user profile, or`/opt/` for shared users. 2. To launch Android Studio, open a terminal, navigate to the `android-studio/bin/` directory, and execute `studio.sh`. 3. Select whether you want to import previous Android Studio settings or not, then click **OK**. The Android Studio Setup Wizard guides you through the rest of the setup, which includes downloading Android SDK components that are required for development. *Tip: To make Android Studio available in your list of applications, select **Tools > Create Desktop Entry** from the Android Studio menu bar.* **Required libraries for 64-bit machines:** If you are running a 64-bit version of Ubuntu, you need to install some 32-bit libraries with the following command: ```bash sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386 ``` If you are running 64-bit Fedora, the command is: ```bash sudo yum install zlib.i686 ncurses-libs.i686 bzip2-libs.i686 ``` That's it. As new tools and other APIs become available, Android Studio tells you with a pop-up, or you can check for updates by clicking **Help > Check for Update**. ## [More Android Studio Help](https://android-course.cornellappdev.com/chapters/1.-introduction-to-the-editor/1.5-demo-wip) # Starting an Android Studio Project & Making an Emulator See [1.5 Android Studio Project Demo + Understanding The Editor](/chapters/1.-introduction-to-the-editor/1.5-demo-wip)! # Importing, Exporting, & Submitting Your Projects to CMS ## Importing .zip Files into Android Studios To import a .zip file into Android Studios * Select File (in the top left) * New * Import Project * Navigate to the folder of the .zip file and select it Alternatively, if that doesn't work then we can try the following: * Unzip the project into an EMPTY directory (using WinRAR or any built in unzipper) * Open Android Studios * Select File * New * Import Project * Navigate to the root of said Directory * Select the Android PROJECT not the zip file (see below)
## Exporting Your Project as a .zip File To export your project: * Select File (top left of Android Studio) * Find Export tab * Export to Zip File * Select the Directory you want the zip file to go in * Name you file * Select OK ## Submitting Your Project on CMS Please name the .zip file with the format: **netid1\_HW#**. For example, if your netID is abc123 and you're working on HW2, you should name your project "abc123\_HW2". ## Challenge Problems If you do any of the additional challenge problems, **please attach a plaintext file named "README" and list the challenge numbers that you implemented.** For example, an assignment might have 4 challenge problems and if you implemented challenge problem #1 and #3, your README.txt will have "1, 3" on it. If you want to go into detail on what you implemented, this would be a good place to do so! If you do not implement any of the challenge problems, you do not have to attach a README. # Week 1 | Course Logistics, Kotlin, & Basic UI Welcome to Intro to Android! :D In week 1, we'll learn about our course logistics, some basics about Kotlin, and how to build basic UI with Jetpack Compose built-in components and modifiers! # Relevant Links **Google Slides:** [**\[Week 1 Slides\]**](https://docs.google.com/presentation/d/1lc_xFMMpPzrXNFaBcgGe_1Acu7gfajpnnLXlKmUpoeE/edit?slide=id.g385da76c1c9_0_1613#slide=id.g385da76c1c9_0_1613) **Relevant Textbook Sections**: [\[Syllabus\]](/syllabus), [\[1.3 Kotlin Overview\]](/chapters/1.-introduction-to-the-editor/1.3-java-review), [\[2.2 Layouts\]](/chapters/2.-jetpack-compose/2.2-layouts), [\[2.3 Modifiers\]](/chapters/2.-jetpack-compose/2.3-modifiers) **YouTube Recordings**: [\[Week 1 Lecture/Demo Link\]](https://youtu.be/7SJh1qtEqPA) Lecture Demos + Solutions *(same link for all weeks)*: [\[GitHub Link\]](https://github.com/AndrewCheung360/intro-to-android-lecture-demos-fa25) Demo/A1 (EateryCard) Solution: [\[GitHub Link\]](https://github.com/thisjustin123/intro-android-d1) ExpenseRow Starter Code: {% file src="/files/vzPrUEchhpHQiKg5Eylq" %} # Demo/Lecture: Eatery Card Using Modifier and a component's arguments to visually build a complex component! In this demo, we'll be showing off how to make the following Eatery Card component, which is very similar to (albeit a bit simpler than) one you've seen if you regularly use Eatery:
If time permits, we'll then show how to use this component we've built on a screen to show things on an actual app! ### Step 1: Set up your Android Studio Project (follow-along) First, we'll show you how to set up an Android Studio project! 1. Open Android Studio (you should have it already installed!) 2. Click **New Project** or go to **File -> New\... -> New Project...** 3. Make an **Empty Activity** Project. 4. Name your project something comprehensible like **D1**. Click Finish. You should now have a new app created for you! In the future you can follow this procedure whenever you are asked to make a new project. *** ### Step 2: Create New Files (follow-along) Next, we'll set up some files so that we can start building components and screens!
If you expand your filesystem, this is what you should see. The folder `com.[...].d1` is where you'll be adding Kotlin Android files. 1. Right Click `com.[...].d1`and do **New\... -> Kotlin Class/File.** 2. Make a file named `EateryCard` ; this will become our card component. 3. Do the same and make a file named `MainScreen`. Now, let's set up `EateryCard` so we can be ready to dev! *** ### Step 3: Set up EateryCard (follow-along) Add the following functions to `EateryCard`:
These two functions represent the following: 1. EateryCard is the actual component we are building. 2. EateryCardPreview allows us to preview the component as we are building it so we can verify that what we are building looks right. Next, click on this button on the top right:
This launches the preview so you can see what your component looks like as you're building it! You may need to periodically `Build & Refresh`to see the component. Because you haven't actually written anything in the component, nothing will show up:
But now we're ready to dev! These next parts are on your own. We'll provide hints as we go. Feel free to ask us questions! *** ### Task 1: Build the outer Card {% hint style="info" %} Time to do things yourself now! Please feel free to ask questions as you go :-) {% endhint %} Use a Surface component built into Android to make the card background. When asked to import `Surface`and any other Android components, always select the @Composable one. *Hint 1: Surface always needs an inner body Composable, so for now just add a {} after the Surface to get it to compile. You'll add the rest of your stuff here.* *Hint 2: Roll over Surface to see the arguments it can take in. You'll want to make this a RoundedCornerShape with a corner radius of 12.dp with a shadow elevation of 4.dp.* *Hint 3: We want the card to fill the max width and have a fixed height of 220.dp. Use a Modifier for this!* You should end up with the following:
*** ### Task 2: Divide the Card Vertically We want the card to have a distinct upper and lower section. Utilize a `Column` and `Modifier.weight(1f)` on the inner components in that column to make two `Box`es that take up the same vertical space! Make the upper box a nice shade of blue. *Hint 1: Boxes are 0 width and 0 height by default if they don't have any content. Make sure your box is filling the max width if it has a background to show its color!* *Hint 2: Use Modifier.background(...) with the following color to achieve an Eatery Blue color:* ``` Color(0xff5ecfdb) ```
*** ### Task 3: Add Texts Next, let's make our eatery card display text! We want our texts to display generally in the photo below. Don't worry that the Color is Red; up to you if you want to change that.
You'll need to use a combination of Rows, Columns, Texts, Modifiers, and a careful look at the arguments each of these take in to get this look! *Hint 1: Modifier.padding() adds some padding around a container.* *Hint 2: Row's horizontalArrangement parameter w/ SpaceBetween may be useful to push the Open text off to the right.* *Hint 3: Remember to keep using fillMaxWidth() if you want your container to take up as much width as possible!* *Hint 4: Take a look at the parameters of Text to see if you can roughly match our Text's intricacies.* *** ### Task 4: Run a screen & deploy the app! Now that we've made our component, let's run it to make it show up on our emulator / app! 1. First, hop over to `MainScreen` . This file will represent our screen that the user will see. 2. Just like before, make a `MainScreen` @Composable function. Add just the Eatery Card to this screen. 3. Move over to MainActivity and replace the default `Scaffold` with our MainScreen. 4. Run the app!

How to run your app!

(You should have an emulator set up for you automatically in android studio.) You should see your component. However, it hugs the sides kind of ugly...ly. Can you change `MainScreen` to make it fit more snugly? If you see this, congrats. You just completed D1!

End result...!

# A1: Eatery Card (Follow-Along) First-week free! For this week, there is no need to submit an assignment on CMS, but feel free to practice submitting an assignment for the course. This is partially motivated by the fact that people often enroll in the class late, so we're not grading this assignment. Please complete the Eatery Card Demo for this week! In that, we will be going over the workings of Android Studio and the coding of a custom Eatery Card component with Jetpack Compose. We'll be showcasing some very important techniques about how to navigate Android Studio for this demo and build components. **Demo/Lecture:** {% content-ref url="/pages/fZQ7Wb0t5tyZmihUh4Go" %} [Demo/Lecture: Eatery Card](/course-material/week-1-or-course-logistics-kotlin-and-basic-ui/demo-lecture-eatery-card) {% endcontent-ref %} Completing this lecture/demo is **crucial** for you to be able to complete future assignments, so please do not skip this! We trust you all! # Week 2 | States, Components, LazyColumn Apps need their UI to change to be at all useful... In week 2, we'll learn how to leverage **states** to get our UI to show important data, build components to enforce good coding practice, and use LazyColumns to up our layout game! # Relevant Links **Google Slides:** [**\[Slides Link\]**](https://docs.google.com/presentation/d/1joB_mwAWjYT5jhIni71tHcN0i7cYQboIz53jXWyFOls/edit?usp=sharing) **Relevant Textbook Sections**: [\[2.6 Reactive UI\]](/chapters/2.-jetpack-compose/2.6-reactive-ui), [\[2.5 Lazy Lists\]](/chapters/2.-jetpack-compose/2.5-lazy-lists) **YouTube Recordings**: \[[Week 2 Lecture](https://youtu.be/P6hpwQ9ZlOg)], \[[Week 2 Demo](https://youtu.be/nFXStkG3m7s)] **Week 2 Demo Solution**: [\[GitHub Link\]](https://github.com/melissavelasquezz/Intro-to-android-demo-solutions/tree/main/demo2soln/app/src/main/java/com/example/demo2_soln) # Demo: Todo List Some more practice with components and states! In this demo, we'll build a simple todo list app with functionality to add new todos and display them in a scrolling list using components.
You'll start with an Empty Activity Project in Android Studio (see last week's demo for a refresher on how to do this) Let's break this screen down into its individual components to help you get started: *** ### Step 1: Set Up Your TodoScreen.kt File Start by creating a file for your screen. Let's call this one \`TodoScreen.kt\` We'll also be using a custom component within our screen called TodoCard, which we'll go ahead and define in this file along with the TodoScreen composable. ```kotlin @Composable fun TodoScreen(){ //... } @Composable fun TodoCard(){ //... } ``` The TodoScreen is made up of multiple components that are visually "stacked" on top of each other, so we want to wrap everything in a Column component To achieve the correct alignment of the contents of the Column, make use of the the modifier, horizontalAlignment, and verticalArrangement arguments. *** ### Step 2: "My Todo List" To start, make the title of the screen with font size 36.dp Add a Spacer component with height 30.dp after this to make the screen more visually appealing *** ### Step 3: TextField This is where you'll be able to enter a new todo to be added to the list below. To start, TextFields are valuable since they allow users to input some data that can then be stored, manipulated, and/or displayed later. Since the TextField value can be manipulated, let's use a MutableState to represent it. ```kotlin var newTodo by remember{ mutableStateOf("") } ``` Like most components, TextField has a lot of different arguments possible. You'll usually only need to use four of them: modifier, placeholder, value, and onValueChange. * If you roll over TextField to look at all of the arguments, you'll notice that there's some arguments with a type that looks like some variant of this () -> Unit. This means that you'll need to pass in a function. * Functions passed into arguments can either be defined elsewhere and called inline, or they can be defined inline within {}. * This can be a little tricky, so give it a try yourself and check the answer when you need to!
TextField Arguments ```kotlin TextField( modifier = Modifier.fillMaxWidth(), placeholder = { Text("new todo") }, value = newTodo, onValueChange = { newText -> newTodo = newText } ) ``` Please ask if you have any questions about this!
Now when you build your code, you should be able to type in the TextField in the emulator! *** ### Step 4: Button When the Add Todo button is pressed, we want the current value of the TextField to be stored somewhere. For that we'll use the following: ```kotlin val todoList = remember{ mutableStateListOf() } ```
Button Syntax ```kotlin Button( modifier, onClick = { }//what happens when the button is clicked ){ //the visual contents of your button //typically a Text component with the label that you want to use for the button. } ```
* In the onClick argument of your Button, add the current value of the TextField to the todoList. * hint: if you want to see the possible functions on todoList, type todoList dot and look over the list that comes up. * We also want to clear the TextField after the current value is stored in the list. To do this, we can also set newTodo = "" in the onClick argument. * hint: functions within the argument's curly braces need to be separated using a semicolon. * Label the Button using a Text composable within the Button component's curly braces. Now when you build the app, the TextField should reset to display the placeholder when you press the button. * Behind the scenes, the TextField value is being stored in todoList before it's cleared, but we aren't making any UI updates when that happens so we can't see it just yet! Add another Spacer with height 30.dp here! *** ### Step 5: TodoCard
Todos will be displayed as a LazyColumn of TodoCards. Let's build that now! Each card is going to be a stylized Row component. We'll want to use the modifier, padding, and background arguments. * Note that the order in which you call Modifiers affects the appearance of the card. Pay attention to the order of the .padding() and .background() modifiers and see if you can figure out what's happening there. Additional Specs: * Add padding so that when the TodoCards are eventually displayed in a LazyColumn there's some vertical space between each card. * The example card is LightGray, one of the Color class's default colors * The TodoCard has corners with "roundness" of 12.dp * Use 20.dp of padding between the Text and the edges of the card. Write an @Preview composable for TodoCard and check that it matches the sample above! ### Step 6: LazyColumn Now that we have our TodoCard, let's use them to display our todoList with a LazyColumn. Make a LazyColumn component in the TodoScreen that: * Displays TodoCards with data from todoList * Has height 200.dp
LazyColumn Syntax ``` LazyColumn(){ items(some-list){ some-composable(it) } } //'it' is an implicitly declared name for a single-parameter lambda expression. //it pretty much acts as each element of some-list so you don't need to iterate through some-list manually ``` You might need to do two imports on the items() code. Hover over any red lines to see if you missed an import!
hint: Use the verticalAlignment argument with Alignment.spacedBy() in the LazyColumn to make space between each TodoCard when they're displayed. Run your app again. Now, when you type in a todo and hit the Add Todo button, you should see it appear below in order below the Button. When you add enough todos, you'll be able to scroll through the LazyColumn! ### Congrats, you've completed the demo! :) # A2: Shopping List Keeping track of expenses! {% hint style="info" %} As this is a smaller-scope assignment, there is no release code. Simply start from an empty Compose activity / new project. {% endhint %} For our second (and first graded) assignment, we'll be making a simple app to keep track of some expenses! We'll need to leverage states and make some components to, in the end, use a LazyColumn to show our expenses in the following UI:

(An @Preview of) the final product!

## Requirements: (expand each file below to see your requirements!)
ExpenseRow.kt (3pt) We'll start off by making a very simple UI for an expense row in our app! In general, try to match this UI: 1. The expense row should have a title section for the expense title. 2. Below, the expense row should have a time section for the date/time the expense occurred. 3. To the far right, the expense row should have the expense. 1. This text must be **bold.** 2. If the amount is positive, it should be green. Otherwise, red. Hints: * Although not required, we *highly recommend* making a @Preview function in this file so you can see your expense row as you are developing! * If you are unsure of how to specifically match this UI, look at Modifiers and the input arguments to components like `Text` , `Row`, and `Column`. * Use the following logical code to convert a `amount`number (Float) to a nice 2-digit-formatted string: ```kotlin // Format 2 digits after the decimal val formatted = "%.2f".format(abs(amount)) val amountString = if (amount < 0) { "-$$formatted" } else { "+$$formatted" } // use amountString... ```
ExpenseHeader.kt (4pt) In this file, you'll make the app's top header which relies on user input to allow the user to input new expenses into the app. In general, try to match this UI: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FLPsT9hxlUV3lCkQNgvM5%2Fimage.png?alt=media\&token=521ff28d-7bbb-423e-be07-1f52a941e42a) 1. Add a `TextField` that takes in the name of the expense, allowing the user to type with any characters. 1. The placeholder of this should read "Expense Name" 2. Add a `TextField`that takes in the cost of the expense. 1. The placeholder of this should read something similar to the above. 3. Add a `Button` that, when pressed, fires an `onClick` or similar function passed into the component to tell the parent component that a new entry was submitted with the corresponding `String`name and `Float` amount. 1. When you call the onClick, you should also afterwards clear the input of both text fields. 2. It's okay if your code only works if the user has actually typed in a valid amount. 4. Add a nice title text to the top of it all! Hints: * If you make an @Preview to test out your component, you can actually RUN the preview and test typing into your component to see if it works! Just hit this button: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2Fz6irNMjzWiMM5Fmv2yMV%2Fimage.png?alt=media\&token=f49a8685-2fbd-4826-8a8d-cd9eb90eb93b) Then, you can type into the text fields and even hit submit! (You won't see an OS keyboard; just type in with your computer keyboard. Make sure then to only type numbers into the other text field.)
MainScreen.kt (5pt) iIn this file, you'll assemble everything together to make the app's screen! 1. Make a new file called MainScreen.kt with a corresponding @Composable. 2. Arrange the UI with a **LazyColumn** so that the header is on top, and several expense rows render underneath. 3. Whenever the user enters a new expense and clicks "Create", a new expense row should appear in the LazyColumn. 1. This expense should have the same title, expense, and (some form) of representing the (system) time at which the expense was created. Hints: * You'll need a state to represent the list of expenses. When you update this state, the lazy column will auto-render new rows (Recomposition Lifecycle!) * Use callback functions from the ExpenseHeader that will fire whenever the user enters/submits a new expense. * For the system time, feel free to ask ChatGPT conceptual questions as to how to get the system time and convert it into a date-time readable format! Here's one possible way to do that: ```kotlin // Get the current time as a number. val currentTimeMillis = System.currentTimeMillis() // Format it into a readable string. val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss") .withZone(ZoneId.systemDefault()) val formattedTime = formatter.format(Instant.ofEpochMilli(currentTimeMillis)) ``` * You'll probably want to make some `data class`that represents an Entry. This `data class` would be called something like `Expense` and could have fields such as `title`, `dateTime`, and `cost`. * Then you can make a State that is a list of these expenses!
Make sure to also change the proper things in `MainActivity.kt` to actually get your screen to show when you run your emulator! Once finished, your app should look something like this: {% file src="/files/jNRRO7IwO2BYURnWr12N" %} Solution Demo Video! {% endfile %} When you're done, export your project through Android Studio and upload your ZIP to CMS! Congrats on finishing A2!

Exporting with File -> Export -> Export to Zip File...

# Week 3 | Navigation & Animations The more complex sides of UI... This week, we'll learn how to set up navigation between several screens and build small animations to give our UI a nice cherry on top! This concludes the first half of the course. After week 3, you should be able to build any UI you can imagine! # Relevant Links **Google Slides:** [**\[Slides Link\]**](https://docs.google.com/presentation/d/1rKivLWa_h8R3dy_oOvEoowTxDw9QCIptk8dAJWoLdPw/edit?slide=id.ge39b6d51b7_0_34#slide=id.ge39b6d51b7_0_34) **Relevant Textbook Sections**: [\[4.2 Implementation of the Bottom Navigation Bar\]](/chapters/8.-navigation/bottom-navigation), [\[2.4 Animations\]](/chapters/2.-jetpack-compose/2.4-animations) **YouTube Recording**: [\[Week 3 Lecture Link\]](https://youtu.be/0W91vHFgkh4), [\[Week 3 Demo Link\]](https://youtu.be/dlgzr23WJ7Q) **Demo Solution**: [\[GitHub Link\]](https://github.com/melissavelasquezz/Intro-to-android-demo-solutions/tree/main/demo3soln/app/src/main) # Demo: Onboarding So. many. screens! This week, we're working on navigating between multiple screens via onClicks and the bottom navigation bar, as well as practicing different types of animations. This demo was loosely inspired by onboarding screens, which are typically used to set up a user's account the first time they use an app. We'll have three screens: one for a user to enter their name, one that displays a personalized welcome message, and a how-are-you page. We'll also have a bottom navigation bar and buttons that will allow us to navigate between these screens!

1) EntryScreen

2) WelcomeScreen

3) MoodScreen

### Starter Code: Here's the [textbook's reference for how to set up Navigation](https://android-course.cornellappdev.com/chapters/8.-navigation/bottom-navigation). Download, unzip, and open this file in Android Studio. {% file src="/files/nmvlpF0Pk21KZHsaLC8d" %} ### Screen 1, 2: EntryScreen and WelcomeScreen The functionalities of these screens are very reminiscent of the first demo: we want to be able to store user input and display it. However, now that we are working across two different screens, the "ok" button will be responsible for updating the name in data as well as navigating to the next screen. We'll walkthrough setting up these screens, and they'll be built out for you in the starter code! Run the project and click around in the emulator to get a general understanding of how the app works. You should be able to navigate between screens using the buttons on the screen and the bottom navigation bar. ### Screen 3: MoodScreen This screen displays four mood options and an emoji. The emoji and background color change according to the selected mood. Click around the MoodScreen UI to see how it works right now. Notice that the emoji and the background color change abruptly when the buttons are clicked. The starter code already gives you the Buttons and the emojis, so your job is to use animations to make the transitions look smoother. Remember the three types of animations introduced in lecture: * animate\_AsState() * Modifier animations * AnimatedVisibility and AnimatedContent For reference, here's what the final product should look like. {% file src="/files/rnIWMRBc9ec8aKLUWH5P" %} Demo {% endfile %} #### TODO 0: Add the navigation dependency In the app `build.gradle` file, add the necessary dependency for navigation. Feel free to reference [docs](https://developer.android.com/develop/ui/compose/navigation#kts). #### Todo 1: Create a NavController #### Todo 2: Navigate to the selected screen Hint: Use `item.screen`. #### Todo 3: Navigate to WelcomeScreen Hint: Look at `Screen.WelcomeScreen()`. #### Todo 4: Add MoodScreen as a Destination Follow the rest of the routes to navigate to `MoodScreen()`. #### TODO 5: Animate the background color so that it fades into the new color when a different button is clicked. This animation should last for a duration of 1000ms * *Given that colors are defined on a continuous spectrum (in their hexcode forms), what type of animation should we use here?* * *Remember to ask if you're unsure!* TODO 5.5: The animation will handle updating the background color, so the starter code's update in the Button onClick will become redundant. Make sure to delete ```kotlin backgroundColor = getMoodColor(mood) ``` from the onClick before attempting to build your project.
Hint: Code structure for background color animation ```kotlin val backgroundColor by animateColorAsState( targetValue = //... animationSpec = //... ) ```
#### **TODO 6: Animate the emoji so that when a different mood button is clicked, the emoji appears to slide horizontally out of view while the next emoji slides horizontally into view from the other side.** The slide-in animation and slide-out animation should each take a duration of 300ms * *This syntax can be tricky so make sure to google things and ask questions* * *Given that the emoji changes depending on which mood is chosen, which of the three main types of animations should we use here?* * *Feel free to take creative liberties with what colors, emojis, and moods you pick!*
Hint: Code structure for emoji animation ``` AnimatedContent( targetState = //... transitionSpec = { //slide in togetherWith //slide out } ) { mood -> Text( text = getMoodEmoji(mood.first), fontSize = 200.sp ) } ```
### Congrats you've finished the demo! # A3: Stock Trading (RobbingGood) I am Sobbin...hood... {% hint style="info" %} This assignment has a release code! Please download it below, extract it, and open it in Android Studio. Ensure it can compile and run fine on your emulator before starting this assignment. {% endhint %} {% file src="/files/d4L70RNwyjMeWkwOrzTC" %} A3 Release Code! Extract and Open as an Android Project. {% endfile %} For our second assignment, we'll be making a stock-trading app competitor! Of course we won't be working with real money, but we've set up the above release code to give the semblance of trading your hard-earned cash! Let's walk through the code, shall we? *NOTE: This is a longer assignment, so we made sure to provide lots of **Hints!*** ## Release Code: Expand each of the files below for a description of the release code!
WalletRepository.kt This repository manages the user's virtual wallet. It keeps track of the current balance and allows the user to deposit or withdraw money when buying or selling stocks. Additionally, it maintains a record of the stocks the user owns. Methods you will use: `getBalance()`: Gets a numeric value for the balance that you can freely use in your UI! `percentageBalanceChange()`: Returns a float representing the percentage that the user's wallet has recently changed by (rise is positive, fall is negative). Free to use in UI. `buyStock()`: Buys a stock. `sellStock()`: Sells a stock. `amountStockOwned()`: Tells you how many of a given stock you own. Free to use in UI. **YOU SHOULD NOT EDIT THIS FILE.**
StockRepository.kt This repository handles the dynamic pricing of stocks, where each stock is identified by a ticker symbol. It provides methods to retrieve the current price of a stock based on its ticker. Behind the scenes, it randomly updates the stock prices every 3 seconds to simulate market fluctuations. Methods you will use: `getStockPrice()`: Returns the (current) stock price of the given ticker that you can use in your UI. `increaseOrDecreaseStockPrice()`: Returns a boolean; if true, the specified stock has increased in price. If false, it has decreased. Can freely use in your UI. *Note: do NOT use \`readStockPrice()\`. The way it is implemented will not work in your UI.* **YOU SHOULD NOT EDIT THIS FILE.**
MainScreen.kt MainScreen is an incomplete main screen that shows the home for our app, RobbingGood! It consists of a place where your `WalletRow` and `TickerRow`s will go!
{% hint style="danger" %} *Note: These two Repository files violate the MVVM paradigm. They are NOT a good example for what to do for the **Hack Challenge**; please refer to lectures 4, 5, and 6 for MVVM practices. These files are simply a bare minimum functionality we provide for this assignment.* {% endhint %} ## Requirements: Okay, onto the assignment! (expand each file below to see your requirements!)
WalletRow.kt WalletRow is a component that shows the user's balance with animations. If the user's balance has recently risen, the text shows green, otherwise red, and a little animation plays to swap the text out. In general, try to match this UI: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FzPY2IjoM9r1eMiqvl3uT%2Fimage.png?alt=media\&token=9cbfbb9e-48c2-4db1-859b-57a3a57b8a0f) 1. Display the user's wallet balance given by `getBalance()` as a nicely formatted ($XXX.XX), along with its percentage change (`percentageBalanceChange()`) to the far right, 2 decimal places max. 2. Whenever the balance changes, an `AnimatedContent` should swap out the percentage text. 3. If the percentage is positive, the percentage text should be a (bold) green, otherwise a (bold) red. 4. Once you've made this component, WalletRow should be replaced on the `MainScreen`, and you'll also later use it in `StockDetailScreen`. Hints: * Given a percentage, you can use the following code snippet to convert it into a nicely readable string: ```kotlin // Format 2 digits after the decimal val formattedPercentage = "%.2f".format(abs(percentage * 100f)) val percentageString = if (percentage < 0) { "(-$formattedPercentage%)" } else { "(+$formattedPercentage%)" } ``` * To achieve the space in between the left and right parts of the row, you might want to use `Arrangement.SpaceBetween`.
TickerRow.kt TickerRow is a UI component that displays a quick and dirty summary of a stock's price and which allows the user to click on the row to navigate to the Stock Detail Screen (SDS). In general, try to match this UI: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2Fpyr6gA90yctHwxcS1Jzd%2Fimage.png?alt=media\&token=df48abf6-0f44-4ceb-8bef-f4f89de1681b) You 1. Similar to WalletRow, display the balance and percentage change of this stock. 1. Whenever the stock price changes, an `AnimatedContent` should swap the balance/percentage text out. 2. Green if rise, red if fall. 2. If the user taps on this row, they should navigate to the SDS, sending the ticker as a navigation argument. 3. Once you've made TickerRow, use it in the LazyColumn in `MainScreen` to show the tickers! Hints: * You'll have to set up a NavHost! Please refer to our demo this week for tips. * (!!!) Make sure to then call your navigation code in `MainActivity` — it's currently just calling `MainScreen()`. * Do NOT make the NavHost inside of `MainScreen()` — the nav host should exist outisde of main screen, and then have main screen as one of the routes, and SDS as another route. * Think about what the state should be for the `AnimatedContent`--there are multiple correct answers! * For example, you can say that the text and color is a state! Or that the price/percentage is a state, and then you calculate the text with those values inside the `AnimatedContent`body. As long as it looks like it's animating right, you're good! * You can reuse snippets of code from `WalletRow`and A2 to achieve the money text formatting. * Use `Modifier.clickable()` to make *any* Composable clickable. * You'll likely want to thus provide an `onClick: () -> Unit` as an argument to `TickerRow.kt`.
StockDetailScreen.kt The Stock Detail Screen is a full screen which displays the current price of the selected stock, the user's wallet, and the amount of that stock owned. It also provides the option to buy or sell instances of that stock, updating the user's wallet accordingly. In general, try to match this UI: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FwurojbitUgd0Kx2LP3Wo%2Fimage.png?alt=media\&token=1b004629-3a09-4a1f-b951-7c95ad6e6dc9) 1. The ticker that the user has selected (and given to this screen as a nav argument) should be displayed at the top of this page as the title. 2. In the (roughly) middle of the screen, there should be 2 large, bold texts— one for the balance, and one for the percentage. 1. These should animate differently from the others; The float balance and percentage here should **animate** to the correct balance (meaning the literal number itself animates). 2. These texts can just be black. 3. The background of the entire screen should **animate** to a very light green if the stock is up, or a light red if the stock is down. 1. You must use `animateColorAsState` to achieve a smooth color animation. 4. At the footer of the screen, you should use `WalletRow` to display the user's current balance. 5. Add a text of some sort to display how many of the current stock the user has. You may use `amountStockOwned()`. 6. Add two buttons, Buy and Sell. Buying should call `buyStock()`and Selling should call `sellStock()`. *Note: To navigate back to the home screen, just use the in-built navigation. If you don't see nav buttons, on android, that just means dragging and letting go from the left-hand of the screen.* ***Hints:*** * You'll have to provide the stock ticker as a navigation argument. See lecture for to how to do this! * To achieve the faded green/red color, you can leverage doubling up a background Modifier! The following code will first make the background White, then layer a faded (0.2 opacity) color on top (for some `backgroundColor`): ```kotlin Modifier.background(Color.White) .background(backgroundColor.copy(alpha = 0.2f)), ``` * See `animateFloatAsState`and `animateColorAsState`. * You might want to take in the stock ticker (string) as an argument to the `StockDetailScreen` composable function! * (Similarly, you might want to take in the nav controller as an argument to `MainScreen` so that `MainScreen` knows how to navigate.)
Once you've completed A3, your solution should look something like this: {% file src="/files/pKFjMQPYyjmokvo8t435" %} A3 Solution Demo! (Fixed 3/26/25) {% endfile %} When you're done, export your project through Android Studio and upload your ZIP to CMS! Congrats on finishing A3!

Exporting with File -> Export -> Export to Zip File...

# Week 4 | MVVM and Flows How do you make an app... an actual app? This week, we'll learn to leverage the MVVM design pattern with flows to connect several parts of our app, all with the goal of allowing real, useful app logic, starting with the View Model layer! # Relevant Links **Google Slides:** [\[Slides Link\]](https://docs.google.com/presentation/d/1TpJ3zKXDli7aK4lD972AwPwouDy8S-J8HbcODcOMSlw/edit?usp=sharing) **Relevant Textbook Sections**: [\[7. MVVM Design Pattern\]](/chapters/7.-mvvm-design-pattern), [\[8. Flows\]](/chapters/8.-flows) **Lecture Recording**: [\[Week 4 Lecture\]](https://www.youtube.com/playlist?list=PLjf6nsEcF5KP5cZTjZ3HwObzQ9jTsU2X4), [\[Week 4 Demo\]](https://youtu.be/Vv_C6HD_KR8) **Demo 4 Solution**: [\[GitHub\]](https://github.com/melissavelasquezz/Intro-to-android-demo-solutions/tree/main/demo4soln) # Demo: Eatery Card 2 EateryCard Part 2 In this week's demo, you'll be practicing the MVVM architecture by displaying data from a ViewModel in the View and implementing some filtering logic in the ViewModel of a pseudo-Eatery app!
Download the starter code: {% file src="/files/jx6RrGQ78k0skT7XYTh7" %} ## Part 1: Hilt Setup (Hilt works together with Navigation to inject dependencies into the NavGraph, so you'll also have to set up Navigation whenever you're using Hilt. We've already done that for you in the starter code though!) ### Step 1: Add necessary gradle dependencies 1. Add the `hilt-android-gradle-plugin` plugin to your project's root `build.gradle` file and hit Sync Now on the blue banner that pops up: {% code title="build.gradle.kts (Project: demo4\_starter2)" %} ```kotlin plugins { ... id("com.google.dagger.hilt.android") version "2.57.2" apply false id("com.google.devtools.ksp") version "2.2.10-2.0.2" apply false } ``` {% endcode %} 2. Apply the Gradle plugin and add these dependencies in your `app/build.gradle` file and Sync Now: 1. (Some of the dependencies in the following code block depend on each other, so any red highlighting should be resolved during the sync.) {% code title="build.gradle.kts (Module: app)" %} ```kotlin plugins { ... id("com.google.dagger.hilt.android") id("com.google.devtools.ksp") version "2.2.10-2.0.2" } dependencies { ... implementation("com.google.dagger:hilt-android:2.57.2") ksp("com.google.dagger:hilt-android-compiler:2.57.2") implementation("androidx.hilt:hilt-navigation-compose:1.3.0") } ``` {% endcode %} ### Step 2: Make a MainApplication class In the same directory as MainActivity.kt, create a MainApplication.kt file and add the following code to it. Do imports as needed! ```kotlin @HiltAndroidApp class MainApplication : Application() {} ``` Add the following to your AndroidManifest.xml to define your custom Application class. This is required for Hilt to work properly: ```kotlin ChatRepository.kt A Model class that performs (mock) networking tasks to implement that chatbot/chat functionality. DO NOT EDIT THIS FILE. You may interface with this file, though, using the following properties, to complete (mock) networking: * `chatMessageFlow`: A flow emitting a list of (all) the chat messages in the history of the chat. * `currentlyTypingFlow`: A flow emitting (as a Boolean) whether the chatbot is "typing" or not. * `botNameFlow`: A flow emitting the name of the chat bot. * `sendMessage(text: String)`: A mock networking function that will send the user's `text` message as a chat message.
ChatViewModel.kt A (Hilt) ViewModel class that connects up `ChatRepository.kt` and `ChatScreen.kt`. You'll mostly be working in this file for your solution. This file is VERY incomplete. For starters though, we've given you... * `uiStateFlow`: The (only) state flow that your VM should use to emit state down to the UI. Emits an object of type `ChatUiState`. * `ChatUiState`: A data class representing the UI state that contains ALL the data that `ChatScreen.kt` needs to know. This class is currently incomplete; you'll need to add fields here as you go.
ChatScreen.kt The primary (and only) UI screen in this assignment. It consists of a header, a body consisting of chat messages in a big `LazyColumn`, and a footer where the user can type in a message and send. For organization, this file consists of several `@Composable`s: * `ChatScreen()`: The main screen Composable. * `ChatFooter()`: The footer, where the text field and send button lay. * `ChatHeader()`: The header, where the chat bot's name and last sent text lay. There happens to be a `@Preview` here for the header; take a look if you'd like!
There are a few other files here, but those are not too important and are mostly complete: * `ChatBubble.kt` is just a component for the Chat Bubble. * Other files are basically junk; don't worry about them. *** ## Requirements: Okay, onto the assignment! This assignment is a bit different from previous assignments in that you'll be implementing **features**, one by one. The reason we do not split then into files is because your solution will often have to span several files for each feature. (expand each of your features' requirements below!)
1) Reading the Message Flow First, let's connect our chat up with our pocket philosopher! It wants to say some stuff to us right now, but we can't quite hear it just yet until we connect our VM to our Model repository! 1. Inject an instance of `ChatRepository.kt` into our ViewModel. 2. Read the flow value of the chat messages flow from the repository, using it to update (with a `copy`) the current Ui State Flow with the correct messages! For this section, we've **already hooked up the messages field from the UiState to the UI**. So this should be all you need to do! Note: If you've done this correctly, you should no longer see the initial test messages, and should now see the following chat: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2Fz9YjkGFDilYwavtbmwb0%2Fimage.png?alt=media\&token=c6310019-c678-4cd4-849b-8ef9f870c2ef) Seems like our philosopher is trying to reach us! Let's finish the next parts so we can have a nice, deep chat :-)
2) Typing into the Text Field If you currently try typing into the text field in the footer, nothing changes, and the text currently freezes at "TODO". Let's fix this! 1. Add a new field to `ChatUiState` corresponding to the text currently typed into the text field. 2. Pipeline this down the the UI such that the UI now reads from this text and puts it through the `ChatFooter()` into the `BasicTextField` value. 3. Now time for the reverse direction! Add a new function `onTextChanged(text: String)` to your VM. Make it so that when you type text and the `BasicTextField` value changes, this VM method is called! Hints: * You'll need to add new arguments to `ChatFooter()`! * Ideally, 2 new arguments: one for the text downwards, and one for the onTextChanged upwards! You should now be able to *type* a message into the box. But you can't quite send it yet...
3) Sending a Message Now let's allow ourselves to actually send a message to our philosopher! 1. Change the derived field value `isSendEnabled` such that if the typed text (field in your ChatUiState from part 2) is non empty, it is true, otherwise false. 1. *If you've done this correctly, the Send button should now turn enabled if you've typed in text!* 2. Add an `onSend()` that gets called by the Button `onClick` in ChatFooter. You'll need to pipeline this onClick upwards, similar to what you did in part 2. 3. Implement `onSend()` : 1. Send the (typed in) message by calling `chatRepository.sendMessage(...)` . 2. Clear the typed in message after the message is sent. You should now be able to send a message and see your philosopher respond! In fact, you should actually be able to converse with your philosopher now. Try it out!
4) Reading the Header Flow Information Okay, nearly there! But the name we've given our philosopher isn't quite showing up top! And our chat isn't keeping track of when our last message was sent... let's fix that! 1. Similarly to previous parts, hook up ChatRepository's `botNameFlow` down through the Repository, to the VM, to the UI, so that the TODO text now reads the bot's name! 1. *It should be ??? at first, then populate with your name you've given after you give the philosopher a name.* 2. Do the same for `timestampFlow` such that the "Last message sent at: TODO" now reads the correct time! (A lot of working with MVVM is going through these motions. After this, we just have one more and you'll be an expert!) Here's an example of what you should see after you name your philosopher: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FOZFSGMPPRATc0OcCViRK%2Fimage.png?alt=media\&token=fcf98eda-513d-4088-be86-39ef74218bfc)
5) Reading the Currently Typing Flow Finally for a finishing touch! Your philosopher often pauses and takes time to think, but also takes time to type out a response! It'd be great if you could have a little indicator for that... Thankfully, your UI already has this! See the TODO for part 5) in ChatScreen? 1. Read from `currentlyTypingFlow` from the chat repository (down through the VM, to the UI) to put the correct boolean condition for if the philosopher is typing (instead of just currently FALSE).
If you've solved A4 correctly, your solution should look something like this... {% file src="/files/Xip0CHoDHroXMcLu5pLk" %} A4 Soln Demo Video! {% endfile %} When you're done, export your project through Android Studio and upload your ZIP to CMS! Congrats on finishing A4!

Exporting with File -> Export -> Export to Zip File...

*Note: Perhaps you find it annoying that you have to scroll with each message manually? We'll learn a solution for that next week with UIEvents!* # Week 5 | Coroutines, Networking, JSON The backend to my frontend ❤️ In this week, we'll learn how to write networking requests with Retrofit, leveraging coroutines and JSON specification to read important data from an example backend! # Relevant Links **Google Slides:** [\[Slides Link\]](https://docs.google.com/presentation/d/1MITDAKcLD7efTiEF_XIzQyeUj-tzrLuw4hZ2xSDumT8/edit?usp=sharing) **Relevant Textbook Sections**: [\[5.5 Concurrency\]](/chapters/5.5-concurrency), [\[6. Networking and 3rd Party libraries\]](/chapters/6.-networking) **YouTube Recordings**: [\[Week 5 Lecture\]](https://youtu.be/8g999efx5i8), [\[Week 5 Demo\]](https://youtu.be/roAnjZFO5eo) **Demo Solution**: [\[GitHub Link\]](https://github.com/melissavelasquezz/Intro-to-android-demo-solutions/tree/main/demo5soln/app/src/main/java/com/cornellappdev/chatter) # Demo: Chatter Also known as Y... This demo has starter code! Please download it below, extract it, and open it in Android Studio. Ensure it can compile and run fine on your emulator before starting this assignment. {% file src="/files/PNCT8CxloMXCOU3oK0am" %} Demo 5 Release Code! {% endfile %} For this demo, we'll have you develop the networking logic for a basic social media app! Let's walk through the code, shall we? *** ## Starter Code Expand each of the files below for a description of the starter code!
data package Contains all code that deals with data directly (data layer) * `model` contains the data classes that will be used to represent the Post data * `remote` contains the Post API Service interface * `repository` contains the `PostRepository` that will be used to handle and expose Post data to the UI layer.
di package Contains all code that deals with dependency injection * `ChatterApplication` contains the Hilt Application Class for the app * `NetworkModule` contains the providers for the various parts of the retrofit layer like the OkHttpClient
ui package Contains all code in the UI Layer including ViewModels * `components` contains a couple Composables that will be used in the `PostScreen` * `ChatterHeader` contains the top part and search bar of the screen * `PostCard` contains the component that represents the Post data as a card * `screens` contains the `PostScreen` that displays the products as a list and uses a search bar to filter the results * `viewmodels` contains the `PostViewModel` that handles the business logic of `PostScreen`
*** ## Instructions:
1) OkHttpClient Create the OkHttpClient provider in `NetworkModule`
2) Retrofit Instance Create the Retrofit instance provider. For our base url, we will be using .
3) PostAPIService We will be using the Get All Posts and Search Posts endpoints from [here](https://dummyjson.com/docs/posts#posts-all). Based on that information, do the following: 1. Create the relevant serializable data classes in `Post.kt` to represent the JSON responses. To see the example JSON output, you can visit for example. 1. It might be helpful to have AI do the heavy lifting for creating the data classes with serial name. 2. Define the methods that represent the API endpoints we are using with the correct Retrofit annotations in `PostApiService.kt` 3. Create the API Service instance in `NetworkModule` using the retrofit instance provider you made earlier and the interface you just defined.
4) PostRepository.kt 1. Inject the api service into the repository. 2. Implement the `getAllPosts` method by using the api service and returning a Result\>. 3. Do the same for the `searchPosts` method.
5) PostViewModel.kt 1. Inject the repository into the ViewModel. 2. Replace Any with the actual Post data class you defined earlier in the `PostUiState`. 3. Implement `loadPosts` with the repository functions. Remember to handle the loading and error states accordingly when the function is called, on success of the repository function result, and on failure of the repository function result. 4. Do the same for `searchPosts`.
6) PostScreen.kt Alright, time to tie it all together! In this part, you'll connect your screen to the ViewModel and test the final networking logic to get your app actually showing the proper response from the backend. 1. Display the list of products in the `PostContent` composable using `LazyColumn` and the `PostCard` composable. 2. Collect the uiState and searchQuery StateFlows from the ViewModel. 3. Pass the states and the relevant handlers into the `PostScreenContent` composable which you should add to the `PostScreen` composable. If you get any networking errors, make sure to debug with LogCat errors!
If you've solved the demo correctly, your solution should look something like this... {% file src="/files/T2QyOZnkdraBmlz9tYa6" %} # A5: Bananazon I'm going bananas!!! This assignment has a release code! Please download it below, extract it, and open it in Android Studio. Ensure it can compile and run fine on your emulator before starting this assignment. {% file src="/files/vLFZU5eqRj3fLjDqeRvB" %} A5 Release Code! {% endfile %} For our fifth assignment, we'll have you develop the networking logic for a basic e-commerce app! *We've talked about money and happiness, and now, let us ponder — can money buy happiness? Perhaps not, but money sure can buy a lot of things — let's dive into the depths of materialism...* Let's walk through the code, shall we? *** ## Release Code Expand each of the files below for a description of the release code!
data package Contains all code that deals with data directly (data layer) * `model` contains the data classes that will be used to represent the Product data * `remote` contains the Product API Service interface * `repository` contains the `ProductRepository` that will be used to handle and expose Product data to the UI layer.
di package Contains all code that deals with dependency injection * `BananzonApplication` contains the Hilt Application Class for the app * `NetworkModule` contains the providers for the various parts of the retrofit layer like the OkHttpClient
ui package Contains all code in the UI Layer including ViewModels * `components` contains a couple Composables that will be used in the `ProductScreen` * `Header` contains the top part and search bar of the screen * `ProductCard` contains the component that represents the Product data as a card * `screens` contains the `ProductScreen` that displays the products as a list and uses a search bar to filter the results * `viewmodels` contains the `ProductViewModel` that handles the business logic of `ProductScreen`
*** ## Requirements: This assignment is not split into features, but rather more so as steps towards implementing Retrofit correctly.
1) OkHttpClient Create the OkHttpClient provider in `NetworkModule`
2) Retrofit Instance Create the Retrofit instance provider. For our base url, we will be using .
3) ProductAPIService We will be using the Get All Products and Search Products endpoints from [here](https://dummyjson.com/docs/products#products-all). Based on that information, do the following: 1. Create the relevant serializable data classes in `Product.kt` to represent the JSON responses. To see the example JSON output, you can visit for example. 1. It might be helpful to have AI do the heavy lifting for creating the data classes with serial name. 2. Define the methods that represent the API endpoints we are using with the correct Retrofit annotations in `ProductApiService.kt` 3. Create the API Service instance in `NetworkModule` using the retrofit instance provider you made earlier and the interface you just defined.
4) ProductRepository.kt 1. Inject the api service into the repository. 2. Implement the `getAllProducts` method by using the api service and returning a Result\>. 3. Do the same for the `searchProducts` method.
5) ProductViewModel.kt 1. Inject the repository into the ViewModel. 2. Replace Any with the actual Product data class you defined earlier in the `ProductUiState`. 3. Implement `loadProducts` with the repository functions. Remember to handle the loading and error states accordingly when the function is called, on success of the repository function result, and on failure of the repository function result. 4. Do the same for `searchProducts`.
6) ProductScreen.kt Alright, time to tie it all together! In this part, you'll connect your screen to the viewmodel and test the final networking logic to get your app actually showing the proper response from the backend. 1. Display the list of products in the `ProductsContent` composable using `LazyColumn` and the `ProductCard` composable. 2. Collect the uiState and searchQuery StateFlows from the ViewModel. 3. Pass the states and the relevant handlers into the `ProductsScreenContent` composable which you should add to the `ProductsScreen` composable. If you get any networking errors, make sure to debug with LogCat errors!
If you've solved A5 correctly, your solution should look something like this... {% file src="/files/YaD7JGG97cXXtqnsI4pU" %} A5 Solution Demo Video! {% endfile %} When you're done, export your project through Android Studio and upload your ZIP to CMS! Congrats on finishing A5!

Exporting with File -> Export -> Export to Zip File...

# Week 6 | Dumb Components & UIEvents How do we make our components obey MVVM? Make them dumber! In the last week of the course, we'll learn how to perfect our View layer of Model-View-ViewModel to allow any part of our app to communicate with our UI effectively! This concludes the second half of the course. After this, you should have everything you need to build a fully functional, useful app! # Relevant Links **Google Slides:** [\[Slides Link\]](https://docs.google.com/presentation/d/1QqpvnXvUweqFmZLiYSBbzFrHL9qzPgLUG2OIq54py3o/edit?usp=sharing) **Guest Lecture Slides**: [\[Slides Link\]](https://docs.google.com/presentation/d/1NMdE9rA0yALnvfi82T5MILChY6JmVRJ_mmsXGVq2dy4/edit?usp=sharing) **Relevant Textbook Sections**: [\[Bonus Lecture: Industry Practice\]](https://app.gitbook.com/o/-LDzut-Pw60HMkLc_mHP/s/-LvOeSx5ZqjJA8sxykMu/~/changes/896/archive/fall-2024-course-material/bonus-lecture-industry-practice) *(^ The slides of this lecture greatly communicate the same idea as this week's material.)* **Lecture Recording**: [\[Week 6 Lecture\]](https://youtu.be/WHZXK19injs) **Demo Recording (from SP25)**: [\[Week 6 Demo\]](https://youtu.be/Ri6oLJTIj20) # Demo: Music Player This week, we'll be practicing more MVVM abstractions and UIEvents. This app starts at the MiniPlayerScreen. When we click on the MiniPlayerCard, we are taken to LoadingScreen. There's a slight delay as our next screen "loads" before the app navigates there.

Screen 1

Screen 3

Screen 2

Download the starter code: {% file src="/files/JLl2ISQGW2TRoezh1v16" %} ## Part 1: Implement LaunchedEffects for Navigation Remember that LaunchedEffects define a function that will be called when a certain value changes (the 'certain value' that we want LaunchedEffect to keep an eye on here is navigateEvent). In LoadingScreen.kt, you'll see that there's already a LaunchedEffect. You'll need to make the **first** LaunchedEffect before that, which actually does the navigation. 1. The first LaunchedEffect will listen for a navigation event and perform the navigation. 2. The second LaunchedEffect starts the process (detailed in the function call) that will eventually produce the navigation event.
LaunchedEffect syntax can be a little tricky so here's a hint! ``` LaunchedEffect(__________) { _________?.consumeSuspend { destination -> __//navigate to destination______________ } } ```
Once you've correctly implemented the LaunchedEffect, clicking on the MiniPlayerCard should take you to the LoadingScreen and then the PlayerCardScreen after a short delay. ## Part 2: Make the PlayerCard a dumb component Currently, the PlayerCard component is managing its own states (its values change base on mutable states). We want it to have the same functionality as the MiniPlayerCard and practice keeping components dumb, so we want to let the ViewModel handle all of the logic. 1. Take a look at the PlayerScreen.kt. This is where the PlayerCard is called. Notice that right now, the PlayerCard takes no arguments. 2. To make it dynamic, we'll start by updating the arguments that PlayerCard needs to take: title, artist, isPlaying, progress, onPlayPauseClicked 1. *Try to figure out the types on your own! title and artist are just Strings.* 3. Fix the error that occurs in the IconButton before moving on 1. *Hint: use one of our newly defined arguments.* 4. Update the PlayerCard call in PlayerScreen(). You'll need to get the data from the ViewModel. Here's an example of how to do that. 1. *Hint: use MiniPlayerCard as a reference!* ``` val currentSong by viewModel.currentSong.collectAsState() ``` 4. Once this is all set up, you should be able to run the emulator and see the PlayerCard changing progressing through and changing songs! # A6: Rate My Vibe Are you chill like dat? This assignment has a release code! Please download it below, extract it, and open it in Android Studio. Ensure it can compile and run fine on your emulator before starting this assignment. {% file src="/files/FyMUOGpkPcVoUS0KCTGW" %} A5 Release Code! {% endfile %} For our fourth assignment, we'll have you implement lots of the UI/VM logic underlying a relatively complex, totally-AI-powered rating system for your photos! As many app ideas out there start using permissions and libraries to access features on your phone such as photos and the camera, this app will feature a **photo picker!** The overall idea is that users will be able to upload their photos into this app's gallery, and get a vibe rating for each photo they upload. Let's walk through the code, shall we? *** ## Release Code: Expand each of the files below for a description of the release code!
PhotoRatingRepository.kt This Model class provides mock networking/local storage functions that allow you to get photos by their stored ID, rate their vibes on 5 different scales, and save new images. Here's a breakdown of the functions you'll use: * `getImageFromId()`: Given an \[id], returns the image associated with it. * `getImageIds()`: Returns a list of all image IDs. * `happinessRating(), virtueRating(), anxietyRating(), excitementRating(), sadnessRating()` : Computes and returns a Float rating for the image associated with the input id. This is actually a pretty expensive computation, so it may take a while. * `saveImage()`: Saves a new image to "local storage."
UIEvent.kt This is the UIEvent class discussed in lecture.
ImageCard.kt A general-use component that displays an image that is either loading or loaded. If the image input is null, the image is considered still loading. If the image input is a proper bitmap (image array data), the image renders.
UploadImageCard.kt A similar card to the above that instead displays a little indicator the user can press to, allegedly, upload a new image.
RatingLabel.kt A bit of animated text with a label and a (loading) score that displays the rating/score of a particular emotion: ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FaBx3Gs702UZxi753BfDn%2Fimage.png?alt=media\&token=2b40cbf3-c7cc-4137-9421-48d75a8b9377)
There are some other files, but those should be self-explanatory or redundant--the important ones will be referenced in the **Requirements**. *** ## Requirements: This assignment is also roughly split into "features." (expand each of your features' requirements below!)
1) Rendering Photos While we've provided a good amount of VM-M starter code, the images we've loaded in the home screen still aren't rendering. 1. Connect the images to the UI so that the UI renders an ImageCard for each image in the UiState. 2. Make sure the modifier here renders the image reasonably, still with `220.dp` height. You should see the following (we added one test image automatically): ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FisBMxXMs7rNtLMQ3wUBg%2Fimage.png?alt=media\&token=d78427c8-d77e-42f2-91a0-a7112c09bb36)
2) Uploading Photos Currently, nothing happens if you press on the Upload Image card! Let's implement the ability for the user to upload a new image, and have that image show up! 1. Add a new HomeViewModel function that fires when the user clicks the upload card. 2. Implement the above function such that a UIEvent is sent to the home screen. 3. Consume the event in the home screen, launching the photo picker. You can use the following snippet: ```kotlin pickMedia.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)) ``` 4. When the user successfully picks a photo, send that bitmap back to the VM! We've implemented the code that will automatically make this image show up if you've implemented (1-4) correctly. See the completed demo for how images should pop up! (Don't worry about the fact that all images reload. That's our fault.)
3) Navigation Currently, clicking on an ImageCard does nothing. Implement our card so we end up with navigation to the rating screen! 1. Add an onClick to ImageCard that is tied to the surrounding `Surface`. 2. When an ImageCard is clicked, navigate with the given `navController` to the rating screen, passing in the image ID as argument. 1. (NOTE: you can use `uiState.ids` to help with this purpose) 3. Tweak the existing `onLoadImage()` such that after the user uploads an image, they will also undergo this navigation 1s later, after `refreshImages()` is called. 1. HINT: you will need to use a UIEvent; navController exists only in the UI. You will also need to call `delay(1000)`. Again, see the demo to see what to expect!
4) Rating Nav Args Let's switch gears over to the rating screen! ```kotlin val id: String = checkNotNull(savedStateHandle["id"]) ``` Note this line in RatingViewModel. This pulls the image ID nav arg given to the rating screen. Don't worry too much about how this works; just know `savedStateHandle` is used to pull navigation arguments via some Hilt/Lifecycle shenanigans. 1. Write an `init` block (this fires when the screen first opens) that loads the image and sends it down as a bitmap to the screen. You may reference examples in `HomeViewModel` for how to do this, especially with coroutines (like `viewModelScope.launch`). 2. Adjust `RatingScreen.kt` such that this new bitmap info is correctly sent to its `ImageCard`. 3. Make it so that the button "See my Rating!" is only enabled if the image bitmap is non-null. You should see the image pop up after you are done! Note that you'll have to write your own UIState class and a few other things; we've intentionally kept this view model very bare bones as starter code. Your image should now render (after it has loaded): ![](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvOeSx5ZqjJA8sxykMu%2Fuploads%2FJw2fNgXfyMpt1Cj6V3gc%2Fimage.png?alt=media\&token=89a00eb2-c0df-49a9-97e8-3902112262dd)
5) Show the Ratings! Finally, let's make it so that the user can indeed see their ratings! This implementation is a bit more open-ended, but please reference the demo video to see what we generally expect! Don't worry about making the UI exactly match. 1. After the user presses "See my Rating!", replace the footer to instead animate out and show 5 rating labels. 1. Please use the colors we've given you: `Happiness`, `Excitement`, etc.! 2. As part of the UiState, load the ratings using `photoRatingRepository` and send them down through the screen, through the footer, to these labels.
If you've solved A5 correctly, your solution should look something like this... {% file src="/files/lXDzvN1pQhTWCmmNYe0j" %} A5 Solution Demo! {% endfile %} When you're done, export your project through Android Studio and upload your ZIP to CMS! Congrats on finishing A5!

Exporting with File -> Export -> Export to Zip File...

e # Bonus Week | Hack Challenge & ML Kit There's no starter code anymore... For this semester's bonus week, we will be helping you get started with Android development for the Hack Challenge! Up until now, we've been providing starter code that contained the dependencies needed to implement navigation, MVVM, etc. If you feel lost on how to lay a strong foundation for your app, we hope this bonus lecture will help! In addition to that, we will also have a bonus lecture on Google's ML Kit. Get ready to dive deep into how we can use machine learning as mobile developers! # Relevant Links **Monday Bonus Lecture Slides:** [\[Slides Link\]](https://docs.google.com/presentation/d/1zgMwCsJ7t88vBd-n6hEuV8sNJh9-RQoy9GSCMJK9P60/edit?slide=id.g385da76c1c9_0_1020#slide=id.g385da76c1c9_0_1020) **Wednesday Bonus Lecture Slides:** \[TBD] **Video Recordings:** \[TBD] # 1. Introduction to the Editor and Views Android Studio is the official Integrated Development Environment (IDE) for Android app development, based on [IntelliJ IDEA](https://www.jetbrains.com/idea/). Think of it like Eclipse or PyCharm, but that Android Studio is geared specifically towards creating and publishing Android applications. It comes with many features that help in development, most helpful of which is the ability to simulate programs on Android devices. Android Studio also supports programming in two different languages: * **Kotlin** - the current industry standard * **Java** - everyone's favorite legacy language ## Topics * Introduction to the Editor * SDK Management * Kotlin Review * Views # 1.1 Introduction to the Editor ## Starting an Android Studio Project After you have successfully installed the Android Studio IDE, double-click the Android Studio application icon to start it. Click **Start a new Android Studio project** → then select “Empty Activity”. Name the project the same name that you want to use for the app. ![Create a new project window](https://lh6.googleusercontent.com/xidgJJYOgdAd4i2PAPuhvPhJPhYnPLm2oI-qnE4H2YHHlVS9KPvCI0Pcdx9cK6ctpxC07lhq8S3VBLiy2NbFqA9_R5GuUa-Neq7XNgLEsRr4ftxpgwMDppyCDyd5bGbpAY1t_vr3) {% hint style="info" %} **Note**: The company domain field must be unique if you wish to publish to Google Play, as that's the identifying name that differentiates your app from anyone else’s. {% endhint %} ## Editor Layout The standard layout of the Android Studio editor has several logical panes that in all have all the functions you'll need to develop for Android. ![Breakdown of Android Studio editor](https://195521982-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvOeSx5ZqjJA8sxykMu%2F-LvZI1SrndGON-kEQjOH%2F-LvZNhObKu-xFRemrBbb%2Fimage.png?alt=media\&token=4c12986b-347d-47a3-9e74-f2bdcbfe3749) The main five components of the editor that we'll touch upon includes toolbar, project pane, editor, menu bar, and bottom menu bar. ### Toolbar This is the bar near the top containing shortcuts to different actions within Android Studio. The most important is the green triangle allowing you to run your program. If you press it, you should see a simulator pop up and run the code. ### Project Pane Just as in most IDEs, our project files are available in the left third of the screen. You can navigate to different files in your project by using the project pane. One neat trick is to go to the toolbar at the top of the project pane and toggle from **Project** to **Android**; this way, you can navigate directly to the java and XML files. ### Editor This is the component of the screen where the code is written. If you just created a new activity, you should see something like this: ```kotlin class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { ... } } ``` The code above might be a bit difficult to understand. For now, think of `onCreate()` method of `MainActivity` as the first method that is executed when running our application, similar to how `public static void main(String[] args)` is first executed in Java. ### Bottom Menu Bar The bottom menu bar returns output from the compiler and displays useful information about gradle and compile time errors. The bar also houses the debugger, which is a great tool to use for understanding errors. ## Android Emulator Android emulators are what developers use to test their application. A selection of available emulators shows up in the Toolbar, directly to the left of the green play button. Your [connected](https://developer.android.com/studio/run/device) Android devices will also show up here, which can also be used to test your application. To create a new Android Emulator, you must use **Tools > AVD Manager** to create and edit Android Virtual Devices. Emulators are valuable tools for testing, but beware of the drawbacks. They will most likely be slower than their physical counterparts and will most definitely slow down your machine while you're running them. They often don't have as many capabilities as the real phone and certain functionality (like getting user location) is often absent. For applications that require user data, such as location or storage, it is recommended to test directly on a physical device. ## Logcat Android Studio doesn’t have a traditional version of the console that IDEs like Eclipse and PyCharm do. Instead, Android Studio uses what is referred to as Logcat. To open Logcat, navigate to **View > Tool Windows > Logcat.** Our end users will never be interacting with Logcat, so this feature is only used by the developer for debugging purposes. Therefore, unlike Java’s standard `System.out` methods for printing to the console, Android Studio has it’s own conventions: * `Log.d(tag, message)` for logging debugging statements * `Log.i(tag, message)` for printing useful information to developers * `Log.w(tag, message)` for outputting a warning (generally for operations that should never occur) * `Log.e(tag, message)` for outputting an error message Here's an example of how you might using the Logcat for debugging. In this example, we're printing out the string `name` to the console: ```kotlin var name = "Android" Log.d("tag_string", name) ``` Now, let’s look at the Logcat. If we re-run our project, we’ll see a huge stream of data that is completely independent of what we’ve told our program to print. You can filter out the stream by typing "tag\_string" into the search bar and you should see the line: ```