Description
Mobile Applications Development
Uses: Drawer Layout, ViewPager2, Adapters, Internet, APIs, Dynamic Menus, Implied Intents
App Highlights:
• This app displays current news articles from a wide variety of news sources covering a range of news
categories.
• NewsAPI.org will be used to acquire the news sources and news articles.
• Selecting a news source (i.e., CNN, Time, etc.) will display up to 10 top stories from that news source.
• Selecting a news topic will limit the news source choices to only those offering that topic of news.
• News articles are viewed by swiping right to read the next article, and left to go back to the previous
article
• You will not need to develop separate landscape layouts.
• The user can go to the complete extended article on the news source’s website by clicking on the article
title, text, or image content.
• You must add a professional looking launcher icon to your app.
NO LATE SUBMISSIONS WILL BE ACCEPTED FOR THIS ASSIGNMENT – NO EXCEPTIONS
CS 442 Mobile Applications
Menu Behavior Examples:
• Filter News Sources by Topic (technology) – then view the news from source “Engadget”:
CS 442 Mobile Applications
• Filter News Sources by Topic (business) – then view the news from source “Handelsblatt”:
NO LATE SUBMISSIONS WILL BE ACCEPTED FOR THIS ASSIGNMENT – NO EXCEPTIONS
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 4 of 12
A) News Data:
Acquiring news source and news article data will be done via the NewsAPI.org news aggregation service. This
service allows you to download news sources and news articles (by news source)
NOTE: You MUST sign up get an API key in order to access the NewsAPI.org services. Your API KEY must be
supplied with NewsAPI.org queries. You can do this by registering at:
https://newsapi.org/register
Register with an email and a new password and agree to the terms and click Submit to register and get your API
key (the key is displayed to you right after you click the Submit button).
The API:
The NewsAPI.org service offers 2 API calls – one to get news sources (organizations offering news – CNN,
Time, etc.) and one to get top news articles from a selected news source.
1) News Sources Query Format (to be used in our assignment):
To get all sources: https://newsapi.org/v2/sources?apiKey=________
For example, if your API Key was “ABC123xyz”, the URL would be:
https://newsapi.org/v2/sources?apiKey=ABC123xyz
The News Source Query response is sent in JSON format (described in the next section).
2) News Article Query Format (to be used in our assignment):
To get top articles for a News Source: https://newsapi.org/v2/top-headlines?sources=______&apiKey=______
For example, if your API Key was “ABC123xyz” and you wanted “cnn” news, the URL would be:
https://newsapi.org/v2/top-headlines?sources=cnn&apiKey= ABC123xyz
The News Article Query response is sent in JSON format (described in the next section).
NOTE: This API requires the “User-Agent” request property be provided with your
JsonObjectRequest objects. The value this property is set to does not matter, but
it must be set. See the example below (red/bold is new):
JsonObjectRequest jsonObjectRequest =
new JsonObjectRequest(Request.Method.GET, url.toString(),
null, listener, error) {
@Override
public Map<String, String> getHeaders() throws AuthFailureError {
Map<String, String> headers = new HashMap<>();
headers.put(“User-Agent”, “”);
return headers;
}
};
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 5 of 12
NewsAPI.org Sources Query Results Example:
https://newsapi.org/v2/sources?apiKey=ABC123xyz
The results come in the form of a JSON Object that contains a JSON Array of source entries as shown below. Each entry
represents an individual news source (note that the “category” field is referred to as Topic in this application).
Example:
{
“status”: “ok”,
“sources”: [
{
“id”: “abc-news”,
“name”: “ABC News”,
“description”: “Your trusted source for breaking news, analysis, exclusive
interviews, headlines, and videos at ABCNews.com.”,
“url”: “https://abcnews.go.com”,
“category”: “general”,
“language”: “en”,
“country”: “us”
}, {
“id”: “aftenposten”,
“name”: “Aftenposten”,
“description”: “Norges ledende nettavis med alltid oppdaterte nyheter innenfor
innenriks, utenriks, sport og kultur.”,
“url”: “https://www.aftenposten.no”,
“category”: “general”,
“language”: “no”,
“country”: “no”
}, {
“id”: “argaam”,
“name”: “Argaam”,
– ارقام موقع متخصص في متابعة سوق األسهم السعودي تداول” :”description”
تاسي – مع تغطيه معمقة لشركات واسعار ومنتجات البتروكيماويات
,” تقارير مالية االكتتابات الجديده ,
“url”: “http://www.argaam.com”,
“category”: “business”,
“language”: “ar”,
“country”: “sa”
}, {
. . .
. . .
. . .
}]
}
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 6 of 12
NewsAPI.org Articles Query Results Example:
https://newsapi.org/v2/top-headlines?sources=cnn&apiKey= ABC123xyz
The results come in the form of a JSON Object that contains a JSON Array of article entries as shown below. Each entry
represents an individual news article. Example:
{
“status”: “ok”,
“totalResults”: 10,
“articles”: [{
“source”: {
“id”: “cnn”,
“name” “CNN”
},
“author”: “Kaitlan Collins, CNN”,
“title”: “Joe Biden: Sen. Joni Ernst just proved our point about Trump – CNN Video”,
“description”: “Democratic candidate Joe Biden says Sen. Joni Ernst’s (R-IA) comments
about the impeachment testimony impacting Biden’s chances in the state
proves the real motivation behind Trump’s attack on the former vice
president and his son.”,
“url”: “http://us.cnn.com/videos/politics/2020/01/28/joni-ernst-biden-iowacaucus-sot-ctn-sot-vpx.cnn”,
“urlToImage”: “https://cdn.cnn.com/cnnnext/dam/assets/200128022738-joe-biden-joniernst-split-super-tease.jpg”,
“publishedAt”: “2020-01-28T17:54:48.1249684Z”,
“content”: “Chat with us in Facebook Messenger. Find out what’s happening in the
world as it unfolds.”
}, {
. . .
. . .
. . .
}
}]
}
NOTE: This API requires the “User-Agent” request property be provided with your
JsonObjectRequest objects. The value this property is set to does not matter, but
it must be set. See the example below (red/bold is new):
JsonObjectRequest jsonObjectRequest =
new JsonObjectRequest(Request.Method.GET, url.toString(),
null, listener, error) {
@Override
public Map<String, String> getHeaders() throws AuthFailureError {
Map<String, String> headers = new HashMap<>();
headers.put(“User-Agent”, “”);
return headers;
}
};
Note that any of the JSON fields can be skipped or specified as null in the JSON. Skipped
or null fields should be removed from the display.
Missing or invalid image links should result in a default image displaying.
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 7 of 12
B) Application Behavior Diagrams:
1) Startup
NO LATE SUBMISSIONS WILL BE ACCEPTED FOR THIS
ASSIGNMENT – NO EXCEPTIONS
A News Source (i.e., “cnn”)
can be selected by opening
the “drawer” and selecting a
source
Topics can be selected using the options menu. The content
displayed in this menu is dynamic – based upon the data retrieved
from the news sources.
A news-related background is
shown before any articles are
loaded (you find a newsrelated background image for
yourself)
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 8 of 12
2) Selecting a Topic
Note that the content found in the options-menu is not
hard-coded. The content comes from the data retrieved
from the news sources.
For example, the unique list of all news topics from all
sources in this example is business, entertainment, general,
health, science, sports, and technology. Those topics are
used to populate the “Topics” submenu (with the default
“all” also added to the submenu). Note that the unique set
of topics changes over time and should NOT be hard-coded.
Selecting a Topic will reduce the content of
the News Sources drawer-list by eliminating
those that do not match the specified Topic.
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 9 of 12
3) Selecting a News Source
Scroll
Selecting a new source will
refresh this display to show the
first article of the new source.
The selected news source is
displayed in the Navigation Bar
News articles from the selected
source are displayed in a “view
pager2” allowing left & rightswipe navigation between
articles.
Article count is maintained at
the bottom of the screen
News Article Headline
News Article Date
News Article Author(s)
News Article Image
News Article Text – this needs
to be scrollable so longer
article text can be completely
read.
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 10 of 12
4) Swipe Right (or Left) to scroll through articles from the selected new source:
5) Click on article title, image, or text to go to extended article on the news source web site
Swipe
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 11 of 12
C) News Source Data Representation
The full news source list should always be stored as-is from the API, unchanged (nothing removed). Another
“current” list of sources should be used to hold the “current” sources to be displayed in the drawer. This
“current” list of sources will change based upon the Topic selections (is any). The list of current sources
should contain all sources at startup (as no topic has been selected).
When a criteria selection is made (i.e., the “business” topic), the “current” source list should be updated to
contain only the sources that have “business” as the topic. This is shown below:
D) Provided Resources (3 images, 2 JSON files)
Image Error Loading Placeholder No Image (i.e., null)
E) Extra Credit:
1) News article date/time stamps are in the format “2020-04-08T17:54:48.12…Z” (this is called “zero
hour offset” also known as “Zulu time”). Earn 15 points if you convert this to the following format:
“Apr 08, 2022 20:52”.
2) Up to 20 points of extra credit will be awarded if you save and restore the app state when transitioning
between portrait and landscape layouts to ensure a smooth user experience. Without this, the app
reverts to the start state upon rotation. If this is done properly, the current topic selection, the current
source list (in the drawer), and the displayed articles will be maintained upon device orientation
change.
3) Up to 25 points of extra credit will be awarded if
you display the news topics in the options menu
different colors, and then color the news
sources in the drawer according to their topic:
Source 1
Source 2
Source 3
Source 4
Source 48
Current List
…
Source 1
Source 2
Source 3
Source 4
Source 100
Full List
…
Select
Topic
CS 442 Mobile Applications
Development (Android Section)
© Christopher Hield 12 of 12
Assignment Assistance
The TAs for our course are available to assist you with your assignment if needed. Questions on assignment
requirements and course concepts can be sent to the instructor.
NO LATE SUBMISSIONS WILL BE ACCEPTED FOR THIS ASSIGNMENT – NO EXCEPTIONS
Submissions & Grading
1) Submissions must consist of your zipped project folder (please execute Build =>Clean Project before
generating the zip file).
2) Submissions should reflect the concepts and practices we cover in class, and the requirements
specified in this document.
3) NO LATE SUBMISSIONS WILL BE ACCEPTED FOR THIS ASSIGNMENT – NO EXCEPTIONS
4) Grading will be based upon the presence and proper functionality of all features and behaviors
described in this document. NOTE: All descriptions and images constitute the requirements for this
assignment.
5) Grading will be performed with the following SDK details:
o Project Compile & Target SDK Version: 30
o Project Minimum SDK Version: 25
6) Grading will be performed on emulator devices with the following characteristics:
Resolution Details Example Emulators
1080 x 1920 With Playstore Pixel, Pixel 2, Nexus 5, Nexus 5X
1080 x 2220 or 2280 With Playstore Pixel 3a, Pixel 4
If you do not understand anything in this handout, please ask.
Otherwise the assumption is that you understand the content.
Unsure? Ask!
NO LATE SUBMISSIONS WILL BE ACCEPTED FOR THIS ASSIGNMENT – NO EXCEPTIONS
