WPI Computer Science Department

Computer Science Department
------------------------------------------

CS 528 Fall Semester Project 1: Designing Android Screens (Layouts, Views and Widgets), (8/100 of course grade)
Due date: Thursday, September 21, 2017 (by class time)!!


Overview

The aim of this project is to get you familiar with designing Android screens using layouts, widgets and the webview. This project should be done on Android Studio and each student should do the project by themselves. You may discuss the projects with other classmates or on InstructAssist but each student will submit their own code for the project. Android Studio is already installed in the Zoolab. You can do your project there.

Preparation

First of all, make sure you've done project 0. Go over my lecture slides 1-2 especially lectures 2a & 2b. Next read chapters 1 & 2 of Head First Android Development and Chapter 1 of Android Nerd Ranch. Try running the code from those chapters (provided below). Read the code examples and make sure you understand the code. Thereafter, you're ready to do your project. I've also provided below how to run code examples from the Android Nerd Ranch book. Note: The code has been thoroughly tested and doesn't have bugs!! If you get EGL warnings/errors, the code should still run fine. The warnings/errors have to do with the emulator within Android Studio. To fix it, in Android Studio go to the AVD Manager, select your device (e.g. Nexus 5) -> edit settings -> "show advanced settings". Scroll down and change "Emulated Performance, Graphics" from "Automatic" to "Software - GLES 2.0".


Project Requirements

Design the following 4 screens. You will need to create 4 different Android Studio projects (1 for each screen). The 4 Android Studio projects will be put together and submitted in a single zip file. The 4 screens are:



Screen 1: The following screen shows a login page. Text can be typed into the "Username" and "Password" boxes. Design a similar screen. If your name is Frank, your screen title at the top should read "Log into Frank's page", etc. The picture should also be your picture and not mine. Note that you are just designing the screen. The button does not have to be functional.







Screen 2: The screen below explores scrolling of content that is too large to fit on a mobile device screen. So, the content boxes should be 20 rows high in total, where only 4 rows can fit in on the device screen at a time. The user has to scroll down to see all 20 rows. Adjacent rows should alternate the alignment of your picture and any random picture of a friend of your choice, or any Internet image of a person of your choice. For example, in row 1, the 2 images should be left aligned. In row 2, the images should be right aligned. In row 3, the images will be left aligned, etc.





Screen 3: This screen contains a rectangle in which to display web content (WebView), 3 buttons that when clicked each load a different website, and a box that contains a 1-sentence description of the selected website. Note the alignment (left, right) of the text on each of the buttons. You can use webView to display the selected website. Each button has a different website URL of your choice hardcoded into it. Pressing each button should load up a different website into the Webview and a corresponding 1-sentence description should be loaded in the textbox below the 3 buttons. For example, if the user presses the button "Website 1", the website "https://www.google.com" may be loaded in the webview and the description "Google's search page" may also be displayed in the description box below the 3 buttons. Additionally, a toast pops up after clicking each button and displays the a message containing the text "Good Job!!"



Screen 4: The following screen is for an Address book on which users can type in Name, Phone, E-mail, Street, etc City, State, etc. Design a similar screen. Note that you are just designing the screen. They do not have be functional.





Submitting Your Work

Make sure to double-check that everything works before submitting. Submit all your executable and source files. Each of the screens above should be created in a different Android Studio project. Zip up all 4 folders containing these Android Studio projects into a single zip file. Essentially, after your project is complete, just zip the 4 project directories created by Android Studio. Submit your zip file using InstructAssist at [ https://ia.wpi.edu/cs528/] . Do not email me your program or submit it via dropbox.

Before submitting MAKE SURE YOUR PROJECT RUNS IN THE ZOOLAB and the Android Studio installation there can generate all 4 screens before submission. Name your zip file according to the convention FirstName_lastName_hw1.zip


[Feedback] [Search Our Web] [Help & Index]

[Return to the WPI Homepage] [Return to CS Homepage]

mailto:emmanuel@cs.wpi.edu