$24
Synopsis
You will create an interactive mobile application that allows users to load images, and display these images in a dynamic layout that responds to device orientation. Users can rate images (1-5), and filter them based on this rating.
You can use either Android Studio or IntelliJ for your Android assignments. Instructions on setting up Android Studio are here. In either case, you are expected to submit your project files and an APK (binary).
Learning Goals
The assignment gives you an opportunity to build an interactive mobile application, and gain experience managing dynamic layout on a mobile device.
Requirements
General
Design and implement a mobile application called Fotag Mobile, which allows users to display a grid (or list) of thumbnail images, rate each image, and filter the list of images by this rating.
The application title should be Fotag (WatID), using your WatID e.g. Fotag (javery).
When first launched, the application should show a toolbar along the top of the screen, and an empty list (image grid). The toolbar should include:
A load button, which loads a set of 10 images over the network from this URL: https://www.student.cs.uwaterloo.ca/~cs349/s19/assignments/images. If the list already contains images, clicking on this button should clear the list and replace with a fresh set of images from that URL. Note that the images will be replaced for marking, so you shouldn't attempt to embed the images in your app - make sure to load them dynamically over the network.
A clear button, which removes all images from the list.
A filter widget, showing 5-stars, used to filter the image list based on rating. You should support filtering by "any" image, or "1-5" where the filter shows all images that have that rating or higher.
If you wish, you can split this functionality across multiple toolbars, or put one or more functions in a floating toolbar. Note that you do not have to use the image icons shown in the example below, but you should use images on your widget.
Your application needs to support JPG and PNG image formats. The sample images (above) include at least one image of each type, so a working application should be able to load all 10 images.
Each image in the grid should be shown as a thumbnail, with a set of 5-stars beneath it. Users can touch a star to select a rating, and they should be able to clear the rating on an individual image. Touching the image thumbnail in the grid should enlarge the image to full-screen (as a popup window, or separate activity). Touching it a second time should dismiss this window, and return to the image grid.
Loading or clearing the list will clear the ratings. You do not have to save the ratings between sessions.
You need to support two layouts: one that is shown when the phone is held vertically, and one when it is held horizontally. The user does not manually change the layout, but instead your application should respond to changes in phone orientation, so that the appropriate layout is always shown. (Note: the emulator uses a hotkey to change orientation, typically Ctrl-F11).
Supported Layouts
You should automatically switch layout based on the phone orientation.
Horizontal orientation should show a fixed number of columns (2 to 3 columns, your choice), and sufficient rows to show all of the images. Adding images should add more rows as required (i.e. it should show a vertical scrollbar if required, but it should never show a horizontal scrollbar).
Vertical orientation should show a single column, and sufficient rows to accomodate the number of images (i.e. a vertical scrollbar should appear if needed to show all of the images, but it should never show a horizontal scrollbar).
Technical Requirements
You must test using a Pixel (Google Phone) AVD using API 28.
You need to Android SDK API 28 to build your application (the latest released version at the time of this assignment).
You can use either Android Studio or IntelliJ, at your discretion. The course examples use Java 8 and IntelliJ 2019.1, but Android Studio can also be used, as long as the project builds using gradle from the command-line. Instructions to install and configure IntelliJ are included in the Android development slides.
You can use any functionality included in the Android SDK, and are free to use code snippets from the Android sample code included with the SDK (i.e. a snippet being a small segment of code). You can also use any code that we introduce in the course (i.e. from the CS 349 Git repo). If you do this, put comments in your code referencing the original source. You are not allowed to use any other third-party code or libraries, unless you obtain permission from the instructor (permission on Piazza is fine).
Your project must build from the command-line using Gradle. i.e. `gradle build` to build it. In your submission, you also need to explicitly include the APK file (see below).
Getting Started
Here's some suggestions if you're new to Android and mobile development.
Create your project with the correct Java and Android SDK versions. Setup your AVD, and configure the project to launch and run in the AVD. Projects are very difficult to get setup and build properly, so you want to make sure it's working before you start modifying anything.
Commit and push changes to Git frequently! Anytime you make a substantial change (and your code compiles/works), then commit and push to Git.
Use the XML-layouts to create two layouts, corresponding to the two orientations. If you set this up properly, Android will handle the orientation change for you. (Hint: make sure to save and restore data during the orientation change.)
Create a Main activity, and an additional activity for each screen (if you need multiple screens). Use intents to pass information between these activities.
When you submit, submit all of the project files. Make sure to include everything that is required to build from the command-line.
Submission
Submit the following in your personal Git repository:
All required source code and resources, gradle build and project files. Remember that your project needs to build using `gradle build`.
The APK file at the top-level of your directory structure, so that the TAs can easily find it. You will likely need to manually create this (Build - Build APK) and copy to this location. This will help the TA to load and test your application without needing to load the project.
A `readme` file (text or markdown) that documents any information that the TA will need to grade this.
Assessment
Late assignments will not be accepted. Markers will test your application by running your APK file against a Pixel AVD. Your submission will be assessed as follows:
5%
Deliverables: Code compiles and runs.
10%
Application loads, and screen includes a toolbar with required functionity.
35%
Images shown in a layout, with ratings. Changing phone orientation loads the appropriate layout.
30%
User can load images from URL above. Images appear in the grid, reasonably sized for the device. Selecting an image shows an enlarged image.
20%
Can rank individual images, and filter based on ranking.
Versions
1.0. Initial release.
1.1. Moved due date to Sun Jul 14 (the end of the weekend).