Developing Android Applications SEG2105 - Introduction to Software Engineering Fall 2016 Presented by: Felipe M. Modesto TA & PhD Candidate Faculty of Engineering Faculté de Génie uottawa.ca
Additional UI Concepts & Storage Class Assignment: Simple List App ANDROID LAB 3
Class Plan User Interface Design Notes on Memory Management Extra Notes & Useful Information Class Assignment
Recap In the previous lab you learned that you can update existing components in a layout. Today we will see how to that you can create more dynamic layouts, with even more adaptability. If you missed the previous lab sessions, check out the previous material before proceeding.
UI/UX: Basics Interface Design is the field responsible for: User Interfaces (UI) User Experience (UX) Mobile Touch Interface is exceptionally reliant on good Interface Design: Limited Interaction tools (No mouse, no Keyboard) UI Occlusion (Hands and Fingers hide information behind them) Limited Space (Smaller Screens)
Principles : Simplicity We re currently in the age of Material design: Layered Flat design: Stacked Sheets of Paper Avoid Cluttering your Screen with Information. Names, Icons and Buttons should be Intuitive. Take advantage of the available icon set. Use a consistent design style in your project Less is More! Avoid Fancy Fonts, backgrounds.
Principles : Hierarchy Content should be placed on the screen based on their importance. Humans scan Left to Right & Top to Bottom. Top Bars, Menus & titles have a preset location. Users expect certain behavior, adhere to standard guidelines! Rule of 3rds: 3x3 Grid and Focal Points
Rule of Thirds
Principles: Composing Grids and Spacing Remember to add Margins: Never touch the borders of the screen Objects need spacing to separate contexts Density Independent Pixels (1 pixel at 160 density) dp = (width in pixels * 160) / screen density
Useful Links: uottawa has a great Color Palette: http://www.uottawa.ca/brand/visual-identity/uottawacolour-palettes More Information on Material Design: https://material.google.com/layout/principles.html
Dynamic UI Creating a responsive UI is fundamental to all applications. In the Project, you will be required implement a Cooking Helper where users can add, remove and update recipes, check ingredient lists and search. This means that you should display information based on what the user has input.
ListView ListView is a View group that displays a list of scrollable items. Items are automatically inserted to lists using an Adapter. In the project you will have to create and manage a lists of recipes and ingredients. This means that part of the content available will created dynamically, making it relevant to know how to create dynamic layouts. Another dynamic layout is the GridView, similar to the GridLayout used in the previous lab, but built dynamically.
Adapter The adapter is the bridge between AdapterViews and the content they display. ListView and GridView extend the AdapterView Class through the AbstractListView. Adapters are created by passing the application context, Resource ID of the list template as well as other optional parameters. Listviews have a setadapter function in which the Adapter created previously is set.
Simple ListView A Simple ListView can be created from an array of strings and an ArrayAdapter. Android provides many preset Layouts, one of which is a basic string list: android.r.layout.simple_list_item_1 You can override the List s OnItemClick function to perform functions related to the item selected. Example: open an Activity to configure the item selected.
Example Code Snippet This snippet of code is part of the oncreate method in the Activity Class (Java File) // Get ListView object from xml layout listview = (ListView) findviewbyid(r.id.list); //Defining Array values to show in ListView String[] values = new String[] { "Item 01","Item 02","Item 03","Item 04","Item 05","Item 06","Item 07","Item 08" }; //Converting Array to ArrayList final ArrayList<String> list = new ArrayList<String>(); for (int i = 0; i < values.length; ++i) { list.add(values[i]); } //Create an ArrayAdapter and Set it on the ListView ArrayAdapter adapter = new ArrayAdapter(this, android.r.layout.simple_list_item_1, list); listview.setadapter(adapter); listview.setonitemclicklistener(new AdapterView.OnItemClickListener() { @Override public void onitemclick(adapterview<?> parent, final View view, int position, long id) { final String item = (String) parent.getitematposition(position); //Do something with the string that you just got! } }); This code Snippet produces the example image in the previous slide
Dynamic Content The content of a dynamic list is not limited to primitive types or Strings. A list can contain complex elements that display multiple items representing properties of the items in the list including. The displayed items can include images and text fields. To create a template for your list item, you should create a layout xml file for it. This layout defines the structure of the information presented in each element that will be displayed in your dynamic list.
This is how an example complex layout looks in the preview. It contains an avatar image and two text fields. Because the layout has the whole screen to itself in the preview screen, it can behave differently from expected. However, when adding it to a list, each item will have much less vertical space, as that property is fixed. This means that the final layout will be more pleasing. You can also manually set properties in the individual layout if you want.
List Behavior When viewed in a List, items will appear sequentially. If the items fill more are then available on screen, a scroll bar will be added automatically to the right of the list. To make sure that the height of list items is properly set,
Custom Adapter To add a custom Layout to a listview you need to create a CustomAdapter and implement the required functions. This is necessary so you can populate the items in the listview with the correct information. Your CustomAdapter should extend one of the existing Adapter classes and implement its constructor as well as the getview function. The getview Function of your adapter should have a LayoutInflater to expand the items in the list. You need to configure all items of components of the listitem you wish to have personalized.
Sample Custom List Example OnCreate that handles itemlist OnClick Events @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_list); ListView listview = (ListView) findviewbyid(r.id.list); String[] values = new String[]{ "Millonarios FC", "empty", "empty", "empty", "empty", "empty", "empty", "empty" }; TeamArrayAdapter adapter = new TeamArrayAdapter(this, values); listview.setadapter(adapter); listview.setonitemclicklistener(new AdapterView.OnItemClickListener() { @Override public void onitemclick(adapterview<?> parent, final View view, int position, long id) { final String item = (String) parent.getitematposition(position); //DO SOMETHING with your item, maybe open a new activity! } }); }
Sample Custom List Example Custom Adapter with multiple components public class TeamArrayAdapter extends ArrayAdapter<String> { private final Context context; private final String[] values; } public TeamArrayAdapter(Context context, String[] values) { super(context, R.layout.list_team_layout, values); this.context = context; this.values = values; } In this example, the Icon Image and Name are configured based on a String List. You can also import that info from your Singleton! @Override public View getview(int position, View convertview, ViewGroup parent) { LayoutInflater inflater = (LayoutInflater) context.getsystemservice(context.layout_inflater_service); View rowview = inflater.inflate(r.layout.list_team_layout, parent, false); TextView textview = (TextView) rowview.findviewbyid(r.id.line01); ImageView imageview = (ImageView) rowview.findviewbyid(r.id.icon); textview.settext(values[position]); // Change the icon for Windows and iphone String s = values[position]; if (s == null s.isempty() s.equals("empty")) { imageview.setimageresource(r.drawable.ic_logo_empty); } else { imageview.setimageresource(r.drawable.ic_logo_mil); } return rowview; }
Example Result OnItemClick StartActivity! OnClick Save Info! Finish! (Return to previous activity)
Memory Management To manage information during execution you can keep information in memory, potentially done using Singletons, also useful as application managers. To save information permanently you can use SQL Databases or Key-value Sets. The Database course is not a course requirement, hence persistent data storage is not required for the project, though it is recommended.
Singleton Singleton is a design pattern very useful for managers, which can do basic information storage if required. Because Singletons restrict instantiation to a single object, you can ensure that your memory state is consistent after read/write operations. UML Structure
Singleton: Usage To efficiently use Singleton as a solution for your project, the recommendation is you create Java classes representing the information you need to store. The list of classes might include team, match, tournament, etc. After coding the necessary classes where you will store data, you can create lists or other structures to store instances of your classes in the Singleton. You can use Umple to generate your class files and copy them into your project. Use your Singleton as a system-wide resource by creating getter/setter functions as required. Perform Assertions whenever required.
Data Storage Key-Value sets: Useful to store general configurations. Directly store key-based Int or String values. SQL Databases: Permanent Storage for larger datasets. The SQLite API is used by implementing a SQLiteOpenHelper. Table Creation, Deletion & Query management is usually performed by this class, who is responsible for the structure of the database.
NOTES & USEFUL INFORMATION
Project Guidelines Remember: This is a course on Software Engineering Use the skills you have learned, your work will be judged not only on its functionality but also on its structure and presentation of your code. Adopt naming conventions; Keep your code clean and well documented; DO NOT copy code from the internet, uottawa has very clear rules on plagiarism. http://www.uottawa.ca/academic-regulations/academic-fraud.html Test your application! If your project is not functional because the group did not test it, you will be penalised. Only 1 APK will be accepted by group. Merge your code!
UI Layout Android Allows you to personalize the UI on your application. You can choose on of the pre-existing templates or define your own. The available options and customization include the overall color, inclusion/removal of the ActionBar, Fullscreen as well as other elements. To access the layout options, click on the circular button in the Design view. The text in the button will display the name of the current theme for your layout.
Custom UI Styles Multiple UI style are available, both light and dark options being available. You can also personalize your theme by applying color to specific theme attributes. This can be done in /res/value/styles.xml
Emulator When testing your project you may encounter the following issues with emulation: 1. Android Studio Does not Compile Project or Show Previews. Possible Causes: a. Code Error: This can be caused by errors in your code! Look for error messages in your files or in the Gradle Build Message List. To perform a Gradle Build go to Build >> Rebuild Project and if there are any issues, they should be listed as Errors. If you see portions of your code in red, it means that it could not find the highlighted object, and you likely have an import missing or wrong name being referenced. b. Installation Error: A path or file in your installation might have been removed or become corrupted. A Full Clean re-install is suggested as a solution as pinpointing the error can take a long time. Your Projects will still exist in the workspace folder if you reinstall Android Studio!
2. Emulator Gives Warning Message or Crashed on Launch: a. AMD Processor: If your computer is equipped with an AMD Processor, you will not be able to run x86 android emulators. To solve this issue, you will need to go to the AVD Manager and Edit your Virtual Device. Change the Android Version from a x86 or x86_64 to an armeabi-v7a ABI. Warning: Your emulator WILL be very slow as you are emulating an architecture different from the one in your computer, but this solution will ensure you can at least test your app. b. HAXM Issue: If you have an AMD Processor, see solution above. If you have an Intel Processor, please manually install Intel HAXM (Google for Download Link). If this does not solve your problem, you need to enable Intel Virtualization Technology in your BIOS Settings.
3. Emulator is SLOW! a. Processing Power: If you are working with an older computer, a tabletlike computer (Windows Surface Pro) or another system with limited specs, your emulation WILL be slow. Once you start your emulator, don t close it. Running your project will automatically open a new android app in your emulator even if it is running. b. Virtual Device RAM: If your virtual device complains that you do not have enough memory you can either change its advanced settings to lower the memory requirements or create a new device with simpler specs. A suggestion is to use the Nexus 4 or Galaxy Nexus as your baseline. c. Android Emulation: If any of the members in your team have an android device and none of you manage to get your emulators working, you can always resort to using your device. Just connect them, follow the steps in Android Lab 01 and deploy your app to it!
Simple List: Time to work! LAB ASSIGNMENT
Create the following App: Recipe List Requirements: Main Activity: Recipe List Custom Adapter Inflater XML Layout File for Items List Item Content: 1. Recipe Image 2. Recipe Name 3. Itemized List of Ingredients Check the code in the slides for examples.
Code Logic Within the Activity s OnCreate there should be: Content View Loader Reference to the ListView where items will be put Creation of the List (Or load from memory) Creation of an Adapter Configuration of Actions for List Items (OnClicks) UI Refresh.
Adapter & Custom Layout Create an XML Layout File in the Layout Folder Add the components that make one item Inflate the Items in the List (see example custom adapter) Example Team Layout: