Tip Calculator App Building an Android App with Java © by Pearson Education, Inc. All Rights Reserved.

Test driving the Tip Calculator App © by Pearson Education, Inc. All Rights Reserved.

Technologies Overview This chapter uses many Java OO programming capabilities ▫ Classes ▫ Anonymous inner classes ▫ Objects ▫ Methods ▫ Interfaces ▫ Inheritance We’ll create a subclass of Activity class to programmatically define the logic Programmatically interact with EditText, TextView and SeekBar We’ll use event handing and anonymous inner classes to process GUI’s interactions © by Pearson Education, Inc. All Rights Reserved.

Building the App’s GUI We’re using TableLayout to arrange GUI components ▫ 6 rows, 4 columns ▫ Each cell can be empty or hold one component – which can be a layout to contain other components ▫ A component can span multiple columns (SeekBar) ▫ A row’s height is determined by tallest component  Similarly column’s width by widest component or wider ▫ By default, components added to a row left to right ▫ Can specify exact location – rows, columns start at 0 by default © by Pearson Education, Inc. All Rights Reserved.

Layout © by Pearson Education, Inc. All Rights Reserved.

Names of GUI components in this app © by Pearson Education, Inc. All Rights Reserved.

TableLayout and Components Start with basic layout and controls Customize control’s properties As you add components ▫ Set the ID property ▫ Set the Text property Literal string values should be placed in the strings.xml file in the app’s res/values folder, esp. if you intent to localize app for multiple languages ▫ Author chose not to use string resources for % TextViews Build in exact order specified ▫ If you don’t, you can rearrange in Outline or in main.xml © by Pearson Education, Inc. All Rights Reserved.

Steps NOTE: Author uses Outline window to add components to proper TableRows of TableLayout. With more complex Layouts, you can use Visual Layout Editor. (Author thinks it’s easier to use Outline.) 1.Create Project 2.Delete and Recreate main.xml file 3.Configure Visual Layout Editor to use Appropriate Android SDK 4.Configure Visual Layout Editor’s Size and Resolution 5.Configure TableLayout 6.Add TableRows 7.Add Components for tableRow0 – tableRow5 © by Pearson Education, Inc. All Rights Reserved.

Review Layout billEditText and customSeekBar do not span columns yet text is light gray and hard to read some components are in wrong columns – will self- correct after we fix customSeekBar text is all left-aligned © by Pearson Education, Inc. All Rights Reserved.

Customizing Componets Change text colors of TextViews Move 10%-20% to correct columns Center Text Span elements properly Right align TextViews in column 0 Vertically center TextViews in 5 th row Set SeekBar’s properties Prevent user from manipulating text in EditTexts other than billEditText Set Layout weights for various components to fit on screen © by Pearson Education, Inc. All Rights Reserved.

Final XML Markup © by Pearson Education, Inc. All Rights Reserved.

Editing string resources © by Pearson Education, Inc. All Rights Reserved.

Adding Functionality to App © by Pearson Education, Inc. All Rights Reserved.

Adding Functionality Open source code Add comments at top of file Add import statements Android apps do not have a main method ▫ Have activities, services, content providers and broadcast receivers ▫ The TipCalculator app has only one Activity class, which extends (inherits from) class Activity. Add instance variables Override OnCreate and onSaveInstanceStatemethods Add method updateStandard, update updateCustom Add anonymous inner class that implements interface OnSeekBarChangeListener, and TextWatcher and overrided some of their methods © by Pearson Education, Inc. All Rights Reserved.

package and import statements Class Activity – provides basic lifecycle methods of an app Class Bundle – represent’s an app’s state info, so app can save its state when sent to background Interface Editable – change content and markup of text in GUI Interface TextWatcher to respond to events when user interacts with EditText component Package widget – contains widgets (GUI components) and layouts used in GUIs © by Pearson Education, Inc. All Rights Reserved. Interface OnSeekBarChangeListeners – responds to user moving the SeekBar’s thumb

Activity Throughout its life an activity can be in several states Active (running) Paused (but visible-not focused-could be killed) Stopped (not visible – likely to be killed) Methods associated with state transitions (pg. 108) © by Pearson Education, Inc. All Rights Reserved.

Keep this method simple, It has to load in 5 seconds! Time consuming initializations should be done in a background process. Key/value pairs Must call superclass method when overriding any Activity method R is a class built by ADT when you build GUI (see gen folder) contains nested static classes representing each type of resource In your res folder

© by Pearson Education, Inc. All Rights Reserved. Programmer- defined method

© by Pearson Education, Inc. All Rights Reserved. Programmer- defined method

© by Pearson Education, Inc. All Rights Reserved. In Eclipse, you can generate a shell of this method by right clicking in the source Code, then selecting Source > Override|Implement Methods… Dialog shows you every method that can be overridden or implemented in a class

© by Pearson Education, Inc. All Rights Reserved. Line 81 registered this as customSeekBar’s event-handling object Java requires we override every method of an interface we implement (even if we don’t use them)

© by Pearson Education, Inc. All Rights Reserved.

Wrap-Up Created first interactive Android app ▫ Overviewed, test-drove, followed detailed instructions to build GUI using ADT’s Plugin’s tools in Eclipse  Including Visual Layout Editor, the Outline Window and the Properties Window ▫ Edited main.xml file ▫ Did a detailed code walkthrough of Activity class Future chapters only discuss new GUI capabilities as needed © by Pearson Education, Inc. All Rights Reserved.

Learned TableLayout ▫ Each cell can be empty, hold one component – which could itself be a layout TableRow ▫ Number of columns determined by the row with most components ▫ Row’s height determined by tallest component ▫ Column’s width by widest component, unless you stretch them TextView ▫ Is a label EditView ▫ Receives input from the user, non-focusable Edit Texts to display various values SeekBar ▫ Allow user to specify custom values on a scale © by Pearson Education, Inc. All Rights Reserved.

Learned many Java OO concepts Final static Classes ▫ Overriding methods Subclasses (extending/inheriting from) Anonymous inner classes Objects Methods Interfaces Get references to GUI components that the app interacts with programmatically © by Pearson Education, Inc. All Rights Reserved.

Next chapter Learn about collections Layout GUI programmatically – allowing you to add and remove components dynamically in response to user’s interactions © by Pearson Education, Inc. All Rights Reserved.