1. SE 390: Software Engineering for Mobile Devices Week 3: Android Studio Copyright © Steven W. Johnson February 1, 2013

2. Mobile ecosystem What is Android? Page layout in Android Application icons Hints Android form elements Week 3: 2

3. Computers the size of a small house To computers in a cell phone Tomorrow: computers in your watch Computers in your glasses Miniaturization of devices (a career field?) Inspirational thought for the week 3

4. All things that make home computing work hardware software networking Desktop was/is revolutionary, but 20 years ago Main difference: desktop is a location mobile is an integration Desktop ecosystem 4

5. Ecosystem: living and non-living components of a complete, contained, self-balanced world Mobile ecosystem (ekosistem) 5

6. Mobile ecosystem: everything needed to make mobile system work Mobile ecosystem 6 http://science.dodlive.mil/2011/02/04/people-empowering-technology-the-cyberspace-ecosystem/

7. Mobile ecosystem 7 Services Applications Application Frameworks Operating Systems Operators Platforms Devices Aggregators Networks Subscribers

8. Subscribers: people using the system how is it used? why is it used? how COULD it be used? what is the demand? what is the potential? Mobile ecosystem 8 Fling, B. (2009) Mobile Design and Development. O’Reilly

9. Operators: service providers or cell phone companies install, maintain cell towers; operate network your connection to the system act as oligopoly/regulated monopoly examples: Avea, TurkTelecom Mobile ecosystem 9 Fling, B. (2009) Mobile Design and Development. O’Reilly

10. Networks: Signals and standards Standards describe technology and device Each network: a menu of tools/features Mobile ecosystem 10 NetworkTechnologySpeed 2G NetworkGSM (12.2 KB/sec)GPRS (60 KB/sec) 3G NetworkUMTS (3.6 MB/sec)HSDPA (14.4 MB/sec)

11. Aggregators: content gatherers/providers gather content/tools into single interface data is frequently updated Yahoo and MSN are aggregators? news, traffic, weather Mobile ecosystem 11 Fling, B. (2009) Mobile Design and Development. O’Reilly

12. Mobile devices: mobile is battery-powered power consumption is critical Mobile ecosystem 12

13. Mobile ecosystem 13 http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/ Devices: >50% smartphone in developed markets <20% in emerging markets

14. Devices: “phones” a.k.a. handsets and terminals devices typically subsidized with plan device choice = operator choice devices and browsers; both fragmented fragmented: many choices, broken into pieces Mobile ecosystem 14 Fling, B. (2009) Mobile Design and Development. O’Reilly

15. Mobile ecosystem 15 http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/ Platforms:

16. Mobile ecosystem 16 http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/ Platforms:

17. Founded (2003) by: Andy Rubin (Danger) Rich Miner (Wildfire Communications) Nick Sears (T-Mobile) Chris White (WebTV) What is Android? 17 http://www.ebellking.com

18. What is Android? 18 2003200520072010 iPhone 1999

19. Linux-based operating system (Linux OS 2.60) Development platform (SDK) for mobile devices Original: OS for touch screen devices (phones) Bought out by Google in 2005 (due to iPhone?) Android was and is open source Major OS for handheld devices Distributed 2007 Devices sold with Android: 2008 What is Android? 19

20. Bigger than mobile Also has applications for: television game consoles digital cameras What is Android? 20

21. Part of Open Handset Alliance Made up of 84 companies Formed in 2007 (Google + 34 others) Companies from: hardware software telecommunications allows ‘everyone else’ to compete with Apple same thing with PCs in the 1990s What is Android? 21

22. System architecture of Android: What is Android? 22 Burnette, E. (2010). Hello, Android: Introducing Google’s Mobile Development Program. Pragmatic Bookshelf: Dallas, TX, USA.

23. Written using Java (or C, C++) and XML Generated in IDEs such as Eclipse Compiled to.dex by Android API Translated to bytecode by ART (v5.0) What is Android? 23 Java Eclipse ART Linux Android SDK Android Studio

24. Launch an Android app: Creates a process (CPU: memory, processing) DVM launched in process What is Android? 24

25. .apk used to distribute, install application: all application code (in DVM.dex file) media resources/assets AndroidManifest.xml maximum file size: 50MB similar to a.jar (Java Archive) file for Java (zipped) can be run without unzipping What is Android? 25

26. Why use Dalvik VM? more efficient (low memory usage) acts as a sandbox (Linux and Java) limits crashes to the Dalvik VM What is Android? 26

27. HTML written declaratively (scripted) C is written procedurally (described in code) JavaScript is written functionally Android written procedurally or declaratively Better choice: declarative What is Android? 27

28. File organization based in Java project Consistent location for all files What is Android? 28

29. Packages: guarantees file name/pathway uniqueness generates unique name at Google Play can be compressed into.jar files package name is reverse domain name What is Android? 29 App_name from steve.com com.steve.app_name

30. Four main files in construction: AndroidManifest.xml (manager, we don’t use) ‘Sourcecode’.java class (where logic goes) ‘screen’.xml (describes appearance of the app) build.gradle (compilation instructions) strings.xml (text displayed on page) styles.xml (like.css) colors.xml (defines colors) What is Android? 30

31. Many similarities with HTML: Renders to screen differently What is Android? 31 ‘off-screen bitmaps’

32. Applications: made up of activity class(es) each activity has its own lifecycle application has a Linux process Difference: activity lifecycle != process lifecycle What is Android? 32

33. Each project has: mainfest.xml Sourcecode.java ‘res’ folder holds resources images screen.xml values: colors.xml strings.xml 33 What is Android?

34. Images go in /res/drawable folder Image types:.png (preferred).jpg Images called by file name only Image file names: numbers, lower case letters File called by name only; not extension 34 What is Android?

35. The values folder holds xml files defining styles colors.xml dimens.xml arrays.xml strings.xml styles.xml 35 - HelloSteve Settings Hello world! What is Android?

36. Many ‘values’ folders in resources (‘res’) folder Values folder for each size range Sizing information for that device 36 What is Android?

37. Resolution management by ‘alternate resources’ Resource size determined by resolution of device Decouple content from its size 37 Quick Brown Fox unsized text ‘strings.xml’ device with a resolution Apply a size values folder ‘dimens.xml’ Low: 1.3em Normal: 1.1em High: 0.9em What is Android?

38. Jobs of different file types: Java is the code/compiler/manager xml holds the content, presentation xml files like media queries Goal: update xml, never the.java code.java free of anything but logic 38 What is Android?

39. Create new project ‘Basic Page’ (File – New Project) 39 Lab: basic page

40. Set a minimum API/SDK: there is no correct answer; better answers API 8 gets 100% of current market API 8 has very limited features API 11 more fully-featured and 87.9% use consider needed features; work to minimum 40 Lab: basic page

41. Versions and API Numbers (big is important) 41 Lab: basic page Android Version API

42. Include your name in all titles from now on 42 Lab: basic page

43. Project is built; add ‘basicpage’ logo Rt. Click on ‘res’ folder – New – Image Asset 43 Lab: basic page

44. Add padding, change shape, add background 44 Lab: basic page

45. 45 Lab: basic page

46. Add controls to the app: ‘Plain TextView’ ‘Large Text’ ‘Medium Text’ ‘Button’ ‘Small Button’ When done: 5 textView and 2 button Relative layout, controls placed anywhere 46 Lab: basic page

47. 47 Lab: basic page

48. 48 Lab: basic page Open ‘Text’

49. 49 Lab: basic page Each control has unique id (except second textView) Fix id on second textView1 A TextView has an id of ‘textView’ android:id="@+id/textView" (add if not present) Width determined by dip or: “wrap_content”: width based on content “fill_parent”: before API 8; make width: 100% “match_parent”: preferred

50. Lab: basic page Define strings for the controls Open ‘strings.xml’ (values folder), create 6 strings Basic Page Hello world! Text for first TextView Big Text here Small Text Here More Text Button Text Small Button with Big Text Settings

51. Lab: basic page Update the controls by adding the strings Double-click on control, update and ‘Enter’ 51

52. Lab: basic page Update the controls by adding the strings Double-click on control, update and ‘Enter’ 52

53. Lab: basic page Colors handled similar to HTML Colors defined using: #RGB #ARGB #RRGGBB #AARRGGBB 53 PropertyHTMLAndroid/.xmlJava Text colorcolorandroid:textColor.setTextColor() Background colorbackgroundandroid:background.setBackgroundColor()

54. Lab: basic page Create ‘colors.xml’ in ‘values’ folder (New – File) 54

55. Lab: basic page Create four colors (your choice) 55 #ffff99 #99ff99 #3333ff #f3f3f3

56. Lab: basic page Apply the colors to your app 56

57. Lab: basic page Manually add properties to controls 57 <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" android:background="@color/TextBackground" android:textColor="@color/TextColor"/>

58. Lab: basic page Modify a color on each control added 58 <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" android:background="@color/TextBackground" android:textColor="@color/TextColor"/>

59. Lab: basic page Text size is controlled by ‘textSize’ (font-size) Define the size in ‘dimens.xml’ using dip 160dp to an inch 24dp 59

60. Lab: basic page Open ‘dimens.xml’ Add a dimension named ‘fontsize’ that is 24dp 60 16dp 24dp

61. Lab: basic page Change the fontSize for each TextView Select textView in ‘Component Tree’ Browse in textSize in ‘Properties’ (bottom) 61

62. Lab: basic page Change second button width to ‘match_parent’ 62

63. Lab: basic page Change the button width to ‘match_parent’ 63

64. Break 64

65. Description of page’s structure Decouples presentation from business logic Allows layout to adapt to different hardware Layouts 65 The quick brown fox screen.xml

66. ‘screen.xml’ holds the layout setContentView uses layout to organize page Layouts 66 screen.xml protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen);

67. Layout describes how elements are added Roughly like ‘ ’ or ‘ ’ in HTML Layout used is defined in /res/layout linear relative table grid view tab list view Layouts 67

68. No layout: elements stack on top of each other Layouts 68

69. Relative: in relation to another element; parent element Layouts 69

70. Relative: place anywhere on the page no restrictions Layouts 70 text1 text2 text3 text4 Text2: android:layout_alignLeft="@+id/text1“ android:layout_marginTop="17dp" Text3: android:layout_alignLeft="@+id/text1" android:layout_marginTop="17dp" Text4: android:layout_alignTop="@+id/text3" android:layout_marginLeft=“51dp"

71. Linear: laid out in a single row or column (not both) Layouts 71 <LinearLayout android:orientation="vertical" > main.xml

72. Layouts 72 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“@string/one" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“@string/two" /> </LinearLayout Click me No, click me

73. Table: like an HTML table create “td” elements each ‘td’ has row/column created in matrix Layouts 73 </TableLayout

74. Layouts: 74 <TableRow android:id="@+id/tableRow1" //2 columns android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" > <TextView android:id="@+id/textView1" android:text="Column 1" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:id="@+id/button1" android:text="Column 2" /> <TableRow //1 column android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" > <EditText android:id="@+id/editText1" android:layout_span="2" android:text="Column 1 & 2" />

75. 75 <TableRow android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="center_horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="18dp" android:text="Row 1" android:layout_span="3" android:padding="18dip" android:background="#b0b0b0" android:textColor="#000"/> /TableRow> !-- Row 2 with 3 columns --> TableRow android:id="@+id/tableRow1" android:layout_height="wrap_content" android:layout_width="match_parent"> <TextView android:id="@+id/TextView04" android:text="Row 2 column 1" android:layout_weight="1" android:background="#dcdcdc" android:textColor="#000000" android:padding="20dip" android:gravity="center"/> <TextView android:id="@+id/TextView04" android:text="Row 2 column 2" android:layout_weight="1" android:background="#d3d3d3" android:textColor="#000000" android:padding="20dip" android:gravity="center"/> <TextView android:id="@+id/TextView04" android:text="Row 2 column 3" android:layout_weight="1" android:background="#cac9c9" android:textColor="#000000" android:padding="20dip" android:gravity="center"/> in HTML

76. Layouts can be nested in other layouts Layouts 76

77. Goal: choose layout that’s most effective: ease of writing code simpler to understand avoid nesting elements amount of code required processing time of code written Default layout is relative Layouts 77

78. Application icons 78 icon logo

79. Two types of application image identifier: icon logo Icon are square; used in app menu Logo may be rectangular, used on Action bar Purpose: ‘brand’ your app Logos discouraged after Holo Application icons 79

80. API 11 is first API to support logos API 21 does not support logos (discouraged) Reason: title or logo, not both (wasteful) Current API in Studio: 21 only Application icons 80

81. APIs installed so far (only 21) Application icons 81

82. Similar in concept to a favicon in HTML Saved in.png file type (24-bit with alpha channel) Made in Photoshop/Fireworks http://openclipart.org Can be any size; should be square Make one icon and import Android will scale the image for the device Application icons 82

83. Good icons: square in shape works on white and black background limited colors not finely-detailed as descriptive as possible Application icons 83

84. Image folders for different resolutions Application icon created for all but ldpi Target sizes: ldpi: low dots per inch (32 x 32px) mdpi: normal dots per inch (48 x 48px) hdpi: high dots per inch (72 x 72px) xhdpi: (96 x 96px) xxhdpi: (144 x 144px) Application icons 84

85. The sizes: Application icons: 85 144px96px72px48px32px

86. Goal: use linear layout to display data Create new Project ‘FourSehir’ Lab: foursehir 86

87. Lab: foursehir 87

88. Lab: foursehir 88 http://stackoverflow.com/questions/9451755/what-is-an-android-window Action Bar Navigation Bar TextView EditText Button ImageView Activity ViewGroup Views Status Bar

89. Window: single surface (full activity, or dialog) has one view hierarchy Surface: holds pixels to be seen on the screen has a z-ordering View: (also called ‘controls’) UI element Lab: foursehir 89 http://stackoverflow.com/questions/9451755/what-is-an-android-window

90. Lab: foursehir 90 http://stackoverflow.com/questions/9451755/what-is-an-android-window Activity Window (draws user interface) Surface View hierarchy ViewGroup Views

91. View hierarchy: Lab: foursehir 91 Romain Guy and Chet Haase (Google), “Android Graphics and Animations”

92. Layouts: relative: ‘place anywhere’ linear: horizontal or vertical table: like an HTML table (horizontal and vertical) 92 Lab: foursehir

93. Add ‘foursehir’ icon ‘res’ folder: New – Image Asset Browse in ‘foursehir.png’ from folder 93 Lab: foursehir

94. Layout by default is ‘Relative’ Go to ‘Text’ Screen and overtype to fix Add ‘android: orientation=“vertical” 94 Lab: foursehir <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Sourcecode"> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Sourcecode"> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" />

95. Linear layout: one item per ‘row’ Placement: left, center, right Give the layout an id: 95 Lab: foursehir

96. Create TextViews by: add 3 Plain TextView using the Palette 96 Lab: foursehir

97. Create TextViews by: create ids from Text1-Text4 97 Lab: foursehir

98. 98 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" … tools:context=".Sourcecode" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text ="New Text" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text ="New Text" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text ="New Text" /> Lab: foursehir No relative position stated (none needed)

99. Define four different city names in ‘strings.xml’ 99 Foursehir Settings Alsancak Balcova Karsiyaka Konak Lab: foursehir

100. 100 Lab: foursehir Update string definition in ‘screen.xml’ Double-click on control: add name of string Save and check in emulator

101. SE 390: Software Engineering for Mobile Devices Week 3: Android Studio Copyright © Steven W. Johnson February 1, 2013

102. Similar to a text field in HTML5 HTML5: several ‘types’ of inputs Same true for android, but control defines Appearance is a bit different from HTML5 EditTexts 102

103. EditText code similar to other controls Difference: inputType Ems: character width of the control Width, height control size exterior size EditTexts 103 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:ems="10" android:id="@+id/editText2" />

104. Hint: describes what to place in input field Same as placeholder in HTML5 Text of hint: a string Use of hints: remove labels to save space Color of hint is gray Color changed with ‘textColorHint’ Hints 104 Your Name android:textColorHint="#FFFFCCCC" android:hint="Enter your name here"

105. Click meNo, click me Button is added to page in ‘screen.xml’ Similar in concept to an HTML button Programmed on the ‘Sourcecode.java’ page Known by unique id 105 Buttons <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/one" />

106. Width/height: use values constrain using layout element size: match_parent (stretch to fill outside element) wrap_content (shrink to fit inside content) 106 Click me Buttons <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/one" />

107. 107 Background colors <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@colors/background" Add background color to layout for ‘page’ Color defined in ‘colors.xml’ Use ‘android:background’ to apply

108. Sourcecode.java: holds java function(s) that run the site like ‘js’ file or source code in C separation of concerns: logic Form elements and Java: 108

109. HTML versus Java: HTML: text fields loosely typed Java: EditTexts are strictly typed Android forms require more defining Form elements and Java: 109

110. HTML text fields hold text Can use type=“number” as input mask Can insert a number into an Android/Java: text fields hold text; exclusively cannot place a number in a text field text fields serve as input masks Form elements and Java: 110

111. In HTML, form tags are: Android: very similar in concept to HTML (text itself) (“text field”) (fully programmable) Form elements and Java: 111

112. HTML: uses event listeners to manage events Android: same in Java; format is slightly different Form elements and Java: 112

113. Button: id is “name” of the button “text” defines text on button must be programmed to be clickable Form elements and Java: 113 <Button android:id="@+id/button“ style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editText2" android:layout_below="@+id/editText1" android:text="@string/add" />

114. Create a form with Java: Lab: EditText 114

115. Create a form with a button Use different types of EditText Add Hints Use Java to update data ‘onclick’ of a button Lab: EditText 115

116. Create new Project Lab: EditText 116

117. Add ‘edittext.png’ as the icon Right-click on ‘res’ – New – Image Asset Browse in file; modify as desired Lab: EditText 117

118. Change layout to Linear-vertical Remove the ‘hello world!’ TextView Lab: EditText 118

119. Create ‘colors.xml’ and define background Apply background color to page Right-click on ‘values’ and add ‘colors.xml’ Define color for background Lab: EditText 119

120. Apply background color to page Lab: EditText 120

121. Plan B: don’t use ‘colors.xml’ but ‘resources.xml’ Many ways to get the job done Lab: EditText 121

122. Add 4 EditTexts Name (with hint) Email (with hint) Age (with hint) Date Lab: EditText

123. EditTexts: inputType match_parent text ems ids Lab: EditText 123 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:text="Name" android:ems="10" android:id="@+id/editText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:ems="10" android:id="@+id/editText2" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="number" android:ems="10" android:id="@+id/editText3" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="date" android:ems="10" android:id="@+id/editText4" />

124. Fix the EditTexts: add strings for the hints Open ‘strings.xml’ Lab: EditText 124

125. Appearance of EditText controlled by theme border color background color margins (outside spacing) Lab: EditText 125

126. Open ‘dimens.xml’ Lab: EditText 126

127. Fix the EditTexts: set background to white (pre-defined color) change the id add hints as appropriate set bottom margin Lab: EditText 127

128. Lab: EditText

129. 129 Repeat for email, age, and date Use these ids: Emailfield Agefield Datefield

130. Lab: EditText 130 Repeat for email, age, and date Use these ids: Emailfield Agefield Datefield

131. Button (Click Me) Two empty EditTexts: name, age Button needs a string Lab: EditText 131

132. Add the button Lab: EditText 132

133. Two empty EditTexts: name, age Lab: EditText 133

134. EditTexts have a bottom margin id for programming Lab: EditText 134

135. Save and run in emulator Test your EditTexts to see how they work Age and Date fields will not accept text Lab: EditText 135

136. An update: set focus on initial field In this app, focus automatically sets Request focus in ‘screen.xml’: In ‘Sourcecode.java’ Lab: EditText 136 <EditText > Namefield.requestFocus();

137. EditText for name: Lab: EditText 137 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:ems="10" android:id="@+id/Namefield" android:layout_marginBottom="@dimen/bottom_margin" android:background="@android:color/white" android:hint="@string/name" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:ems="10" android:id="@+id/Namefield" android:layout_marginBottom="@dimen/bottom_margin" android:background="@android:color/white" android:hint="@string/name" >

138. Open ‘Sourcecode.java’ File calls the package for this project holds imports at top Holds a class ‘Sourcecode’, holds three methods Lab: EditText 138

139. Added imports shorten names for controls ‘android.widget.Button’ can now be ‘Button’ Need an import for each control added Come in grayed out (unused); that will change Lab: EditText 139 import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView;

140. Sourcecode.java: ‘Sourcecode’ is class name; file name Activity is the page (in Manifest) ‘screen’ is the file name of the page “use ‘screen.xml’ to make this activity” Lab: EditText 140 public class Sourcecode extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); }

141. Sourcecode.java: Give data types/names to form objects Lab: EditText 141 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); final EditText Namefield = (EditText) findViewById(R.id.Namefield); final EditText Agefield = (EditText) findViewById(R.id.Agefield); final TextView TheName = (TextView) findViewById(R.id.TheName); final TextView TheAge = (TextView) findViewById(R.id.TheAge); final Button button = (Button) findViewById(R.id.button); }

142. Sourcecode.java: assign variable ‘Namefield’ to represent textfield ‘Namefield’ Lab: EditText 142 final EditText Namefield = (EditText) findViewById(R.id.Namefield);

143. Sourcecode.java: Lab: EditText 143 final EditText Namefield = (EditText) findViewById(R.id.Namefield); final TextView TheName = (TextView) findViewById(R.id.TheName); final Button button = (Button) findViewById(R.id.button); Name of resource Casting (coming from) variable name cannot be changed data type get the data from datatype variable = datatype document.getElementById(“object”);

144. Sourcecode.java: Inside the ‘onCreate’ method Java onClick listener: what to do when button pressed Lab: EditText 144 button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { String NameValue = Namefield.getText().toString(); String AgeValue = Agefield.getText().toString(); TheName.setText(NameValue); TheAge.setText(AgeValue); } });

145. Sourcecode.java: ‘onclick’ sequence Lab: EditText 145 button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { String NameValue = Namefield.getText().toString(); TheName.setText(NameValue); } }); } get the data from this variable turn it into a string display variable In this area document.getElementById(‘TheName’).innerHTML = NameValue;

146. ‘onCreate’ method when done: Lab: EditText 146 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); EditText Namefield = (EditText) findViewById(R.id.Namefield); EditText Agefield = (EditText) findViewById(R.id.Agefield); TextView TheName = (TextView) findViewById(R.id.TheName); TextView TheAge = (TextView) findViewById(R.id.TheAge); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { String NameValue = Namefield.getText().toString(); String AgeValue = Agefield.getText().toString(); TheName.setText(NameValue); TheAge.setText(AgeValue); } }); }

147. The same idea in JavaScript: Lab: EditText 147 function swap(value) { document.getElementById(“receive”).value = value; } id=“send” id=“receive” Steve

148. Sourcecode.java: unneeded code Lab: EditText 148 import android.view.Menu; import android.view.MenuItem @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_sourcecode, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); }

149. Done! Save and run Lab: EditText 149

150. Break 150

151. 1. Colors.xml, styles.xml, and dimens.xml all hold: A.Structural information B.Presentation information C.Logical (programming) information Quiz: 151

152. 2. Strings.xml holds: A.Structural information B.Presentation information C.Logical (programming) information Quiz: 152

153. 3. An application icon: A.Is defined once and Android scales the image for its use B.Must be either 32, 48, 72, 96, or 144 pixels square C.Must have a clear background D.May be any shape E.Should be a square shape F.Will be known as “icon.png” G.Will be known as “ic_launcher” Quiz: 153

154. 4. An absolute layout: A.Is like a CSS absolute layout, everything is put in a defined place B.Requires the use of horizontal or vertical layout, and the ‘next’ item goes in the ‘next’ place C.Requires that all elements are placed in a grid/matrix D.Requires that all elements are either horizontally or vertically aligned to something Quiz: 154

155. 5. Inputs or text fields in HTML are called this in Android: A.Input B.Text Field C.EditText D.Field E.Entry Box Quiz: 155

156. 6. Any form widgets that are used in an application must also have: A.A value B.A color C.A matching ‘import’ in the.java file D.Begin with “$” Quiz: 156

157. 7. Devices and mobile operators: A.Devices and operators are always separate issues with no connection B.Operators may subsidize a device, choosing a device may also select the operator C.Devices are always manufactured by the operators and must be matched to work D.Devices may use proprietary software linking to an operator Quiz: 157

158. 8. Feature phones are found mainly in: A.Developed markets B.Emerging markets C.Technologically advanced markets D.Markets that are highly socialized Quiz: 158

159. 9. Browsers in mobile devices usually use this rendering engine: A.Trident B.SquirrelMonkey C.WebKit D.Presto Quiz: 159

160. 10. Android’s system is based in: A.Using the fastest, most efficient programming language B.Removing all presentation information from the programming language C.Using only open source systems D.Writing an application that runs most efficiently Quiz: 160

161. Quiz: 161 Action Bar Navigation Bar TextView EditText Button ImageView Status Bar view What are their names?

162. Package must include your full name Create the form First EditText is requestFocus Add the inputs ‘onSubmit’ Watch your data types!!!! You may use any number data type Assignment: Add three numbers 162 package com.steve.johnson.AddThreeNumbers;

163. Package must include your full name Assignment: Add three numbers 163

164. Input types: data types for the EditTexts Assignment: Add three numbers 164 Integer Float

165. Getting numbers out of “textboxes” ‘one’ describes the box name/id Assignment: Add three numbers 165 Android: Float value = Float.parseFloat(one.getText().toString()); JavaScript: value = parseFloat(document.getElementById(“one”).value);

166. Inserting calculated values into “textboxes” ‘one’ describes the box name/id Assignment: Add three numbers 166 String ans = sum.toString();//cast ‘sum’ as a string textfield.setText(ans);//print string to textfield Float sum = 12.546; String ans = sum.toString(); //case ‘sum’ as a string textfield.setText(String.valueOf(ans));//casts non-string as string.setText.getText 45

167. First number red Second number green Third number blue Answer: black Add a background color to page and use alpha Each EditText has white background Find/use a unique icon Assignment: Add three numbers 167

168. Assignment: Add three numbers 168

169. SE 390: Software Engineering for Mobile Devices Week 3: Android Studio Copyright © Steven W. Johnson February 1, 2013