Homework 9: Place Search Android App
1. Objectives
● Become familiar with Java, XML and Android Studio for Android ap
development.
● Build a good-loking Android ap.
● Learn to use the Gogle Places APIs and Android SDK.
● Get familiar with third party libraries like Picasso and Voley.
2. Background
2.1 Android Studio
Android Studio is the oficial Integrated Development Environment (IDE) for Android
aplication development, based on InteliJ IDEA - a powerful Java IDE. On top of the
capabilities you expect from InteliJ, Android Studio ofers:
● Flexible Gradle - based build system.
● Build variants and multiple apk file generation.
● Code templates to help you build comon ap features.
● Rich layout editor with suport for drag and drop theme editing.
● Lint tols to catch performance, usability, version compatibility, and other
problems.
● ProGuard and ap-signing capabilities.
● Built-in suport for Gogle Cloud Platform, making it easy to integrate Gogle
Cloud Messaging and Ap Engine.
More information about Android Studio can be found at:
htp:/developer.android.com/tols/studio/index.html
2.2. Android
Android is a mobile operating system initialy developed by Android Inc., a firm
purchased by Gogle in 205. Android is based upon a modified version of the Linux
kernel. As of December 2013, Android was the number 1 mobile OS, in unit sales,
surpassing iOS, while iOS was stil the most profitable platform.
The Oficial Android home page is located at:
htp:/ww.android.com/
The Oficial Android Developer home page is located at:
htp:/developer.android.com/
2.3 Amazon Web Services (AWS)
AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon
Elastic Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity
in the cloud, and AWS Elastic Beanstalk, an even easier way to quickly deploy and
manage aplications in the AWS cloud. You simply upload your aplication, and Elastic
Beanstalk automaticaly handles the deployment details of capacity provisioning, load
balancing, auto-scaling, and aplication health monitoring. Elastic Beanstalk is built
using familiar software stacks such as the Apache HTP Server, PHP, and Python,
Passenger for Ruby, IS 7.5 for .NET, and Apache Tomcat for Java.
The Amazon Web Services homepage is available at:
htp:/aws.amazon.com/
2.4 Gogle Ap Engine (GAE)
Gogle Ap Engine aplications are easy to create, easy to maintain, and easy to scale
as your trafic and data storage neds change. With Ap Engine, there are no servers to
maintain. You simply upload your aplication and it’s ready to go. Ap Engine
aplications automaticaly scale based on incoming trafic. Load balancing,
microservices, authorization, SQL and NoSQL databases, memcache, trafic spliting,
loging, search, versioning, rol out and rol backs, and security scaning are al
suported natively and are highly customizable.
To learn more about GAE suport for PHP visit the page:
htps:/cloud.gogle.com/apengine/docs/php/
To learn more about GAE suport for Node.js visit this page:
htps:/cloud.gogle.com/apengine/docs/flexible/Node.js/
3. Prerequisites
This homework requires the use of the folowing components:
● Download and instal Android Studio. Technicaly, you may use any other IDE
other than Android Studio such as Eclipse, but the latest SDKs may not be
suported with Eclipse. We wil not be providing any help on problems arising
due to your choice of alternate IDEs.
Recent versions of Android Studio come bundled with OpenJDK and you no
longer ned to set up your JDK separately.
● You wil ned to enable “Developer Options” and “USB debuging” if you plan to
use an actual device for debuging. It is fairly simple to do so and is ilustrated in
this Stack Overflow post:
htps:/stackoverflow.com/questions/16707137/how-to-find-and-turn-on-usb-
debugging-mode-on-nexus-4
Such setup is not neded if you plan to use the emulator. Everything should just
work out of the box.
4. High Level Design
This homework is a mobile ap version of Homework 8. In this exercise, you wil
develop an Android aplication, which alows users to search for a place, lok at
information about it, save some as favorites and post on Twiter about the place. You
should reuse the backend service (PHP/Node.js) you developed in HW8 and folow the
same API cal requirements.
Figure 1: The Place Search Ap
5. Implementation
5.1 Search Form.
You must replicate the Search form. shown in Figure 1.
The interface consists of the folowing:
● Keyword: An EditText view alowing the user to enter the keyword.
● Category: A Spiner view alowing the user to chose a category. When the user
taps on this field, a dropdown list should display for selecting a category, as
shown in Figure 2. Make sure you include al the categories in homework 8.
● Distance: An EditText view alowing the user to enter the distance (in miles).
● From: An AutoCompleteTextView component alowing the user to enter a
location. When the user enters text into this field, autocomplete sugestions
should be presented as shown in Figure 3. The AutoCompleteTextView should
only be enabled when the coresponding RadioButon is checked.
● Search: A button to get the input information of each field, after validation. If the
validation is successful, then the places would be fetched from the server.
However, if the validation is unsuccessful, apropriate messages should be
displayed and no further requests would be made to the server.
● Clear: A buton to clear the input fields and reset them to default values when
aplicable. It should also remove any validation eror messages.
The validation for 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 buton you ned to display an apropriate message to indicate the eror, as
shown in Figure 4. The same should be done when “From” location is not entered, and
that option in enabled using the radio buton as shown in Figure 5.
5.2 Search Results
When the user taps the SEARCH buton, your ap should display a ProgressDialog
before it is ready to show the results page, as shown in Figure 6. After you get the data
from your backend, hide the ProgressDialog and display the result page as a list using
RecyclerView, as shown in Figure 7.
Each of the item in the list should have the folowing:
● Category image
● Name of the place
● Adress of the place
● A heart-shaped "Favorite" buton
Se homework 8 for more details about these fields.
Taping the favorite button (the heart) would ad the coresponding place into the
favorites list, and a message should be displayed at the botom of the ap using a
Toast, as shown in Figure 8. Taping the buton again would remove that place from the
favorites list, and a similar message should also be displayed to indicate the place has
ben removed from the favorites list.
For the pagination, there should be two butons “PREVIOUS” and “NEXT” below the
results table, as shown in Figure 7. If it is the first time a page is being fetched, you
must use a ProgressDialog while the next page is being fetched, as shown in Figure 9.
Note that the previous or next buton(s) should be disabled if there’s no previous page
or no next page.
5.3 Place Details
Taping on an item in the RecyclerView list in the results table should show details of
that place with four tabs: Info, Photos, Map and Reviews. Note that the a
ProgressDialog should be shown before you are ready to display al the place details.
The tabs should be atached to the ActionBar and a ViewPager should be used to host
al the tabs, as shown in Figure 10. The users should be able to switch betwen tabs by
both swiping and taping on a tab. The ActionBar should also include the folowing
elements:
● A back buton, which navigates back to the search results list.
● A title, which is the name of the place.
● A share button (), to share the place details on Twiter. Once the buton is
taped, a web page should open to alow the user to share the place information
on Twiter, as shown in Figure 1. This should work the same as homework 8.
● A favorite buton to ad/remove the place to/from the favorite list, and display a
Toast at the botom of the scren.
Figure 10: Place details and the Info tab
Figure 1: Share place on Twiter
5.3.1 Info Tab
The fields in Figure 10 should be shown in the Info tab: Adress, Phone Number, Price
Level, Rating, Gogle Page and Website. Se homework 8 for more details about each
field.
5.3.2 Photos Tab
You ned to show the photos of the place as shown in Figure 12. The Places API for
Android documentation shows how one can fetch the photos of the place.
htps:/developers.gogle.com/places/android-api/photos
Figure 12: Photos Tab
5.3.3 Map Tab
As shown in Figure 13, there are thre elements in this tab:
● From: an EditText view, when text is entered, autocomplete sugestions should
be shown.
● Travel mode: a Spiner to pick the travel mode.
● Map: the maps should be rendered using the Gogle Maps SDK for Android.
htps:/developers.gogle.com/aps/documentation/android-api/
Initialy, there’s a marker on the map indicating the location of the place. Once the user
taps the From field and selects a place entry from the auto-complete sugestions, the
ap fils the From field with the name of the place selected and displays a path from the
start location to the destination, as shown in Figure 14.
Switching among diferent travel modes should update the paths on the map, as shown
in Figure 15.
Figure 13: Map tab
Figure 14: Path shown on the map
Figure 15: Switching travel modes
Figure 16: Reviews tab
5.3.4 Reviews Tab
This tab displays the Gogle reviews and Yelp reviews of the place, same as homework
8. As shown in Figure 16, you should use a Spiner to switch betwen Gogle reviews
and Yelp reviews. Another Spiner alow users to sort the reviews by default order,
rating and review date in ascending or descending order.
The reviews are shown in a list using a RecyclerView. Note that each of the cels can be
taped and then a web page should be opened and navigates to the taped review, as
shown in Figure 17.
In the case of no reviews data, show "no reviews" in the center of the scren, as shown
in Figure 18.
5.4 Favorites list
Use Tabs with a ViewPager on the main scren to switch betwen the search page and
the favorites page. The favorite places should be displayed in a list using a
RecyclerView. Each of the items in the list includes a places catalog image, place name
and adress, as shown in Figure 19. If there are no favorite places, "No Favorites"
should be displayed at the center of the scren, as shown in Figure 20.
Like in search results, pressing the favorite icon here should remove the place from the
favorites list.
5.5 Eror handling
If no places are found given a keyword, a “no results” should be displayed, as shown in
Figure 21.
If for any reason an eror occurs (no network, API failure, canot get location etc.), an
apropriate eror messages should be displayed at the botom of scren using a Toast.
5.6 Aditional
For things not specified in the document, grading guideline, or the video, you can make
your own decisions. But keep in mind about the folowing points:
● Always display a proper message and don’t crash if an eror hapens.
● You can only make HTP requests to your backend (PHP/Node.js) on AWS/GAE
or use the Gogle Places API for Android or Gogle Map SDK for Android.
● Al HTP requests should be asynchronous and should not block the main UI
thread. You can use third party libraries like Voley to achieve this in a simple
maner.
6. Implementation Hints
6.1 Images
The images neded for the homework as provided as vector drawables and are
available here:
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/heart_fil_red.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/heart_fil_white.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/heart_outline_black.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/heart_outline_white.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/info_outline.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/maps.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/photos.xml
http:/cs-server.usc.edu:45678/hw/hw9/images/android/review.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/search.xml
htp:/cs-server.usc.edu:45678/hw/hw9/images/android/share.xml
6.2 Getting curent location
For your location fetching code to work, you must request the permission from the user.
You can read more about requesting permissions here:
htps:/developer.android.com/training/permissions/requesting.html
For those using the emulator, you may ned to mock the location. This can be done
from the emulator setings.
6.3 Third party libraries
Almost al functionalities of the ap 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 Gogle Play services
You wil ned this for various features like geting the curent location and using Gogle
Maps in your ap.
You can learn about seting it up here:
htps:/developers.gogle.com/android/guides/setup
6.3.2 HTP requests
Voley and/or Picasso can be helpful with asynchronously loading data and images into
ImageViews. You can learn more about them here:
htps:/developer.android.com/training/voley/index.html
htp:/square.github.io/picasso/
6.3.3 Working with the AutoCompleteTextView
Working with the AutoCompleteTextView to show the places sugestions might be a
litle chalenging. This tutorial goes over how it is done so that you get an idea of how to
go about it.
htp:/ww.zoftino.com/gogle-places-auto-complete-android
7. What to Submit
You should also ZIP al 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 wil have to demo your submission in person during a
special grading session. Details and logistics for the demo wil be provided in class, on
the Anouncement page and on Piazza.
**IMPORTANT**
Al videos are part of the homework description. Al discussions and explanations on
Piazza related to this homework are part of the homework description and wil be
accounted into grading. So please review al Piazza threads before finishing the
assignment.