Mobile Technologies (11492 & 9076)
Assignment
UC Bruce Campus Map for Events – Android Mobile App
Submission: Use Android Studio to export your project to a zip file and submit this file using the submission box for Assignment on Canvas site of this unit. Email submission is not accepted. Late submission: 5% of the total marks (i.e., 1.5 mark) per day.
Task: Implement an Android mobile app for adding events and activities at University of Canberra and display them on UC Bruce Campus map.
The user enters an event name to the app then adds activities on the campus for this event. All these activities will be saved to Google Firebase Realtime Database and Cloud Storage. The user then opens a Google map on the app that shows UC Bruce Campus map with markers at the added activities’ locations. The app also lets the user know the last known location of the user on the map and shows the routes that the user can walk from the user’s location to the activities’ locations. The app also shows street views at the campus entries and changes the map type from normal to satellite.
Below are the requirements and screenshots for this app.
Requirements
Use Android Studio with Java language and Empty Views Activity and Google Maps Activity
templates to create this project.
The dependencies for map, location services, street view, Firebase realtime database and
Firebase cloud storage must be the latest versions.
Other requirements can be found below with their screenshots.
Screenshots that show how the app works are listed below (they are from Pixel 7 Pro API 34 emulator, however you can use other emulators or physical phones to run this app).
design, you can use your own image.
o Forothertextsandbuttonsonthisscreen:textsize:20sp.
o For responsive design, all the colours, margins and text sizes must be the same on
different devices (small phone, large phones, and tablets).
The user enters an event name (UC Open Day, for example) and taps the ADD ACTIVITY button. The
screen below will appear.
The action bar colour is navy (#000080), the back arrow, and the title is Add a New Activity and Edit It.
No background colour is used for this screen.
The event name (UC Open Day in this example) must appear on top of the screen. Text size: 24sp,
alignment: center, margin top: 16dp. margin left: 8dp, margin right: 8dp, layout_width: 0.
The subheading (Enter details for an activity): text size: 20sp, alignment: center, margin top: 8dp.
margin left: 8dp, margin right: 8dp, layout_width: 0.
Other input elements (Summary, Times, Dates, and Contact): text size: 20sp, alignment: left,
margin top: 8dp, margin left: 8dp, margin right: 8dp, layout_width: 0. Use hint attribute (not text)
The spinner element for Select a location dropdown list contains Select a location, Library, Refectory, Building 6, UC Hub, UC Lodge, and Current Location. The last location (Current Location) is the current user’s phone’s location.
The user enters title, summary, times, dates, and contact for an activity, selects a location then taps the SAVE ACTIVITY button. If all data are input and a location is selected, the app will display a screen for editing the newly added data.
The design for this editing screen is the same as that for adding a new activity, except the spinner element for Selection a location is changed to an edit text element with the same constraints, and the text on the subheading and the button are different.
The user makes changes on the input texts and taps the UPDATE ACTIVITY button. All the input data will be saved to Firebase Realtime Database and a new screen for capturing or loading an image for this activity appears. See the screenshots below.
If the user taps the CAPTURE button, the built-in camera will open and the user can take a photo. If the user taps the LOAD IMAGE button, the user can load an image from the phone gallery to this app. The user taps the DONE button, the photo or image will be uploaded to Firebase Cloud Storage with a unique image filename, and the app will open the home screen (note the input event name must remain on this screen as seen below). Use local database (SQLite) to save the event name. If the user changes the event name, the local database must update with this new event name.
Below are the screenshots for the data saved to the database and the image saved to the storage.
The user can click the ADD ACTIVITY button again to add more activities for the current event. Each activity must have a unique key on Firebase Realtime database. The screenshot above for the realtime database shows 3 activities for the UC Open Day event.
If the user taps the OPEN MAP button, the UC Bruce Campus map will appear:
The back arrow on the map screen is to go back to the home screen.
The UC Bruce campus map has a blue boundary and 4 pegman icons at 4 campus entries.
The map must be displayed at the greatest possible zoom level (the left or right margin of the blue
boundary is 10px for portrait mode, and the top or bottom margin of the blue boundary is 10px for landscape mode). This zoom level remains the same on different modes (portrait and landscape), and different phones, tablets or emulators used to run this app.
The red circle indicates the current user’s location (the last know location).
The blue markers are at the activities’ locations. The app must download all the activities’ details from the Firebase realtime database to locate these blue markers. There are 3 activities from the
database and therefore there are 3 blue markers on the map.
The red lines between the red circle and the blue markers are the routes that show the user how to
walk from the user’s current location to the activities’ locations.
If the user taps on the red circle, an info window will appear that shows You are here and the
current location. If the user taps on this info window, nothing is changed.
If the user taps on a blue marker, an info window will appear that shows the details of the activity (downloaded from the realtime database). If the user taps on this info window, all details will be listed on a new screen with the details downloaded from the realtime database and the image downloaded from the cloud storage.
If the user taps the BACK TO MAP button, the user is redirected to the Maps screen.
If the user taps on one of the 4 Pegman icons, a new screen with the street view at that campus
entry will appear. Note: no info window appears here.
The back arrow on the street view screen is to go back to the map screen.