CMPT362 E100 Mobile Applications Programming and Design - Lab 3: The Mobile Stress Meter App
Stress Meter
Lab 3: The Mobile Stress Meter App: How Stressed are you right now?
How stressed are you right now? Or last week. It’s hard to recall yesterday, never mind last week. We all know college students get stressed and dealing with stress is an important part of navigating campus life. Well, now there is an app for that -- and you are about to implement your very own personal mobile stress meter to record your day-to-day stress levels across the term. You can customize this app and use it to reflect on your stress profile as the term ticks by -- like, wow, last week was so so stressful, or not, as the case may be.
In this lab, you get to implement the StressMeter. It queries the user using a set of images that correlate with perceived stress level. The app records the stress meter scores and time stamps in a file (writes to stress_timestamp.csv) that can be visualized later (reads from stress_timestamp.csv).
This lab is your first big challenge in thinking about a systems design to a problem. We ask you to understand the coding problem and make it happen. You will have to learn some things not taught in class. We also ask you to use a new UI that incorporates the AppBar and NavigationView. You will see the new look of the UI when you download and play with the StressMeter APK
What you need to do
We provide you with the images (project handout ). We also provide an apk. We do not give lots of detailed description of the stress meter. You should play with the app, get a good sense of how it works and then implement it. Don’t worry if you don’t code an exact replica of the app. It should be close enough.
https://canvas.sfu.ca/courses/80625/pages/stress-meter 1/5
10/20/23, 6:56 PM Stress Meter: CMPT362 E100 Mobile Applications Programming and Design
The GridView of images are presented as shown in Figure 1(a). The user can select an image on the page or request “more images” by tapping on the “more images” button. There are 3 pages with 16 unique images in total. If the user selects an image then a larger version of the image is presented to the user, as shown in Figure 1(b). At this point the user can select or cancel. If the user selects the score is computed and stored in a file (stress_timestamp.csv) and the app is no longer visible to the user. Figure 1(c) shows the score associated with the grid position (a different set was used in the sample apk but that's fine). You should store the score and its timestamp in the file.
You should visualize the data that is being stored in the csv file (a CSV is a comma separated values file) by reading the data from the csv file, and using the graph plotting library to plot the graphs, as shown in Figure 2(a). Furthermore, you also display a table showing the stress meter score and timestamp. Once you try out the app this will
https://canvas.sfu.ca/courses/80625/pages/stress-meter 2/5
10/20/23, 6:56 PM Stress Meter: CMPT362 E100 Mobile Applications Programming and Design all become clear.
You can switch between StessMeter GridView, and the visualization of the stress data by using the NavigationView, as shown in Figure 2(b). The NavigationView is new to you but you will recognize it as being the most common UI template among apps on Google Play. If you swipe from the left of the app, or click on the 3 horizontal lines on the top left corner of your app, then a sliding menu opens up, allowing you to switch between fragments (viz. StressMeter or Results). This is a very cool UI template that you can use in your group project at the end of term - we do not use this for MyRuns as you can see.
https://canvas.sfu.ca/courses/80625/pages/stress-meter 3/5
10/20/23, 6:56 PM Stress Meter: CMPT362 E100 Mobile Applications Programming and Design
Design Overview
We want you to do the deep thinking about how to build this app. But we do not leave you high and dry. Feel free to design and customise it as you wish (but always implementing the basic functionality). The app comprises 4 views: the image request, image response, visualization and NavigationView. The image request (image GridView) and the visualization views should be fragments. Whereas the image response can be an activity. You will also have a MainActivity that contains your fragments and the navigation view. Always consider the MVVM architecture and LiveData in your implementation.
The key view is a grid of the images we give you. This is a GridView. Google GridView examples see how it can be implemented. Here is what (https://www.w3adda.com/kotlin-android-tutorial/kotlin-gridview) you can begin with.
The NavigationView is a part of Android Design Support Library, It helps you create the slick sliding-over-everything navigation drawer that is such a recognizable part of material apps. You should Google examples to see how the NavigationView can be implemented. Here is an example (https://medium.com/@ezichukwuamarachi/using- the-android-navigation-drawer-in-kotlin-6cf2cdd0e42f) .
For the visualizations, you are free to use any third-party library of your choice. There are plenty available on the web, like the one here (https://github.com/AnyChart/AnyChart-Android) . The one used in our StressMeter demo app can be found here (https://github.com/lecho/hellocharts-android) .
Getting started
First off install the StressMeter APK on your phone and make sure you understand the app and its workflow. There is no design document for this lab so you have to work out the MVVM design and the components to implement. This is a good challenge for you rather than being given all the details. The demo app has its orientation fixed but you should not.
You should first create a new project call it StressMeter. As shown in Figure 3 you should create a Navigation Drawer Activity. Figure 3 shows the template for creating the activity and the two views of the HelloWorld activity that Android studio wires for you.
Once you have done this you will need to get acquainted with the new wiring for the UI and activity via references above.
Good luck. This is a very cool project that bring mobile computing and psychology together. The mobile stress meter tool was designed to get at the user's internal stress state while on the go; that is, quicky and visually. Results from the reported scores correlates with a psychological survey called the Perceived Stress Scale (http://www.mindgarden.com/132-perceived-stress-scale) . The mobile stress meter is inspired by the work on PAM.
Note, there is a large amount of code needed to be written compared to the first two labs so start early.
