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.
The assignment gives you an opportunity to build an interactive mobile application, and gain experience managing dynamic layout on a mobile device.
Design and implement a mobile application called Fotag, 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. 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/f18/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, or expand it in a popup window, which shows both the image and the ratings (i.e. the user should be able to change the ratings from the full-screen as well). There should be an obvious way to dismiss this window or popup, and return to the image grid (e.g. cancel or back button, or touching the image a second time to dismiss it).
Loading or clearing the list will clear the ratings. You do not have to save the ratings between sessions.
The filter should be cleared when you load a new set of images.
If you change the rating of an image, the current filter should be applied immediately (e.g. if the filter was set for 3 stars, and the user changes an image to 1 star, it should disappear from the layout immediately).
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).
You should automatically switch layout based on the phone orientation.
Horizontal orientation should show a fixed number of columns (2 or more, 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 one or more rows, growing to accomodate the number of images (i.e. a vertical scrollbar should appear if needed, but it should never show a horizontal scrollbar).
- You need to use Android Studio 3.2.1 to build your application (which is the latest released version at the time of this assignment). You must use Android SDK API 26 to build your application, which is the default SDK that is included with Android Studio. Instructions to install and configure these environments are listed under getting started.
- 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). If yo do this, put comments in your code referencing the original source. You are not allowed to use any other third-party code or libraries.
- You must test using a Pixel (Google Phone) AVD using API 26.
Here's some suggestions if you're new to Android and mobile development.
- Create your project (or import the starter project). Setup your AVD, and configure the project to launch and run the empty project in the AVD. Projects are very difficult to get setup and built 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.
- Consider creating two activities: one for the image list, and one for the full-screen image. Use intents to pass information between these activities.
- When you submit, submit everything.
Submit the following in your personal Git repository:
- An Android Studio project, including all required source code and resources.
- Make sure to include the APK file! (i.e. build and run it first, then add the APK file when committing and pushing to Git). TAs will try and import your APK file first so it's critical that you include this.
- A 'readme' file (text or markdown) that documents any information that the TA will need to grade this.
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:
- Deliverables: Code compiles and runs.
- Application loads, and screen includes a toolbar with required functionity.
- Images shown in a layout, with ratings. Changing phone orientation loads the appropriate layout.
- User can load images (from resources). Images appear in the grid, reasonably sized for the device. Selecting an image shows an enlarged image.
- Can rank individual images, and filter based on ranking.
1.0. Initial release.
1.1. Nov 28. Added other options for dismissing image.