Presentation is loading. Please wait.

Presentation is loading. Please wait.

SE 390: Software Engineering for Mobile Devices Week 4: Layouts & Design Copyright © Steven W. Johnson February 1, 2013.

Similar presentations


Presentation on theme: "SE 390: Software Engineering for Mobile Devices Week 4: Layouts & Design Copyright © Steven W. Johnson February 1, 2013."— Presentation transcript:

1 SE 390: Software Engineering for Mobile Devices Week 4: Layouts & Design Copyright © Steven W. Johnson February 1, 2013

2 Focusing Principles of Design sp & dp Images in Android Appcelerator Titanium Week 4: 2

3 What will the future look like? The future is unknowable, but predictable Inspirational thought for the week: 3

4 Prediction tools: Extrapolating: tahmin etmek extend known into unknown Interpolating: katmak guess the middle based on ends Inspirational thought for the week: 4

5 Prediction tools: extrapolate interpolate Inspirational thought for the week: 5 The pastThe presentThe future..

6 Issac Asimov: the Foundation Trilogy (1942) Hari Seldon: ‘Psychohistory’ (mathematical sociology) Inspirational thought for the week: 6

7 What are the trends in computing? hardware is smaller hardware is faster approaching the limits of silicon-based chips multi-core chips quantum computing?? Inspirational thought for the week: 7

8 16-core CPUs will likely need new software software costs fall over time software is added into our daily lives distributed/cloud computing ubiquitous computing Inspirational thought for the week: 8

9 Computing progression: mainframe personal laptops tablets mobile personal Inspirational thought for the week: 9

10 Computing progression: 30 years from mainframe to desktop 20 years from desktop to laptop <5 years to iPod 10 years to iPhone 5 years to glasses Inspirational thought for the week: 10

11 Computers show up in unlikely places Inspirational thought for the week: 11

12 Apple is a trendsetter (increasingly Google) next frontiers: computer glasses (2014) Inspirational thought for the week: 12

13 Computing progression: next frontier: wearable watch computers (2015) Inspirational thought for the week: 13 Dick Tracy (1931)

14 What does this mean for you? Inspirational thought for the week: 14

15 Forms designed much like text Initial focus controlled by HTML: default movement is horizontal first Focusing issues 15

16 Android: answer not quite as clear Especially on small devices: vertical only ‘Finger-sized’ instead of ‘cursor-sized’ controls Set tab order programmatically in.xml Focusing issues 16 android:nextFocusLeft || Right || Down || Up android:nextFocusForward

17 Different forms of the same basic command Can be set in code or layout Code method a bit more powerful Focusing issues 17.xml: android:focusable="false".java: EditText ed =(EditText) findViewById(R.id.editText1); ed.setFocusable(false);.xml: android:focusableInTouchMode="true”.java: view.setFocusableInTouchMode(true);

18 Pixel: picture element Monitor resolution: number of pixels in display Monitor resolution & pixel density 18 Laptop: 15.6” diagonal 1,366 x ppi 48 pixels = ½” iPhone 5: 4” diagonal 1,136 x ppi 48 pixels = ⅛ ”

19 Pixel: picture element ‘color dot’: holds a single color Monitor resolution & pixel density ppi grid 1 96 ppi 3 96 ppi 3 72 ppi 3 72 x 96

20 iPhone versus desktop monitor 6 x 6 pixel red square on both grids 1/3 of size and 1/9 of area Monitor resolution & pixel density 20 Desktop 96 ppi grid iPhone 288 ppi grid 9 pixels ↔ 1 pixel

21 Android: four sizes to consider Pixel densities listed (“bucketed” densities): ldpi120px per inch mdpi160px per inch hdpi240px per inch xhdpi320px per inch Problem: varying sizes on different devices 21 Density Pixel (dp)

22 If measurement in pixels, different lengths Example: 320 pixel line defined in pixels: ldpi120px2.67” mdpi160px2” hdpi240px1.33” xhdpi320px1” Solution: use ‘dp’ (density pixels) 22 Density Pixel (dp)

23 Pseudo-measure (not real measures): px: a pixel or picture element sp: scale-independent pixel dp/dip: density-independent pixel sp/dp/dip are Android measures Draws the same shape regardless of pixel density Distance relative to 160 pixels per inch Density Pixel (dp) 23

24 dp: a consistent measurement system dp: considers pixel density of the rendering unit length (px) = ratio * dp dp = length (px) / ratio 160dp = 1” on all devices 80dp = ½” on all devices 24 SizeDensityUnit density/160dpLine length(px) ldpi120px1”120/ px mdpi160px1”160/ px hdpi240px1”240/ px xhdpi320px1”320/ px Density Pixel (dp)

25 Same idea as dp; sp for font size only Scalable (independent) pixels Scale is determined by end user Like ‘Zoom’ in browser 25 Scalable Pixel (sp) 20dp 20sp* sp*1.1

26 Based in 160 = 1” 20sp = 12px font size (96px) sp = px * ratio * scale (if used ) 26 Scalable Pixel (sp) Text on page zoom/view = 1 20sp (12px or 8 lines to inch) 320ppi device: 20 * 320/160 * 1 = 40px Text on page zoom/view = sp (12px or 8 lines to inch) 320ppi device: 20 * 320/160 * 1.2 = 48px Text on page

27 Design: the body language of information Structure information hung from Good design tells us: what comes next what’s important ranks (sıra) and prioritizes (öncelik) makes sense of the presentation Fundamentals of design 27

28 A communication: 71.84% of communication is non-verbal* Fundamentals of design 28

29 Short course: “Non-designers Design Book” contrast repetition alignment proximity Fundamentals of design 29

30 30 Computer Consultants (907) Steve Johnson 1234 AnyplaceJuneau, Alaska Alignment Steve Johnson Computer Consultants 1234 Anyplace Juneau, Alaska (907) Proximity Steve Johnson Computer Consultants 1234 Anyplace Juneau, Alaska (907) Contrast Steve Johnson Computer Consultants 1234 Anyplace Juneau, Alaska (907) Repetition Steve Johnson Computer Consultants 1234 Anyplace Juneau, Alaska (907) Steve Johnson 30

31 Longer course: “Elements of Graphic Design” unity gestalt space dominance hierarchy balance color Fundamentals of design 31

32 Moving from desktop to mobile does not eliminate or reduce the need to use design Rules of design don’t change Need for design does not change Only change: size of surface Fundamentals of design 32

33 People react to initial visual aesthetic Trinkets have no lasting value Things of importance: findability of content intuitive performance Fundamentals of design 33

34 Themes 34 Theme (tema): general appearance of the page Style: specific appearance of one thing on page Theme: a collection of style rules

35 Themes controlled in two places: styles.xmldefined for use AndroidManifest.xmlsent to app Themes 35 Design Window Application styles.xmlManifest

36 Themes 36 styles.xmlManifest Manifest and styles define a theme

37 Themes 37 styles.xmlManifest Change the application’s theme: change the parent in ‘styles’ change the theme in ‘Manifest’

38 Themes 38 Since version 2 (API 11), ‘Holo’ themes Version 5 (API 21) ‘requires’ use of AppCompat ‘ActionBarActivity’ requires use of ‘AppCompat’ ‘Sourcecode.java’ public class Sourcecode extends ActionBarActivity {

39 Themes 39 ‘ActionBarActivity’ requires use of ‘AppCompat’: Theme.AppCompat Theme.AppCompat.Light AppCompatAppCompat.Light AppCompat.Light. DarkActionBar My Application

40 Themes 40 How to get around ‘AppCompat’? Update ‘Sourcecode.java’ import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class Sourcecode extends ActionBarActivity { import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class Sourcecode extends Activity {

41 Themes 41 Moral of this story: interface theme control is for the interface theme is set in styles.xml (manually) theme must start with ‘Theme.AppCompat’ can customize (next week)

42 Images in Android: 42 In HTML, images rendered as encountered* holds width, height create bounding box Hello More text Even more text Hello More text

43 Images in Android: 43 Android a bit different, but idea is same ‘bounding box’ is replaced by ‘ImageView’ HTML: images placed in ‘images’ folder Android: images placed in ‘drawable’ folder Unlike HTML: images scale for device

44 Images in android: 44 Appropriate sizes: xxhdpi: 300 x 300 xhdpi: 200 x 200 (base size) hdpi: 150 x 150 tvdpi: 133 x 133 mdpi: 100 x 100 ldpi: 75 x75

45 Determines cost of a trip based on fuel cost Use a ‘holo’ theme; logo Add an image Lab: roadtrip 45

46 Build the project: Lab: roadtrip 46

47 Define the icon/logo: icon: in menu logo: on Action Bar ‘res’ folder – New – Image Asset Lab: roadtrip 47

48 import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class Sourcecode extends ActionBarActivity { Select a theme: “Theme.WithActionBar” Open ‘Sourcecode.java’ and change Activity Lab: roadtrip 48 import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class Sourcecode extends Activity {

49 Use “Theme.WithActionBar” Open ‘res/values/styles.xml’ and update parent Lab: roadtrip 49

50 Use “Theme.WithActionBar” Add directly to ‘AndroidManifest.xml’ Lab: roadtrip 50

51 Change on interface (‘screen.xml’): Lab: roadtrip 51

52 Add ‘map.png’ image to ‘drawable’: Copy ‘map.png’ in folder Rt. click on ‘drawable’ – Paste Lab: roadtrip 52

53 Delete ‘Hello world!’ (‘strings’ and ‘screen’) Open Palette to ‘Widgets’ Drag ‘ImageView’ to right edge of screen Lab: roadtrip 53

54 Images placed in file similar to HTML Embed image through ‘src’ in Properties Lab: roadtrip 54

55 55

56 Create strings in ‘strings.xml’: Lab: roadtrip 56 RoadTrip Settings Km? lt/100 km? YTL/liter? Trip Cost

57 Drag-drop 3 EditTexts (numbers with decimals) for distance for efficiency for price Drag-drop 1 button Drag-drop 1 EditText cost Lab: roadtrip 57

58 Define EditText width to 160dp (1”) Add ‘EditTextsize’ to ‘dimens.xml’ Drag-drop button (click in) Lab: roadtrip dp

59 For the EditTexts: width: EditTextsize id: EditDistance (hintdistance) EditFuel (hintfuel) EditPrice (hintprice) EditCost requestFocus on EditDistance Lab: roadtrip 59

60 Lab: roadtrip

61 Update text on the button Select button, update in properties

62 EditCost is an answer; not data User cannot enter this EditText Update ‘Properties’ (click twice) Interface is done Lab: roadtrip 62

63 Ready to program, open ‘Sourcecode.java’ Add imports for the controls Lab: roadtrip 63 import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.widget.EditText; import android.widget.Button;

64 Watch your names/naming rules Lab: roadtrip 64 public class Sourcecode extends Activity { float distance = 0;//initialize variables float fuel = 0; float price = 0; float solution = 0;

65 Controls given variable names in method Lab: roadtrip 65 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); final EditText Distance = (EditText) findViewById(R.id.EditDistance); final EditText Fuel = (EditText) findViewById(R.id.EditFuel); final EditText Price = (EditText) findViewById(R.id.EditPrice); final Button Cost = (Button) findViewById(R.id.ButtonCost); final EditText EditCost = (EditText) findViewById(R.id.EditCost);

66 Method to calculate cost of trip (in ‘onCreate’) Data extracted from EditTexts Calculation made Answer displayed using 2 decimal places Lab: roadtrip 66 button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { distance = Float.parseFloat(Distance.getText().toString()); fuel = Float.parseFloat(Fuel.getText().toString()); price = Float.parseFloat(Price.getText().toString()); solution = distance/100 * fuel * price; EditCost.setText(String.format("%.2f", solution)); } });

67 Done? Or are we? Lab: roadtrip 67

68 What we haven’t done: what if a EditText is “0” or null? how does that affect Java? the application can never crash Java is strictly typed; doesn’t like nulls 3 * 0 is okay 7 / null is big-time crash 7 / 0 is ‘infinity’ If any EditText null, app crashes Lab: roadtrip 68

69 Test text in EditText (string) for null Test float saved from the EditText for null My solution: test the string ‘trim’ removes white space (shouldn’t be possible) Fix all methods to not crash Lab: calculator 69 NumberOne.getText().toString().trim().length() == 0EditDistance.getText().toString().length() == 0

70 Break 70

71 A four-function calculator with 2 inputs Use a layout, but which one? Linear Relative Table Use background image Separate buttons Lab: calculator 71

72 Use a layout, but which one? Linearrow or column (can be split) Relativedrag-and-drop Tablerows and columns Because of mixed rows/columns: relative Lab: calculator 72

73 Problem from assignment: too close together Solution: add margin to EditText Lab: calculator 73 android:layout_marginTop="30dp" // 1/8”

74 Initial element added Second element located based on first element Lab: calculator 74 android:layout_alignParentLeft="true" android:layout_marginTop=“15dp" android:layout_marginTop="30dp"

76 Use the correct EditText Integer float signed Validate the entry before doing math ‘NaN’ or worse is never an acceptable answer Use toast as messaging (not covered yet) Lab: calculator 76

77 Create a new Project Lab: calculator 77

78 Add the icon Rt. Click on ‘res’ – New – Image Asset Lab: calculator 78

79 To do: set theme to ‘AppCompat.Light’ Change title to ‘Fred Flintstone Calculator’ add 2 EditText (number) fields add 4 buttons (for each operation) add 1 ‘Answer’ TextView write the function to calculate (4 functions) change the background Lab: calculator 79

80 set Theme to ‘AppCompat.Light’ Open ‘values/styles.xml’; change as shown Lab: calculator 80

81 Result: gray Action Bar instead of black Change Design Window to match Lab: calculator 81

82 Change the title, open ‘strings.xml’ Delete ‘Hello world!’ (‘strings’ and ‘screen’) Add a dimen for 15dp margin spacing Lab: calculator 82 Calculator Hello world! Settings Fred Flintstone Calculator Settings 15dp

83 Change the title, open ‘strings.xml’ Lab: calculator 83

84 Create the page: drag-drop first EditText into page position second 15dp below open ‘text view’ of ‘screen’ and update Lab: calculator 84

85 EditTexts have width ems=“10” Ems is the width of “M” in the chosen font face ems: sets EditText width to number of characters ems: not max width or maxchar Lab: calculator 85 android:maxLength="6"

86 Add four operation buttons: open ‘strings.xml’ and make signs Add Small Buttons to page add string labels to buttons Rt click button – Edit Text Lab: calculator * /

87 Buttons are ‘match_content’ Lab: calculator 87

88 Add last EditText MarginTop of ‘spacing’ Lab: calculator 88

89 First EditText: background: white (system) id: NumberOne Second EditText: background: white (system) id: NumberTwo Last EditText: background: white (system) id: Answer Lab: calculator 89

90 Update ids on buttons: id: Add id: Subtract id: Multiply id: Divide Lab: calculator 90

91 Android adds “+” to all ids “+” tells Android to generate an id in R.java Many “+” do not hurt, not enough is problem R.java: gen/com/R.java Lab: calculator 91

92 R.java: (resources.java) listing of all resources used by the app purpose: index of resources; quick access Lab: calculator 92 public static final class color { public static final int gray=0x7f040001; public static final int white=0x7f040000; } public static final class drawable { public static final int backimage=0x7f020000; public static final int ic_launcher=0x7f020001; } public static final class id { public static final int Add=0x7f090002; public static final int Answer=0x7f090006; public static final int Divide=0x7f090003; public static final int Multiply=0x7f090004; public static final int NumberOne=0x7f090000; } Hex numbers are Integers used to load real data final EditText Distance = (EditText) findViewById(R.id.Divide);

93 Memory addresses by category for each element Lab: calculator 93

94 Fix the EditTexts Lab: calculator 94

95 Add background to RelativeLayout Copy image Rt. Click on ‘drawable’ Paste Insert into ‘drawable’ Lab: calculator 95

96 Background added Lab: calculator

97 Lab: calculator 97

98 Fix ‘Sourcecode’: give variable names to controls update class with four methods determine inserted value of ‘Answer’ Lab: calculator 98

99 Imports: four provided automatically menus not used in this assignment add imports for other elements used in form Imports: ‘button’ instead of ‘android.widget.button’ Lab: calculator 99 import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.EditText; import android.widget.Button;

100 Inside of the class: initialize editTexts, buttons, variables Lab: calculator 100 public class Sourcecode extends ActionBarActivity { float numone = 0; float numtwo = 0; float solution = 0;

101 Inside the ‘onCreate’ function: Assign variable names in Java to objects Lab: calculator 101 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); //layout/screen.xml final EditText NumberOne = (EditText) findViewById(R.id.NumberOne); final EditText NumberTwo = (EditText) findViewById(R.id.NumberTwo); final EditText Answer = (EditText) findViewById(R.id.Answer); final Button Add = (Button) findViewById(R.id.Add); final Button Subtract = (Button) findViewById(R.id.Subtract); final Button Multiply = (Button) findViewById(R.id.Multiply); final Button Divide = (Button) findViewById(R.id.Divide);

102 ‘onCreate’ part of activity lifecycle: Lab: calculator 102 onCreate(Bundle savedInstanceState) { onStart() onResume() onPause() onStop() onRestart() onDestroy()

103 Below the variable definitions: if Add is pressed (add variables) ‘setText’ is literal, data must be text ‘answer’ must be a string Lab: calculator 103 Add.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { numone = Float.parseFloat(NumberOne.getText().toString()); numtwo = Float.parseFloat(NumberTwo.getText().toString()); solution = numone + numtwo; Answer.setText(String.valueOf(solution)); } }); Subtract.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { numone = Float.parseFloat(NumberOne.getText().toString()); numtwo = Float.parseFloat(NumberTwo.getText().toString()); solution = numone - numtwo; Answer.setText(String.valueOf(solution)); } }); Multiply.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { numone = Float.parseFloat(NumberOne.getText().toString()); numtwo = Float.parseFloat(NumberTwo.getText().toString()); solution = numone * numtwo; Answer.setText(String.valueOf(solution)); } }); Divide.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { numone = Float.parseFloat(NumberOne.getText().toString()); numtwo = Float.parseFloat(NumberTwo.getText().toString()); solution = numone / numtwo; Answer.setText(String.valueOf(solution)); } });

104 Why all the data type conversions? “numberDecimal” is like regular expression describes characters allowed into the EditText Not a data type; an input mask Lab: calculator 104 android:inputType="numberDecimal|numberSigned" numone = Float.parseFloat(NumOne.getText().toString());

105 Last two methods are for menus (none used): comment out or remove if removed, comment out/remove import Lab: calculator 105 /* public boolean onCreateOptionsMenu(Menu menu) { *Inflate the menu; this adds items to the action bar if it is present. *getMenuInflater().inflate(R.menu.ffcalculator, menu); return true; *} */

106 Last, clean your project (Build – Clean) Done! Or are we? Lab: calculator 106

107 Same problem with 0 and nulls Add code to ‘crashproof’ this application Lab: roadtrip 107

108 1. A density independent pixel (dp): A.Defines a shape by the number of pixels used B.Defines a shape by the surface area of the screen it consumes C.Defines a shape that may vary from device to device D.Defines a shape that will be the same size on all devices E.Is an absolute measure F.Is a relative measure Quiz: 108

109 2. A shape that is 200dp x 200dp is what size: A.2” x 2” B.1” x 1” C.1.25” x 1.25” D.Unknown, it depends on the monitor resolution Quiz: 109

110 3. The difference between sp and dp is: A.sp sizes can be modified by the device B.sp is used in Android, but dp is used in Apple C.dp is used on text while sp is used on other widgets D.sp is based in 160 ppi while dp is based in 100 ppi E.sp is used on text while dp is used on other widgets Quiz: 110

111 4. The pixel density (per inch) in mobile devices: A.Is usually higher than ‘traditional’ computers B.Is usually lower than ‘traditional’ computers C.Is usually the same as ‘traditional’ computers Quiz: 111

112 5. Initial focus in Android is set by: A. B. C. D. Quiz: 112

113 5. The tab order (movement from EditText) can be defined in: A.The ‘moveables’ file B.The ‘.java’ class file C.AndroidManifest D.The layout file (‘screen’) Quiz: 113

114 6. The inputType on an EditText: A.Sets the data type for the EditText B.Filters text from the EditText but does not set its data type Quiz: 114 android:inputType="numberDecimal"

115 7. ‘Bucketed densities’: A.Represent the density range of mobile devices B.Are made up of ldpi, mdpi, hdpi, xhdpi C.Use the resolutions of 120ppi, 160ppi, 240ppi, and 320ppi D.Are defined/located in the ‘res’ folder Quiz: 115

116 8. R.java: A.Holds character definitions B.Holds data type and other information about resources C.Holds indexes to the different resources used by a file D.Holds ‘includes’ and other library functions used by.java Quiz: 116

117 SE 390: Software Engineering for Mobile Devices Week 4: Layouts & Design Copyright © Steven W. Johnson February 1, 2013

118 APIs for Mobile Context-sensitive Menus Images in Android Labs: Indeterminate timer Tic-Tac-Toe Assignment: Program Tic-Tac-Toe Week 4 labs: 118

119 Application frameworks a.k.a. API: Used to make games, browsers, cameras, etc. Flash Lite (Adobe) Windows Mobile Android SDK Cocoa Touch (iPhone/iPod) Xcode (objective C – iOS) WebKit APIs for mobile: 119

120 X-platform toolkits for mobile: Rhomobile Rhodes Nitobi PhoneGap Appcelerator Titanium Ansca Corona APIs for mobile: 120

121 Appcelerator Titanium (2008) supports: iPhone (2009) iPad (2010) Android (2009) Blackberry (2010) Tizen (2013) APIs for mobile: 121 must be built on osX machine (could be virtual)

122 Jury is out on their performance Works for simple things; not complex Problem is translating Context used is part of definition Limited when calling database and graphics APIs for mobile: 122 yüz = face 100 swim

123 Make this interface Choices on layout: relative table Center a group Lab: tic-tac-toe 123 X X X O O O

124 Square EditTexts: 90dp x 90dp Text inside EditText: 70sp (gravity: center) Could use: Buttons TextViews Lab: tic-tac-toe 124 X X X O O O

125 Could use ‘horizontal rules’ as dividers Possibilities: style rule or 9-patch Lab: tic-tac-toe 125 X X X O O O

126 Build the project: Lab: tic-tac-toe 126

127 Add the icon/logo: Rt. Click on ‘res’ – New – Image Asset Lab: tic-tac-toe 127

128 Theme: Theme.Holo Lab: tic-tac-toe 128 //Sourcecode import android.app. Activity; public class Sourcecode extends Activity {

129 Delete ‘Hello World’ (‘string’ and ‘screen’) Add string for ‘blank’ ‘X’ and ‘O’ added with Java Lab: tic-tac-toe 129 TicTacToe Settings

130 Go to ‘dimens.xml’ and add these definitions: Lab: tic-tac-toe dp 90dp 70sp 0dp 2dp 20dp 30sp

131 Android table just like HTML table: Table must be rectangular in shape Lab: tic-tac-toe 131 HTMLAndroid Table Row column

132 Need 3 rows and 3 columns Change layout to ‘Table’ Replace ‘Relative’ with this code below: “moral equivalent of a tag” Lab: tic-tac-toe

133 Game board: made up of 3 rows each having 3 ‘columns’ all holding the same control (TextView) I Copy & Paste Plan: create one TextView and copy create one and copy Lab: tic-tac-toe 133

134 Add 3 ‘TableRow’ to table Drag-drop ‘TableRow’ from Palette to Component Tree Lab: tic-tac-toe 134

135 Add 3 ‘TableRow’ to table Drag-drop ‘TableRow’ from Palette to Component Tree Lab: tic-tac-toe 135

136 Click on EditText and update: layout_width: layout_height: layout_margin: background: white (system) focusable: false (2 clicks) gravity: center (continued) Lab: tic-tac-toe 136

137 Click on EditText and update: id: box1 inputType: text maxLength = 1 padding_bottom: text: textSize: Lab: tic-tac-toe 137

138 Code for a completed square Order is not important (not all in Properties) Lab: tic-tac-toe 138

140 Copy, paste into copy in component tree paste in white open area click on ‘TableLayout’ to show where to paste When done, rename the ids to correct value Lab: tic-tac-toe 140

141 Center align the table; collapse on EditTexts Lab: tic-tac-toe 141

142 Add TextView below the game board: Result of game announced here Click-drag ‘TextView’ to ‘TableLayout’ Lab: tic-tac-toe 142

143 Add a TextView and update to match: Lab: tic-tac-toe 143

145 Break 145

146 Completed tic-tac-toe game: Assignment: tic-tac-toe 146

147 Program the interface. Xs and Os: Add the correct character ‘onClick’ (start with “X”) change background color use desaturated color (pastel) for “X” use different pastel color for “O” Assignment: tic-tac-toe 147 X O

148 Determine if click means “X” or “O” if “X” setText to “X” add ‘X’ background color if “O” setText to “O” add ‘O’ background color Assignment: tic-tac-toe 148 three.setBackgroundColor(0xFFFF0000); //aarrggbb eight.setText(String.valueOf(variable)); eight.setText(“X”);

149 If winner, change winning cells to vivid color Change ‘losing’ cells to a shade of gray Announce below game: “Winner is __” If no winner, say “Game is draw” Assignment: tic tac toe 149 X X O O X

150 Nothing new in coding: just a lot of it Forms of ‘if’ Assignment: tic tac toe 150 one.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { if(one.getText().toString().equals("")) {//strings if(gameover==0) {//numbers

151 My method to solve: one method for each EditText one method to determine if game over lots of copy and paste with editing Assignment: tic tac toe 151

152 SE 390: Software Engineering for Mobile Devices Week 4: Layouts & Design Copyright © Steven W. Johnson February 1, 2013


Download ppt "SE 390: Software Engineering for Mobile Devices Week 4: Layouts & Design Copyright © Steven W. Johnson February 1, 2013."

Similar presentations


Ads by Google