Starting from:
$30

$27

Homework 9: Event Search Android App

1
Homework 9: Event Search Android App
1. Objectives
● Become familiar with Java, XML, Android Lifecycle and Android Studio for
Android app development.
● Build a good-looking Android app.
● Learn to use the Google Maps APIs and Android SDK.
● Get familiar with third party libraries like Picasso, Glide and Volley.
2. Background
2.1 Android Studio
Android Studio is the official Integrated Development Environment (IDE) for Android
application development, based on IntelliJ IDEA - a powerful Java IDE. On top of the
capabilities you expect from IntelliJ, Android Studio offers:
● Flexible Gradle - based build system.
● Build variants and multiple apk file generation.
● Code templates to help you build common app features.
● Rich layout editor with support for drag and drop theme editing.
● Lint tools to catch performance, usability, version compatibility, and other
problems.
● ProGuard and app-signing capabilities.
● Built-in support for Google Cloud Platform, making it easy to integrate Google
Cloud Messaging and App Engine.
More information about Android Studio can be found at:
http://developer.android.com/tools/studio/index.html
2.2. Android
Android is a mobile operating system initially developed by Android Inc., a firm
purchased by Google in 2005. Android is based upon a modified version of the Linux
kernel. As of Nov 2018, Android was the number 1 mobile OS, in unit sales, surpassing
iOS, while iOS was still the most profitable platform.
The Official Android home page is located at:
http://www.android.com/
The Official Android Developer home page is located at:
http://developer.android.com/
2
3. Prerequisites
This homework requires the use of the following components:
● Download and install Android Studio. Technically, you may use any other IDE
other than Android Studio such as Eclipse, but the latest SDKs may not be
supported with Eclipse. We will not be providing any help on problems arising
due to your choice of alternate IDEs.
● You must use the emulator. Everything should just work out of the box. Before
you start, you need to manually set the emulator’s longitude and latitude nearby
USC. An example is shown in Figure 1.
Figure 1: Location Setting of Emulator
4. High Level Design
This homework is a mobile app version of Homework 8. In this exercise, you will
develop an Android application, which allows users to search for the event ticket, look at
information about it, save some as favorites and post on Twitter about the event. You
3
should reuse the Node.js backend service you developed in Homework 8 and follow the
same API call requirements.
5. Implementation
5.1 Search Form
The initial interface is shown in Figure 2. There are two tabs in this interface: search and
favorite.
For the search tab, it has the following fields:
Figure 2: The Event Search App
4
● Keyword: An AutoCompleteTextView component allowing the user to enter the
keyword. It provides the autocomplete function as shown in Figure 3. Make sure
you use the same API as Homwork 8. See section 6.3.5 for hints.
● Category: A Spinner view allowing the user to choose a category. When the user
taps on this field, a dropdown list should display for selecting a category, as
shown in Figure 4. Make sure you include all the categories in homework 8.
● Distance: An EditText (type:number) view allowing the user to enter the distance
and the default value is 10.
A Spinner for the user to select unit: “miles” or “kilometers”.
● From: Two Radio Buttons to select “Current Location” or “Other”. You should get
the location from your emulator for users that choose “Here”. See section 6.2.
An EditText component allowing the user to enter a location for “Other”. The
EditText should only be enabled when the corresponding Radio Button is
checked.
● Search: A button to get the input information of each field, after validation. If the
validation is successful, then the events would be fetched from the server.
However, if the validation is unsuccessful, appropriate messages should be
displayed and no further requests would be made to the server.
● Clear: A button to clear the input fields and reset them to default values when
applicable. It should also remove any validation error messages.
Figure 3: Autocomplete for keyword Figure 4: Category Spinner
5
The validation for an empty keyword has to be implemented. If the user does not enter
anything in the EditText or just enters some empty spaces, when he/she presses the
Search button you need to display an appropriate message to indicate the error, as
shown in Figure 5. The same should be done when “From” location is not entered, and
that option in enabled using the radio button as shown in Figure 6.
Figure 5: Validation error messages Figure 6: Validation error messages
5.2 Search Results
When the user taps the SEARCH button and all validations pass, your app loads the
search results page. Before you get the data from your backend server, a progress bar
should display on the screen. After you get the data from your backend, hide the
ProgressBar and display the result page as a list using RecyclerView or ListView, as
shown in Figure 7. The RecyclerView or ListView must be scrollable. They also provide
a ‘back button’ to navigate back the search/favorite interface.
Each of the item in the list should have the following:
6
● Category image (See the mapping between segment and icons on section 6. 1)
● Name of the event
● Name of the venue
● Date and Time of the event
● A heart-shaped "Favorite" button
See homework 8 for more details about these fields.
Figure 7: ProgressBar while fetching results Figure 8: List of search results
Tapping the favorite button (the heart) would add the corresponding event into the
favorites list, and a message should be displayed at the bottom of the app using a
Toast, as shown in Figure 9. Tapping the button again would remove that event from
the favorites list, and a similar message should also be displayed to indicate the event
has been removed from the favorites list, as shown in Figure 10.
7
Figure 9: Message for adding favorites Figure 10: Message for removing favorites
5.3 Event Details
Tapping on an item in the result list should show details of that event with four tabs:
Event, Artists, Venue and Upcoming. Note that the ProgressBar should be shown on
each tab before you are ready to display the corresponding tab.
The tabs should be attached to the ActionBar and a ViewPager should be used to host
all the tabs, as shown in Figure 11. Users should be able to switch between tabs by
both swiping and tapping on a tab. The ActionBar should also include the following
elements:
● A back button, which navigates back to the search results list.
● A title, which is the name of the event.
● A favorite button to add/remove the event to/from the favorite list, and display a
Toast at the bottom of the screen. See video for more detail.
● A twitter button, to share the event details on Twitter. Once the button is
tapped, a web page should open to allow the user to share the event information
on Twitter, as shown in Figure 12. This should work the same as homework 8.
8
Figure 11: Event details Figure 12: Share Event on Twitter
5.3.1 Event Tab
The fields in Figure 11 should be shown in the Event tab. See homework 8 for more
details about each field. In homework 9, the seat map will be the URL of the image and
when user click on this URL, it will go to the browser to show the seat map.
5.3.2 Artist(s) Tab
Same as in homework 8. But for multiple artists in homework #9, you could only show
the first two artist’s music profiles (if applicable) and corresponding photos (at most 8
photos for each artist/team). See Figure 13, Figure 14 and Figure 15.
You could use Volley Network ImageView, Picasso or Glide to load the image. See
more on section 6.3.
9
Figure 13: Artists Tab with Music Artist
Figure 14: First Team Photos Figure 15: Second Team Photos
10
5.3.3 Venue Tab
As shown in Figure 16 and 17, there are two elements in this tab:
● Details of the venue table: Same as homework 8.
● Map: Same as homework 8, you should render a google map with a maker
centered in the map of the venue location.
The maps should be rendered using the Google Maps SDK for Android.
https://developers.google.com/maps/documentation/android-api/
This view should be scrollable since the details of the venue table may be too long.
Figure 16: Venue Info Figure 17: Venue map
5.3.4 Upcoming Tab
This tab displays the upcoming events of the venue, same as homework 8. Please note,
in homework #9, you need to get at most 5 (first 5) upcoming events from your
NodeJS server.
11
As shown in Figure 18 and 19, you should use two Spinners to switch sort base and
also its order. One Spinner allow users to sort the upcoming events by default order,
event name, time, artist and type. Another provides the sort in ascending or descending
order. When “Default” is selected, the Ascending or Descending should be disabled.
The upcoming events are shown in a list using a RecyclerView. Note that each of the
cells can be tapped and then a web page should be opened and navigates to the
tapped upcoming events, see video for more detail and Figure 20.
In the case of no upcoming data, show "no records" in the center of the screen, as
shown in Figure 21.
Figure 18: Sort by spinner Figure 19: Order Spinner
12
Figure 20: Webpage for the Songkick event Figure 21: No Record
5.4 Favorite list
Use Tabs with a ViewPager on the main screen to switch between the search page and
the favorite page. The favorite events should be displayed in a list using a
RecyclerView/ListView. Each of the items in the list includes an event catalog image,
event name, venue name and time, as shown in Figure 22. If there are no favorite
events, "No Favorites" should be displayed at the center of the screen, as shown in
Figure 23.
Like in search results, pressing the favorite icon here should remove the event from the
favorites list. See video for more detail.
13
Figure 22: Favorite list Figure 23: No favorites
5.5 Error handling
If no events are found given a keyword, a “no results” should be displayed, as shown in
Figure 24.
If for any reason an error occurs (no network, API failure, cannot get location etc.), an
appropriate error messages should be displayed at the bottom of screen using a Toast.
14
Figure 24: No search results
5.6 Additional
For things not specified in the document, grading guideline, or the video, you can make
your own decisions. But keep in mind about the following points:
● Always display a proper message and don’t crash if an error happens.
● Always display a loading message if the data is loading.
● You can only make HTTP requests to your backend Node.js on AWS/GAE/Azure
and use the Google Map SDK for Android.
● All HTTP requests should be asynchronous and should not block the main UI
thread. You can use third party libraries like Volley to achieve this in a simple
manner.
15
6. Implementation Hints
6.1 Images
The images needed for the homework as provided as vector drawables and are
available here:
Favorites
http://csci571.com/hw/hw9/images/android/heart_fill_red.xml
http://csci571.com/hw/hw9/images/android/heart_fill_white.xml
http://csci571.com/hw/hw9/images/android/heart_outline_black.xml
http://csci571.com/hw/hw9/images/android/heart_outline_white.xml
Categories Icons:
Music: http://csci571.com/hw/hw9/images/android/music_icon.png
Sports: http://csci571.com/hw/hw9/images/android/sport_icon.png
Arts & Theatre: http://csci571.com/hw/hw9/images/android/art_icon.png
Miscellaneous: http://csci571.com/hw/hw9/images/android/miscellaneous_icon.png
Film: http://csci571.com/hw/hw9/images/android/film_icon.png
Tab Icons
Event Tab: http://csci571.com/hw/hw9/images/android/info_outline.xml
Artists Tab: http://csci571.com/hw/hw9/images/android/artist.xml
Venue Tab: http://csci571.com/hw/hw9/images/android/venue.xml
Upcoming Tab: http://csci571.com/hw/hw9/images/android/upcoming.xml
Twitter : http://csci571.com/hw/hw9/images/android/twitter_ic.png
6.2 Getting current location
For your location fetching code to work, you must request the permission from the user.
You can read more about requesting permissions here:
https://developer.android.com/training/permissions/requesting.html
16
Figure 22: Requesting location permission
You may need to mock the location in your emulator. This can be done from the
emulator settings.
6.3 Third party libraries
Almost all functionalities of the app can be implemented without using third party
libraries, but sometimes using them can make your implementation much easier and
quicker. Some libraries you may have to use are:
6.3.1 Google Play services
You will need this for various features like getting the current location and using Google
Maps in your app.
You can learn about setting it up here:
https://developers.google.com/android/guides/setup
17
6.3.2 Volley HTTP requests
Volley can be helpful with asynchronously http request to load data. You can also use
Volley network ImageView to load photos in artist tab. You can learn more about them
here:
https://developer.android.com/training/volley/index.html
6.3.3 Picasso
Picasso is a powerful image downloading and caching library for Android.
http://square.github.io/picasso/
If you decide to use RecycleView to display the photos with Picasso Please use version
2.5.2 since latest version does not support RecycleView well.
https://github.com/codepath/android_guides/wiki/Displaying-Images-with-the-PicassoLibrary
6.3.4 Glide
Glide is also powerful image downloading and caching library for Android. It is similar to
Picasso. You can also use Glide to load photos in artist tab.
https://bumptech.github.io/glide/
6.3.5 Working with the AutoCompleteTextView
Working with the AutoCompleteTextView to show the suggestions might be a little
challenging. This tutorial goes over how it is done so that you get an idea of how to go
about it.
https://www.truiton.com/2018/06/android-autocompletetextview-suggestions-fromwebservice-call/
7. What to Upload to GiHub Classroom
You should also ZIP all your source code (the java/ and res/ directories excluding the
vector drawables that we provide to you) and submit the resulting ZIP file by the end of
the demo day.
Unlike other exercises, you will have to demo your submission in person during a
special grading session. Details and logistics for the demo will be provided in class, on
the Announcement page and on Piazza. Demo is done an a laptop/
notebook/MacBook using the emulator, and not a physical mobile device.
18
**IMPORTANT**
All videos are part of the homework description. All discussions and explanations on
Piazza related to this homework are part of the homework description and will be
accounted into grading. So please review all Piazza threads before finishing the
assignment.

More products