Description
1. Objectives
Ø Become familiar with Android Studio, Android App development for Android.
Ø Build a good-looking Android app using the Android SDK.
Ø Build mobile user experience for Facebook Search using the Facebook Graph API
Ø Add social networking features using the Facebook SDK for Android
2. Background
2.1 Android Studio
Android Studio is the official IDE for Android application development, based on IntelliJ IDEA
(https://www.jetbrains.com/idea/). 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
The home page of the Android Studio is located at:
https://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 December
2013, Android was the number 1 mobile OS, in unit sales, surpassing iOS, while iOS was still the
most profitable platform.
The Android operating system software stack consists of Java applications running on a Java
based object oriented application framework on top of Java core libraries running on the Dalvik
virtual machine featuring JIT compilation.
The Official Android home page is located at:
https://www.android.com/
2
The Official Android Developer home page is located at:
https://developer.android.com/index.html
2.4 Facebook Graph API
The Graph API is the primary way to get data out of, and put date into Facebook’s platform. It’s
a lowlevel HTTP-based API that you can use to programmatically query data, post new stories,
manage ads, upload photos, and perform a variety of other tasks that an app might implement.
To learn more about the Facebook Graph API visit:
https://developers.facebook.com/docs/graph-api
2.5 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 applications in the
AWS cloud. You simply upload your application, and Elastic Beanstalk automatically handles the
deployment details of capacity provisioning, load balancing, auto-scaling, and application health
monitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTP
Server, PHP, and Python, Passenger for Ruby, IIS 7.5 for .NET, and Apache Tomcat for Java.
The Amazon Web Services homepage is available at: https://aws.amazon.com/
2.6 Google App Engine (GAE)
Google App Engine applications are easy to create, easy to maintain, and easy to scale as your
traffic and data storage needs change. With App Engine, there are no servers to maintain. You
simply upload your application and it’s ready to go. App Engine applications automatically scale
based on incoming traffic. Load balancing, micro services, authorization, SQL and noSQL
databases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, and
security scanning are all supported natively and are highly customizable.
To learn more about GAE support for PHP visit the page:
https://cloud.google.com/appengine/docs/php/
3. Prerequisites
This homework requires the use of the following components:
A. Download and install Android Studio. You may use any other IDE other than Android
Studio such as Eclipse, but you will be on your own if problems spring up.
B. First you need to install Java on your local machine. You can download JDK 8 from –
https://www.oracle.com/technetwork/java/javase/downloads/index.html. For
3
windows users, after installing the JDK, you need to add environment variables for
JDK.
• Properties – Advanced – Environment Variables – System variables – New
Variable
Name: JAVA_HOME, Variable Value: • Typically, this full path looks something like C:\Program Files\Java\jdk1.8.0.
Then modify the PATH variable as follows on Microsoft Windows:
C:\WINDOWS\system32;C:\WINDOWS;C:\Program Files\Java\jdk1.8.0\bin
This path may vary depending on your installation.
• Note: The PATH environment variable is a series of directories separated by
semicolons (;) and is not case-sensitive. Microsoft Windows looks for programs
in the PATH directories in order, from left to right. You should only have one bin
directory for a JDK in the path at a time. Those following the first instance are
ignored. If you are not sure where to add the path, add it to the right of the
value of the PATH variable. The new path takes effect in each new command
window you open after setting the PATH variable.
• Reboot your computer and type “java –version” in the terminal to see
whether your JDK has been installed correctly.
Set up the Android Studio environment so that you can run any sample android app on
your phone/tablet/virtual device from it. Then you can start with this homework app.
You will need to enable “Developer Options” and “USB debugging” if you are using an
actual device. There are endless resources a simple search away on how to setup your
Android Studio.
4. High Level Design
In this exercise, you will develop an Android Mobile application, which will have following
functionality:
There will be a slide out-menu which will provide access to the different screens such as Home,
Favorites and About Me. The content displayed in each of these sections will be similar to
Homework 8 but we will go into details later on.
The initial screen would default to showing the home screen as shown below.
4
Figure 1. Initial Screen
5
The slide-out menu should open upon tapping the hamburger icon. Please refer the below
screenshot for the menu design. The menu would close on tapping on the menu button.
Figure 2. Slide-out Menu
5. Implementation
5.1 Home screen
You must replicate the Home Screen, as shown in Figure 1.
The interface consists of the following:
• A ‘TextView’ to allow the user to enter the search query.
• 2 ‘Button’ for clearing and submitting the query.
• A component to show the navigation bar that has the hamburger menu icon to
show the slide-out menu.
The ‘Search’ button should submit the search query and move to the next screen
showing the search results. Please note that it should display the message in case of an
empty text field and avoid going to the next screen.
6
The ‘Clear’ button should clear the text field’s content.
The hamburger menu icon should show the slide-out menu, which should be dismissed
upon clicking the menu icon again.
5.2 Search Results
On submitting the query, the screen should move to display the results in 5 different
tabs as shown below:
Figure 3: Search Results
The search results would display the results in 5 tabs for the following types, like in
Homework 8:
• User
• Page
• Event
• Place
• Group
Please note that the search result would show the user tab, by default.
7
5.2.1 User Tab
The user tab would display the search result for the type – ‘user’. The screen consists of the
following:
1. ‘ListView’ to show the users corresponding to the search query.
2. 2 ‘Button’ for pagination
3. The navigation bar to display back button to go back to home screen
Each row in the table would contain the following:
1. Icon – An ‘ImageView’ component for the icon of the user
2. Name – A ‘TextView’ component for the name of the user
3. Favorite – ‘ImageView’ component indicating whether the user has been marked
as favorite
4. Detail Disclosure – Use the ‘ImageView’ component to handle click action for user’s
detail described in the user detail screen next.
Pagination
There are 2 buttons at the bottom of the screen to navigate among the search results. The
‘Previous’ button and ‘Next’ button should only be enabled, if applicable.
Within the screen, you need to display 10 rows to show the first 10 users. The user can then
use the next and previous button to view more users.
5.2.2 Pages Tab
The page tab would display the search result for the type – ‘page’. The screen consists of the
following:
1. ‘ListView’ to show the pages corresponding to the search query.
2. 2 ‘Button’ for pagination
3. The navigation bar to display back button to go back to home screen
Each row in the table would contain the following:
1. Icon – An ‘ImageView’ component for the icon of the page
2. Name – A ‘TextView’ component for the name of the page
3. Favorite – ‘ImageView’ component indicating whether the page has been marked
as favorite
4. Detail Disclosure – Use the ‘ImageView’ component to handle click action for
page’s detail described in the page detail screen next.
Pagination
There are 2 buttons at the bottom of the screen to navigate among the search results. The
‘Previous’ button and ‘Next’ button should only be enabled, if applicable.
Within the screen, you need to display 10 rows to show the first 10 pages. The page can
then use the next and previous button to view more pages.
8
5.2.3 Events Tab
The event tab would display the search result for the type – ‘event’. The screen consists of
the following:
1. ‘ListView’ to show the events corresponding to the search query.
2. 2 ‘Button’ for pagination
3. The navigation bar to display back button to go back to home screen
Each row in the table would contain the following:
1. Icon – An ‘ImageView’ component for the icon of the event
2. Name – A ‘TextView’ component for the name of the event
3. Favorite – ‘ImageView’ component indicating whether the event has been marked
as favorite
4. Detail Disclosure – Use the ‘ImageView’ component to handle click action for
event’s detail described in the event detail screen next.
Pagination
There are 2 buttons at the bottom of the screen to navigate among the search results. The
‘Previous’ button and ‘Next’ button should only be enabled, if applicable.
Within the screen, you need to display 10 rows to show the first 10 events. The event can
then use the next and previous button to view more events.
5.2.4 Place Tab
The place tab would display the search result for the type – ‘place’. The screen consists of
the following:
1. ‘ListView’ to show the places corresponding to the search query.
2. 2 ‘Button’ for pagination
3. The navigation bar to display back button to go back to home screen
Each row in the table would contain the following:
1. Icon – An ‘ImageView’ component for the icon of the place
2. Name – A ‘TextView’ component for the name of the place
3. Favorite – ‘ImageView’ component indicating whether the place has been marked
as favorite
4. Detail Disclosure – Use the ‘ImageView’ component to handle click action for
place’s detail described in the place detail screen next.
Please note that you get the user’s current location to passed to the API for the parameter
center.
Pagination
There are 2 buttons at the bottom of the screen to navigate among the search results. The
‘Previous’ button and ‘Next’ button should only be enabled, if applicable.
9
Within the screen, you need to display 10 rows to show the first 10 places. The place can
then use the next and previous button to view more places.
5.2.5 Group Tab
The page tab would display the search result for the type – ‘page’. The screen consists of the
following:
1. ‘ListView’ to show the pages corresponding to the search query.
2. 2 ‘Button’ for pagination
3. The navigation bar to display back button to go back to home screen
Each row in the table would contain the following:
1. Icon – An ‘ImageView’ component for the icon of the page
2. Name – A ‘TextView’ component for the name of the page
3. Favorite – ‘ImageView’ component indicating whether the page has been marked
as favorite
4. Detail Disclosure – Use the ‘ImageView’ component to handle click action for
page’s detail described in the page detail screen next.
Pagination
There are 2 buttons at the bottom of the screen to navigate among the search results. The
‘Previous’ button and ‘Next’ button should only be enabled, if applicable.
Within the screen, you need to display 10 rows to show the first 10 pages. The page can
then use the next and previous button to view more pages.
5.3.1 User Detail
Tapping any of the table row, should move to the user details to show the user’s albums and
posts, if any. The user detail screen contains two tabs for ‘Albums’ and ‘Posts’. By default,
the albums tab should be shown.
Please consider the following screenshot for reference.
10
Album data available Album data unavailable
The albums tab should display the 5 albums, if available within the ‘ExpandableListView’
component. Also note that the cell should be collapsed by default. However, if no album
data is found, just show a ‘TextView’ component showing an appropriate message.
The user detail screen also contains the option menu option in the navigation bar. It
would allow to mark the user as a favorite as well as share the user on Facebook. It
would bring up the menu to show the two options – Favorite and Share. Please refer the
below screenshot for reference.
Please note that the text can be ‘Add to favorites’ or ‘Remove from favorite’ depending
whether the user has already been added to favorite or not. Also note that marking the
user as a favorite or removing the user from favorite should display an appropriate
message.
11
Thereon, the user can also share the user on Facebook. Please refer the Facebook Share
section for reference.
On tapping an any of the 5 albums, the row should expand to show the 2 images within
the concerned albums, as shown below. Furthermore, note that the upon tapping any
other albums, the previously expanded album should collapse, if any. Also, upon
tapping the expanded cell, the album should again collapse.
12
The posts tab should display the 5 posts, if available, within the ‘ListView’ component.
Please note that each row of the table, should display the user’s icon, the content of the
post along with the formatted date.
13
Post data available Post data unavailable
Please note that the back button should take you back to the search results screen on
the ‘User’ tab.
5.3.2 Page Detail
Tapping any of the table row, should move to the page details to show the page’s
albums and posts, if any. The page detail screen contains two tabs for ‘Albums’ and
‘Posts’. By default, the albums tab should be shown.
Please consider the following screenshot for reference.
14
Album data available Album data unavailable
The albums tab should display the 5 albums, if available within the ‘ExpandableListView’
component. Also note that the cell should be collapsed by default. However, if no album
data is found, just show a ‘TextView’ component showing an appropriate message.
The page detail screen also contains the option menu option in the navigation bar. It
would allow to mark the page as a favorite as well as share the page on Facebook. It
would bring up the menu to show the two options – Favorite and Share. Please refer the
below screenshot for reference.
Please note that the text can be ‘Add to favorites’ or ‘Remove from favorite’ depending
whether the page has already been added to favorite or not. Also note that marking the
page as a favorite or removing the page from favorite should display an appropriate
message.
15
Thereon, the page can also share the page on Facebook. Please refer the Facebook
Share section for reference.
On tapping an any of the 5 albums, the row should expand to show the 2 images within
the concerned albums, as shown below. Furthermore, note that the upon tapping any
other albums, the previously expanded album should collapse, if any. Also, upon
tapping the expanded cell, the album should again collapse.
16
The posts tab should display the 5 posts, if available, within the ‘ListView’ component.
Please note that each row of the table, should display the page’s icon, the content of
the post along with the formatted date.
17
Post data available Post data unavailable
Please note that the back button should take you back to the search results screen on
the ‘Pages’ tab.
5.3.3 Event Detail
Tapping any of the table row, should move to the event details to show the event’s
albums and posts, if any. The event detail screen contains two tabs for ‘Albums’ and
‘Posts’. By default, the albums tab should be shown.
Please consider the following screenshot for reference.
18
Album data available Album data unavailable
The albums tab should display the 5 albums, if available within the ‘ExpandableListView’
component. Also note that the cell should be collapsed by default. However, if no album
data is found, just show a ‘TextView’ component showing an appropriate message.
The event detail screen also contains the option menu option in the navigation bar. It
would allow to mark the event as a favorite as well as share the event on Facebook. It
would bring up the menu to show the two options – Favorite and Share. Please refer the
below screenshot for reference.
Please note that the text can be ‘Add to favorites’ or ‘Remove from favorite’ depending
whether the event has already been added to favorite or not. Also note that marking
the event as a favorite or removing the event from favorite should display an
appropriate message.
19
Thereon, the event can also share the event on Facebook. Please refer the Facebook
Share section for reference.
On tapping an any of the 5 albums, the row should expand to show the 2 images within
the concerned albums, as shown below. Furthermore, note that the upon tapping any
other albums, the previously expanded album should collapse, if any. Also, upon
tapping the expanded cell, the album should again collapse.
20
The posts tab should display the 5 posts, if available, within the ‘ListView’ component.
Please note that each row of the table, should display the event’s icon, the content of
the post along with the formatted date.
21
Post data available Post data unavailable
Please note that the back button should take you back to the search results screen on
the ‘Events’ tab.
5.3.4 Page Detail
Tapping any of the table row, should move to the page details to show the page’s
albums and posts, if any. The page detail screen contains two tabs for ‘Albums’ and
‘Posts’. By default, the albums tab should be shown.
Please consider the following screenshot for reference.
22
Album data available Album data unavailable
The albums tab should display the 5 albums, if available within the ‘ExpandableListView’
component. Also note that the cell should be collapsed by default. However, if no album
data is found, just show a ‘TextView’ component showing an appropriate message.
The page detail screen also contains the option menu option in the navigation bar. It
would allow to mark the page as a favorite as well as share the page on Facebook. It
would bring up the menu to show the two options – Favorite and Share. Please refer the
below screenshot for reference.
Please note that the text can be ‘Add to favorites’ or ‘Remove from favorite’ depending
whether the page has already been added to favorite or not. Also note that marking the
page as a favorite or removing the page from favorite should display an appropriate
message.
23
Thereon, the page can also share the page on Facebook. Please refer the Facebook
Share section for reference.
On tapping an any of the 5 albums, the row should expand to show the 2 images within
the concerned albums, as shown below. Furthermore, note that the upon tapping any
other albums, the previously expanded album should collapse, if any. Also, upon
tapping the expanded cell, the album should again collapse.
24
The posts tab should display the 5 posts, if available, within the ‘ListView’ component.
Please note that each row of the table, should display the page’s icon, the content of
the post along with the formatted date.
25
Post data available Post data unavailable
Please note that the back button should take you back to the search results screen on
the ‘Events’ tab.
5.3.5 Group Detail
Tapping any of the table row, should move to the group details to show the group’s
albums and posts, if any. The group detail screen contains two tabs for ‘Albums’ and
‘Posts’. By default, the albums tab should be shown.
Please consider the following screenshot for reference.
26
Album data available Album data unavailable
The albums tab should display the 5 albums, if available within the ‘ExpandableListView’
component. Also note that the cell should be collapsed by default. However, if no album
data is found, just show a ‘TextView’ component showing an appropriate message.
The group detail screen also contains the option menu option in the navigation bar. It
would allow to mark the group as a favorite as well as share the group on Facebook. It
would bring up the menu to show the two options – Favorite and Share. Please refer the
below screenshot for reference.
Please note that the text can be ‘Add to favorites’ or ‘Remove from favorite’ depending
whether the group has already been added to favorite or not. Also note that marking
the group as a favorite or removing the group from favorite should display an
appropriate message.
27
Thereon, the group can also share the group on Facebook. Please refer the Facebook
Share section for reference.
On tapping an any of the 5 albums, the row should expand to show the 2 images within
the concerned albums, as shown below. Furthermore, note that the upon tapping any
other albums, the previously expanded album should collapse, if any. Also, upon
tapping the expanded cell, the album should again collapse.
28
The posts tab should display the 5 posts, if available, within the ‘ListView’ component.
Please note that each row of the table, should display the group’s icon, the content of
the post along with the formatted date.
29
Post data available Post data unavailable
Please note that the back button should take you back to the search results screen on
the ‘Events’ tab.
5.4 Facebook Share
The user can share any of the searched results (user/page/event/place/group) on
Facebook using the option menu displayed in the detail screen. Please refer the below
screenshot for reference.
Please note the post needs to display the icon and name of the result that is being
shared.
30
5.6 Favorite
The favorite screen would display all the favorited users/pages/events/places/group
that have been marked as favorite. Please refer the below screenshot as reference.
31
Favorite pages
The design of the individual tabs remains exactly the same as the earlier search result’s
tab. The only difference being these display the favorited results instead of the search
results. The order of the entry within a table would be the order the search results were
marked as favorites.
Also note that the selection of any row would also lead to the corresponding details
screen. Please ensure that the table data is kept in sync with the favorites, especially
when any of the result has been removed from the favorites.
5.7 About
You will also have to implement an additional menu item in the slide out menu that links
to a screen which displays information about you.
The about page should look as below:
32
6. Resources
Please find the icons to be utilized in the app at:
https://cs-server.usc.edu:45678/hw/hw9/images/android/albums.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/details.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/events.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/favorites_off.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/favorites_on.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/groups.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/home.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/logo.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/pages.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/places.png
https://cs-server.usc.edu:45678/hw/hw9/images/android/posts.png
33
https://cs-server.usc.edu:45678/hw/hw9/images/android/users.png
7. Implementation Hints
See the HW9 Android Clues file.
8. Material You Need to Submit
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, in the
Announcement page and in Piazza.
You should also ZIP your project source directory and SUBMIT the resulting ZIP file. Make sure
that the source path does not include the .app file or image files in the product folder.
