Faculty of Engineering | Faculté de Génie

uOttawa.ca

Developing Android Applications

SEG2105 - Introduction to Software Engineering – Fall 2016

Presented by: Felipe M. Modesto – TA & PhD Candidate

ANDROID LAB 3

Additional UI Concepts & Storage

Class Assignment: Simple List App

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 updateexisting components in a layout.

• Today we will see how to that you can create moredynamic layouts, with even more adaptability.

• If you missed the previous lab sessions, check out theprevious 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/uottawa-

colour-palettes

• More Information on Material Design:– https://material.google.com/layout/principles.html

Dynamic UI

• Creating a responsive UI is fundamental to allapplications.

• In the Project, you will be required implement aCooking Helper where users can add, remove andupdate recipes, check ingredient lists and search. Thismeans that you should display information based onwhat 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 becreated from an array ofstrings and anArrayAdapter.

• Android provides manypreset Layouts, one ofwhich is a basic string list:

– android.R.layout.simple_list_item_1

• You can override the List’sOnItemClick function toperform functions related tothe 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;

}

@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;

}

}

In this example, the Icon Image and

Name are configured based on a

String List. You can also import that

info from your Singleton!

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 withemulation:

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 errormessages in your files or in the Gradle Build Message List. To perform aGradle 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, itmeans that it could not find the highlighted object, and you likely have animport missing or wrong name being referenced.

b. Installation Error: A path or file in your installation might have beenremoved or become corrupted. A Full Clean re-install is suggested as asolution as pinpointing the error can take a long time. Your Projects willstill 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 AMDProcessor, you will not be able to run x86 android emulators. Tosolve this issue, you will need to go to the AVD Manager and Edityour Virtual Device. Change the Android Version from a x86 orx86_64 to an armeabi-v7a ABI.• Warning: Your emulator WILL be very slow as you are

emulating an architecture different from the one in yourcomputer, but this solution will ensure you can at least testyour 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 BIOSSettings.

3. Emulator is SLOW!

a. Processing Power: If you are working with an older computer, a tablet-like 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 youremulator even if it is running.

b. Virtual Device RAM: If your virtual device complains that you do not haveenough memory you can either change its advanced settings to lower thememory requirements or create a new device with simpler specs. Asuggestion 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 androiddevice and none of you manage to get your emulators working, you canalways resort to using your device. Just connect them, follow the steps inAndroid Lab 01 and deploy your app to it!

LAB ASSIGNMENT

Simple List: Time to work!

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: