A4: Mobile Development (Java/Android)

Due Mon, Dec 3 at 5:00 PM

Setup instructions are here!


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.

Learning Goals

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:

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).

Supported Layouts

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).

Landscape (Horizontal)

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).

Portrait (Vertical)

Technical Requirements

Getting Started

Here's some suggestions if you're new to Android and mobile development.

  1. 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.
  2. Commit and push changes to Git frequently! Anytime you make a substantial change (and your code compiles/works), then commit and push to Git.
  3. 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.
  4. Consider creating two activities: one for the image list, and one for the full-screen image. Use intents to pass information between these activities.
  5. When you submit, submit everything.


Submit the following in your personal Git repository:


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.