Android Lab Exercise window.onload = function() { /** * The parameter for the start() method defines the width of the * navigation pane. * If the parameter is omitted a default value of 12em is used. */ Start.start("14em"); }; img { border: 2px solid; } In this exercise you will be introduced to the mobile operating system Android through the Android Studio IDE. Preferably, you will install and use Android Studio on your own machine, but bear in mind that it is a large system and the recommended minimum system requirements are: CPU class: Intel Core i3 1.8 GHz RAM memory: 8 GB If you feel your machine is not up to the task, you can install Android Studio on your personal UMD disk space and run it on the development machines in Heller Hall 314. Installation Your Job Submission Android (Web Presentation) Android (Videos) In this lab you will create an app with opening screens for an Android version of your problem solving framework from earlier assignments. The requirements for the app are that it: Provides an opening screen that: Introduces the problem solver, and Allows the user to choose the farmer, wolf, goat and cabbage (FWGC) or 8-puzzle problem Depending on the user's choice, navigates to new screens that: Describe the FWGC or 8-puzzle problem, showing the introduction to the problem as well as the start and end states, and Allow navigation back to the opening screen Displays pleasing styles Example screens are shown in the menu at left. Implementing the screens for actually solving the problems is the subject of the last assignment. As part of this lab, you should complete an Android tutorial (see menu). Example Screens Tutorial How to Proceed This section shows example screens for this app. You need not reproduce them exactly; in fact, you are encouraged to improve on them. Opening Screen FWGC Screen 8-Puzzle Screen The opening screen introduces the problem solver and presents a choice. Clicking on either button brings up a description screen for the chosen problem. Note: String output is acceptable for state display The "Up" (upward navigation) button in the app bar returns the user to the opening screen The "Begin FWGC Problem" button need not be responsive at this time The same considerations apply for the 8 puzzle description screen. Note that the FWGC and 8 puzzle screens have different color styles. The Android developer site has a valuable tutorial: Building Your First App. Be sure to study and follow its entirety. Note that the tutorial describes how to run the app both by running an emulator and by connecting it to a physical Android device. When working correctly, this app: Opens with a screen containing a text input field and a SEND button After typing a message into the text field, the user clicks the button and the message is displayed in a second screen Don't worry if the details in the tutorial do not correspond exactly to your experience (due to your version of Android Studio being newer than that assumed by the tutorial) — the objective of the tutorial is to familiarize yourself with what you need to know to accomplish this lab. Name your project "Problem Solver" So that you can use Java 8 (streams and lambdas), choose a minimum API level of 24 You can lay out your screens using the drag-and-drop editor for ConstraintLayouts as described in the tutorial. However, if you prefer: You can lay out your screens by directly writing the XML code You can use layout containers such as LinearLayout and RelativeLayout You can lay out your screens programmatically (i.e. using Java code) as you did for your JavaFX problem solver. This requires that you use the Android API. Make sure that all your strings, colors, and styles are defined as resources in your project. These are found in app/res/values as shown below. See the menu at left for examples. strings.xml colors.xml styles.xml Make sure that all strings displayed in your screens are defined in your strings.xml file. For example: When you have strings.xml open, you can click , which displays your string names (keys) and their values. With a key selected, you can click , which allows you to enter long strings (including \n characters for preformatting) on multiple lines. Make sure that all colors used in your screens are defined in your colors.xml file. For example: defines a test color that is black. Once a color is defined, a small color swatch (in this case ) will appear in the left margin opposite the definition. Clicking on the color swatch will produce a color editor like that shown below on the left. After using the editor's controls you might produce a color like that on the right. Make sure that all styles used in your screens are defined in your styles.xml file. For example, the MediumMono style below could be used to display string representations of problem states. Note: As you type in the body of a style item, Android Studio will suggest values suitable for the item In the example below, @color/testColor refers to the color defined in colors.xml See the procedure for submitting Android projects on the menu to the left. Your project will be downloaded and run by the lab instructor. Submitting Android Projects
