1. SE 390: Software Engineering for Mobile Devices Week 7: Messaging & Toast Copyright © Steven W. Johnson February 1, 2013

2. Exception handling User interaction/messaging: dialogs, alerts, dialog alarms popups toast ImageButtons Action bar Course review Week 10: 2

3. Can’t assume full attention on mobile devices Interface and messaging must be even better Exception handling 3

4. Throwable hierarchy Exception handling 4 http://www.beingjavaguys.com

5. Many languages read left-to-right (LTR language) Some don’t Problem: aligning by left and right 5 Text direction The quick brown fox All good men الثعلب البني السريع جميع الرجال جيد The quick brown fox All good men الثعلب البني السريع جميع الرجال جيد

6. ‘Align left’ assume use of LTR languages ‘Align start’ is more general Starting with 4.2 (API 17), align on ‘start’ For us (LTR language people): start == left end == right Both should be stated for <17 After 16, should use ‘start’ and ‘end’ 6 Text direction

7. Declare in manifest to support RTL mirroring 7 Text direction

8. Android gives several methods to communicate: dialogs pop-ups toasts alerts Many similarities with HTML 8 Dialogs

9. Dialogs, Alerts, DialogAlerts: like confirm boxes may turn on services (Internet connection) Popups: a branch in the workflow captures a single selection from user no buttons; merely (single) selection choices Toasts: like timed alert boxes lightweight feedback in a timed popup Exception handling 9

10. Create an Android app. with a popup Done using ‘inline styles’ Lab: popups 10 http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

11. Create the project: Lab: popups 11

12. Project will use ‘Material’ style (API 21 required): Lab: popups 12

13. Open ‘styles.xml’ and set the theme Lab: popups 13

14. Add three TextViews to middle of screen one ‘Medium Text’ (move to center of screen) two ‘Plain TextView’ Lab: popups 14 http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

15. Open ‘strings.xml’ Delete ‘Hello world!’ text on ‘screen.xml’ Create three strings for TextViews Lab: popups 15 Popups Settings Popup Menu Example Touch here to see the menu http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

16. Create ‘colors.xml’ Define three colors: Rt. click on ‘values’ folder – New –Resource File Lab: popups 16 http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

17. Create ‘colors.xml’ Define three colors: Rt. click on ‘values’ folder – New –Resource File Lab: popups 17 #FF000000 #FF0000FF #FF808080 http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

18. Open ‘screen.xml’ First ‘MediumText’ properties: id: ‘Title’ text: ‘@string/titleText’ textColor: ‘@color/black’ textSize: 20sp Lab: popups 18 http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

19. Second line of text (textView2): layout _margin: 20dp (all) id: ‘Anchor’ text: ‘@string/bodyText’ textColor: ‘@color/blue’ textSize:16sp Lab: popups 19 http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

20. Third TextView is the popup: layout_margin: 20dp id: ‘Selection’ text: ‘initialText’ (goes invisible because empty) textColor: ‘@color/gray’ textSize: 40sp Lab: popups 20 http://www.techrepublic.com/blog/app-builder/working-with-androids-popupmenu-class/2396

21. public class Sourcecode extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); } Edit ‘public class’ as follows: Lab: popups 21 public class Sourcecode extends Activity implements OnClickListener, OnMenuItemClickListener { private PopupMenu popupMenu; private final static int ONE = 1; private final static int TWO = 2; private final static int THREE = 3; @Override

22. Open ‘Sourcecode.java’ add these imports: Lab: popups 22 import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.PopupMenu; import android.widget.PopupMenu.OnMenuItemClickListener; import android.widget.TextView;

23. Add popup menus: Lab: popups 23 setContentView(R.layout.screen); popupMenu = new PopupMenu(this, findViewById(R.id.Anchor)); popupMenu.getMenu().add(Menu.NONE, ONE, Menu.NONE, "Item 1"); popupMenu.getMenu().add(Menu.NONE, TWO, Menu.NONE, "Item 2"); popupMenu.getMenu().add(Menu.NONE, THREE, Menu.NONE, "Item 3"); popupMenu.setOnMenuItemClickListener(this); findViewById(R.id.Anchor).setOnClickListener(this); }

24. Lab: popups 24 findViewById(R.id.anchor).setOnClickListener(this); } @Override public void onClick(View v) { popupMenu.show(); } public boolean onMenuItemClick(MenuItem item) { TextView tv = (TextView) findViewById(R.id.Selection); switch (item.getItemId()) { case ONE: tv.setText("ONE"); break; case TWO: tv.setText("TWO"); break; case THREE: tv.setText("THREE"); break; } return false; }

25. 25 package com.steve.johnson.popups; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.PopupMenu; import android.widget.PopupMenu.OnMenuItemClickListener; import android.widget.TextView; public class Sourcecode extends Activity implements OnClickListener, OnMenuItemClickListener { private PopupMenu popupMenu; private final static int ONE = 1; private final static int TWO = 2; private final static int THREE = 3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); popupMenu = new PopupMenu(this, findViewById(R.id.anchor)); popupMenu.getMenu().add(Menu.NONE, ONE, Menu.NONE, "Item 1"); popupMenu.getMenu().add(Menu.NONE, TWO, Menu.NONE, "Item 2"); popupMenu.getMenu().add(Menu.NONE, THREE, Menu.NONE, "Item 3"); popupMenu.setOnMenuItemClickListener(this); findViewById(R.id.anchor).setOnClickListener(this); } @Override public void onClick(View v) { popupMenu.show(); } public boolean onMenuItemClick(MenuItem item) { TextView tv = (TextView) findViewById(R.id.selection); switch (item.getItemId()) { case ONE: tv.setText("ONE"); break; case TWO: tv.setText("TWO"); break; case THREE: tv.setText("THREE"); break; } return false; }

26. Final output: Lab: popups 26 switch (item.getItemId()) { case ONE: tv.setText("ONE"); break; case TWO: tv.setText("TWO"); break; case THREE: tv.setText("THREE"); break; }

27. Create a web page that displays a toast Toast: a small, timed message Lab: toasts 27

28. Create the project Lab: toasts 28

29. Add the icon (toast.png) Rt. Click on ‘res’ folder – New – Image Asset Lab: toasts 29

30. Delete the ‘Hello world!’ TextView Select ‘Theme.Holo.Wallpaper’ Open ‘AndroidManifest’ and change theme Minimum SDK >10 Lab: toasts 30 parent="android:style/Theme.Holo.Wallpaper"

31. Update ‘Sourcecode to display ‘Holo’ themes Lab: toasts 31 import android.app.Activity; public class Sourcecode extends Activity {

32. Delete ‘Hello world’ Open ‘strings.xml’ and add ‘buttonText’ Add small button to ‘screen.xml’ (top center) Lab: toasts 32 Toasts Settings Show Text

33. Update the button: layout_width: ‘match_parent’ id: ‘ButtonToast’ text: ‘@strings/buttonText’ Lab: toasts 33

34. Appearance so far: button uses a semi-transparent color contrast between button, page not good create ‘colors.xml’ Lab: toasts 34

35. Rt. Click on ‘values’ folder: New – values Resource Lab: toasts 35

36. Update ‘colors’ with two color definitions: Update button: background: ‘@color/buttongray’ textColor: ‘@color/black’ Lab: toasts 36 #FFD0D0C6 #FF000000

37. Open Sourcecode.java Update the imports Add below the ‘public class’: Lab: toasts 37 import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.Toast; public class CodePage extends Activity { private Button ButtonToast;

38. LENGTH_LONG or LENGTH_SHORT Lab: toasts 38 setContentView(R.layout.screen);//already there button = (Button) findViewById(R.id.ButtonToast); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { Toast.makeText(getApplicationContext(), "Button is clicked", Toast.LENGTH_LONG).show(); } });

39. Delete two unneeded methods at bottom of class Delete imports for those methods Lab: toasts 39

40. Completed lab: Lab: toasts 40

41. A yes/no situation; a confirm box Associated with programming flow Requires end user decision 41 Dialogs

42. End-user communication (error messages) Combination of alert and confirm box Programmable Text is totally editable 42 Dialogs

43. Dialog design: optional title bar/region content area action buttons (OK, Cancel) 43 Dialogs

44. Minimum version: Honeycomb (11-13) Single selection, limited dialog box Making selection advances workflow No explicit buttons (OK, Cancel) Popup dismissed/closed ‘onBlur’ Popups 44

45. Non-modal dialog method without losing focus Lightweight, timed feedback Information only, no response or selection Consider ‘Notification’ if response needed 45 Toasts

46. Problem for end user due to: miss the message not be able to read it quickly enough may be very distracting If it’s important enough to display, display it 46 Toasts

47. Title needs to mimic content of box Include universally-understood icons Messaging 47

48. Create an alert/dialog Very similar to a confirm box in HTML Allows for one question and a choice Lab: alerts 48 http://http://www.mkyong.com/android/android-alert-dialog-example/

49. Create ‘Alerts’ project: Lab: alerts 49

50. Add ‘Alerts’ icon: Rt. click on ‘res’ folder – New – Image Asset Browse in ‘alerts.png’ Lab: alerts 50

51. ‘screen.xml’: remove ‘Hello world’ TextView and string add a button to the page id: buttonAlert Lab: alerts 51 http://http://www.mkyong.com/android/android-alert-dialog-example/

52. strings.xml: Name: ‘buttonLabel’ Value: ‘Show Alert Box’ Add the text to the button Lab: alerts 52 http://http://www.mkyong.com/android/android-alert-dialog-example/

53. strings.xml: screen.xml: Lab: alerts 53 http://http://www.mkyong.com/android/android-alert-dialog-example/ <Button android:id="@+id/buttonAlert" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/buttonLabel" /> Alerts Settings Show Alert Box

54. Sourcecode.java needs classes imported: Lab: alerts 54 import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; http://http://www.mkyong.com/android/android-alert-dialog-example/

55. Add the new code (android code provided): Lab: alerts 55 public class Sourcecode extends ActionBarActivity { final Context context = this; Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); button = (Button) findViewById(R.id.buttonAlert); http://http://www.mkyong.com/android/android-alert-dialog-example/

56. The code: Lab: alerts 56 button.setOnClickListener(new OnClickListener() { Override public void onClick(View arg0) { AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(context); alertDialogBuilder.setTitle("Sire, the hounds"); alertDialogBuilder.setMessage("Release the hounds?").setCancelable(false)//'esc' closes.setPositiveButton("Release",new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog,int id) { Sourcecode.this.finish(); } }).setNegativeButton("Heel",new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog,int id) { dialog.cancel(); } }); AlertDialog alertDialog = alertDialogBuilder.create(); alertDialog.show(); } }); }

57. Done. Clean and save. Lab: alerts 57 http://http://www.mkyong.com/android/android-alert-dialog-example/

58. Break 58

59. Discussed last week Similar in concept to a menu in HTML A view that displays a set of values (array): lists menus arrays drop-down/pull-down menu Spinner 59

60. Create a dialog/alert box with a list: Lab: alert with list 60

61. Create the project: Lab: alert with list 61

62. Add the icon: rt. Click on ‘res’ folder – New – Image Asset browse in ‘alertlist.png’ Lab: alert with list 62

63. Delete the ‘Hello world!’ text Open ‘strings.xml’; add button text Lab: alert with list 63 Alert With List Click Me for the List Settings

64. Delete the ‘Hello world!’ text Add a button: layout_width: ‘match_parent’ text: ‘@string/buttonText’ id: ‘ListButton’ Lab: alert with list 64 <Button android:id="@+id/button" android:layout_width=“match_parent" android:layout_height="wrap_content" android:text="@string/buttonText" />

65. List created in Sourcecode.java Update imports in ‘Sourcecode’: Lab: alert with list 65 import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.app.AlertDialog; import android.content.DialogInterface; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;

66. Modify the class (‘Sourcecode’): Lab: alert with list 66 public class Sourcecode extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); } public class Sourcecode extends Activity implements OnClickListener { Button buttonClick; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); }

67. Add this code (Sourcecode.java) Lab: alert with list 67 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); buttonClick = (Button) findViewById(R.id.ListButton); buttonClick.setOnClickListener(this); }

68. Add function for ‘onClick’ Delete ‘public Boolean’ methods (2) Lab: alert with list 68 @Override public void onClick(View v) { final CharSequence[] items = { "Ali", "Bahar", "Canan" }; AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("Make your Selection"); builder.setItems(items, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int item) { // Do something with the selection buttonClick.setText(items[item]); } }); AlertDialog alert = builder.create(); alert.show(); }

69. Open list, click on list items Lab: alert with list 69

70. Button that is based on an image Size of button = size of image ( NOT ==) Can modify the button size with styles Can set a background color for the button no text (2 foreground elements) ; only an image Sounds like a specialty item; not a good idea ImageButton 70

71. Create a new project Lab: ImageButton 71

72. Update the application icon: Rt. Click on ‘res’ folder – New – Image Asset Lab: ImageButton 72

73. Add images to ‘drawable’ folder: im1.png – clear background im2.png – colored background Copy the image Rt. Click on ‘drawable’ and paste Lab: ImageButton 73 http://www.mkyong.com/android/android-imagebutton-example/

74. Add images to ‘drawable’ folder: Lab: ImageButton 74

75. Open ‘screen.xml’ and remove ‘Hello world’ Add an ‘imagebutton’ widget: src: ‘@drawable/im1.png’ Add a second ‘imagebutton’ widget: src: ‘@drawable/im2.png Lab: ImageButton 75

76. Imagebuttons: Lab: ImageButton 76

77. Sourcecode: Lab: ImageButton 77 import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class Sourcecode extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); } @Override public boolean onCreateOptionsMenu(Menu menu) { } @Override public boolean onOptionsItemSelected(MenuItem item) { } public class Sourcecode extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); }

78. Sourcecode: Lab: ImageButton 78 import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.ImageButton; import android.widget.Toast; import android.view.View; import android.view.View.OnClickListener;

79. public class Sourcecode extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); } Sourcecode: Lab: ImageButton 79 public class Sourcecode extends ActionBarActivity { ImageButton imageButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); addListenerOnButton(); } //may need to re-paste in the imports

80. Create method ‘addListenerOnButton’: Lab: ImageButton 80 public void addListenerOnButton() { imageButton = (ImageButton) findViewById(R.id.imageButton); imageButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { Toast.makeText(Sourcecode.this,"ImageButton is clicked!", Toast.LENGTH_SHORT).show(); } }); }

81. Other attributes for ImageButton: contentDescription: like ‘alt’ in HTML, but not a tooltip only visible when image is not visible should be added for accessibility Lab: ImageButton 81

82. What about ‘onClick’ attribute? imageButton in ‘screen’ can be ‘onClick’ Method name given, no () or ; Lab: ImageButton 82 <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageButton" android:src="@drawable/im1" android:onClick="addListenerOnButton" />

83. Changes to ‘Sourcecode’: significantly reduces Java Lab: ImageButton 83 public class Sourcecode extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); } public void addListenerOnButton(View v) { Toast.makeText(Sourcecode.this, "ImageButton is clicked!", Toast.LENGTH_SHORT).show(); }

84. Program the second button using ‘onClick’ The toast/message is to have your name in it Lab: ImageButton 84

85. SE 390: Software Engineering for Mobile Devices Week 7: Messaging & Toast Copyright © Steven W. Johnson February 1, 2013

86. First introduced in Android 3.0 (v 11) Replaced the Title Bar Main job: provide consistent navigation in apps Customizing is limited Can be turned on or off; best practice: on Themes without an action bar can’t be turned on Action Bar : 86 AppCompat.Light AppCompat.Light.NoActionBar

87. 87 Lab: action bar II Must use minimum API of 7 (version 2.1) API 11+ Action Bar included if Theme.Holo used Device usage by API: API 11: 87.3% API 15 (Version 4) use level: 87.9% API 16 (version 4.1) use level: 78.3%

88. Two basic themes: white (light) black Can be edited just like anything else Action Bar : 88

89. Can be turned on or off Java: actionBar.hide() actionBarShow(); Action Bar : 89 false

90. Methods to manage Action Bar display: Action Bar Modify a theme: parent="android:Theme.Light"//same as 'with' parent="android:Theme.Light.NoActionBar" parent="android:Theme.Light.WithActionBar" Set directly: false In Java: Actionbar actionBar = getActionBar(); actionBar.show(); actionBar.hide();

91. Anatomy of the Action Bar: Action Bar http://www.androidhive.info/2013/11/android-working-with-action-bar/ 91

92. Action bar components defined in Manifest Logo versus icon: menu uses icon only activity can use logo or icon; logo first icon must be square; logo can be any shape Action Bar <application android:allowBackup="true" android:icon="@drawable/ic_launcher" //robot image android:logo="@drawable/logo" android:label="@string/app_name" //'Action Bar' android:theme="@style/AppTheme" >Main theme definition 92

93. API 21: no default XML logo/icon on action bar Can apply either in Java Action Bar <application android:allowBackup="true" android:icon="@drawable/ic_launcher" //robot image android:logo="@drawable/logo" android:label="@string/app_name" //'Action Bar' android:theme="@style/AppTheme" >Main theme definition 93

94. Action Bar icon logo 94 Icon is square; logo can be rectangular

95. 95 Action Bar Action bar menu is programmable Create ‘actionbar.xml’ in ‘menu’ folder; call in Like ‘background.xml’ in ‘drawable’ drawable menu values

96. Action items defined in ‘actionbar.xml’ (menu) Identify as many as needed Somewhat similar to ‘screen’ in layout No known wizard to add action items 96 Action Bar http://www.androidhive.info/2013/11/android-working-with-action-bar/ //'actionbar.xml' <item android:id="@+id/action_search" android:icon="@drawable/phone" android:title="@string/phone" android:showAsAction="ifRoom"/>

97. Build this project with action bar: 97 Lab: Action Bar http://www.androidhive.info/2013/11/android-working-with-action-bar/

98. Create the project: 98 Lab: Action Bar

99. Add the icon: Rt. Click on ‘res’ folder – New – Image Asset 99 Lab: Action Bar

100. A decision to make: AppCompat or not Slightly different code and components required AppCompat is built into the wizard AppCompat does not allow logos* 100 Lab: Action Bar http://www.androidhive.info/2013/11/android-working-with-action-bar/

101. A decision to make: AppCompat or not 101 Lab: Action Bar apply plugin: 'com.android.application‘//build.gradle android { compileSdkVersion 21 buildToolsVersion "21.1.2" defaultConfig { applicationId "com.example.steve.actionbar" minSdkVersion 15 targetSdkVersion 21 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:21.0.3' }

102. Controls rendering in IDE (not a true solution): 102 Lab: Action Bar

103. First run through: using ‘Holo’ theme Delete ‘Hello world’ from ‘screen.xml’ Add these strings: 103 Lab: Action Bar Action Bar Settings İşBank Para Çekmek Call Us Questions? Borsa Send Message Scratch Pad Reset Page

104. 104 Lab: Action Bar File – Settings – Default Settings

105. Add these image files: Copy/paste into ‘drawable’ folder: phone question quote logo mail pencil reload 105 Lab: Action Bar

106. Create background.xml (gradient) Rt. click on ‘drawable’ – New – Resource File 106 Lab: Action Bar

107. Create background.xml (gradient) Rt. click on ‘drawable’ – New – Resource File Remove ‘selector’ element (need ‘shape’ instead) Lab: Action Bar <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#002C65" android:endColor="#002C65" android:type="linear" android:angle="270" android:centerColor="#0262C4" /> <stroke android:width="1dp" android:color="#ffaaaaaa" />

108. ‘Sourcecode’ to use non-AppCompat theme 108 Lab: Action Bar import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class Sourcecode extends Activity {

109. Apply background gradient to Action Bar 109 Lab: Action Bar @style/theBar @drawable/background White text

110. 110 Lab: Action Bar Change out the icon for logo: icon is for menu logo is for Action Bar changes in emulator only Add the logo in ‘AndroidManifest.xml’ <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" android:logo="@drawable/isbanklogo" >

111. 111 Lab: Action Bar Build the menu Before: code goes in ‘screen’ method (layout) Now: code goes in ‘menu’ method (2 nd method) @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; }

112. 112 Lab: Action Bar import android.app.ActionBar; public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.sourcecode, menu); ActionBar actionBar = getActionBar(); actionBar.setTitle("İşBank"); actionBar.setSubtitle("Para Çekmek"); Add title, subtitle (‘Sourcecode.java’) Android Studio defaults to UTF-8 Add: Action Bar code first, then import import android.app.ActionBar; public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.sourcecode, menu); ActionBar actionBar = getActionBar(); actionBar.setTitle(R.string.title); actionBar.setSubtitle(R.string.subtitle);

113. 113 Lab: Action Bar Display services on the action bar: service represented by an icon (in ‘drawables’) create a ‘actionbar.xml’ file in ‘menu’ folder place the icon in the menu menu setting: ‘if room available’ actionbar.xml placed in ‘menu’ folder

114. 114 Lab: Action Bar Rt. click ‘menu’ folder – New – ‘Resource File’

115. 115 Lab: Action Bar <item android:id="@+id/phone" xlmns:android = “look here for the definition” defines the namespace being used; unique ‘showAsAction’ requires different namespace

116. 116 Lab: Action Bar ‘android’: attributes are defined within the OS No ‘android’: attribute defined within resources of project <item android:id="@+id/phone"

117. 117 Lab: Action Bar //actionbar.xml Needs two ‘xmlns’ namespace/libraries: 1 st : icon, title 2 nd : ‘showAsAction’ //actionbar.xml <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:bar="http://schemas.android.com/apk/res-auto" >

118. 118 Lab: Action Bar //actionbar.xml <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:bar="http://schemas.android.com/apk/res-auto" > <item android:id="@+id/phone" android:icon="@drawable/phone" android:title="@string/phone" bar:showAsAction="ifRoom"/> <item android:id="@+id/question" android:icon="@drawable/question" android:title="@string/question" bar:showAsAction="ifRoom"/> <item android:id="@+id/quote" android:icon="@drawable/quote" android:title="@string/quote" bar:showAsAction="ifRoom"/> Defıne Action Bar icons (if room available) Wizard doesn’t appear to support drag-and-drop

119. 119 <item android:id="@+id/phone" android:icon="@drawable/phone" android:title="@string/phone" bar:showAsAction="ifRoom"/> <item android:id="@+id/question" android:icon="@drawable/question" android:title="@string/question" bar:showAsAction="ifRoom"/> <item android:id="@+id/quote" android:icon="@drawable/quote" android:title="@string/quote" bar:showAsAction="ifRoom"/> <item android:id="@+id/mail" android:icon="@drawable/mail" android:title="@string/mail" bar:showAsAction="ifRoom"/> <item android:id="@+id/pencil" android:icon="@drawable/pencil" android:title="@string/pencil" bar:showAsAction="ifRoom"/> <item android:id="@+id/reload" android:icon="@drawable/pencil" android:title="@string/pencil" bar:showAsAction="ifRoom"/>

120. showAsAction: (defines as an action button) ifRoom never always withText collapseActionView 120 Lab: Action Bar http://www.androidhive.info/2013/11/android-working-with-action-bar/ <item android:id="@+id/action_search" android:icon="@drawable/phone" android:title="@string/phone" bar:showAsAction="ifRoom"/>

121. 121 Lab: Action Bar <item android:id="@+id/phone" android:icon="@drawable/phone" android:title="@string/phone" bar:showAsAction="ifRoom"/> Each service has a ‘tooltip’ (title) phone question quote Defined in ‘strings.xml’

122. 122 Lab: Action Bar Completed ‘menu’ method Inflate = populate = build import android.view.MenuInflater; @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); ActionBar actionBar = getActionBar(); actionBar.setTitle(R.string.title); actionBar.setSubtitle(R.string.subtitle); MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.actionbar, menu); return super.onCreateOptionsMenu(menu); return true; //delete this }

123. 123 Lab: Action Bar Overflow button only shows if needed

124. 124 Lab: Action Bar What we did: replace default action bar with custom (menu) default in ‘R.menu.menu_sourcecode’ <menu xmlns:android="http://schemas.android.com/apk/res/android" //menu_sourcecode.xml xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".Sourcecode"> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" app:showAsAction="never" /> @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; }

125. 125 @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 onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.actionbar, menu); return true; } //actionbar.xml <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:bar="http://schemas.android.com/apk/res-auto" > <item android:id="@+id/phone" android:icon="@drawable/phone" android:title="@string/phone" bar:showAsAction="ifRoom"/> <item android:id="@+id/question" android:icon="@drawable/question" android:title="@string/question" bar:showAsAction="ifRoom"/> <item android:id="@+id/quote" android:icon="@drawable/quote" android:title="@string/quote" bar:showAsAction="ifRoom"/>

126. 126 Lab: Action Bar What we haven’t done: program the menu items

127. 127 Lab: Action Bar Three methods in class ‘Sourcecode’: public class Sourcecode extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { setContentView(R.layout.screen); } public boolean onCreateOptionsMenu(Menu menu) { return super.onCreateOptionsMenu(menu); } public boolean onOptionsItemSelected(MenuItem item) { return super.onOptionsItemSelected(item); }

128. 128 Lab: Action Bar Three methods in the class ‘Sourcecode’: screen layout in #1 menu organization in #2 menu item click management in #3

129. 129 Lab: Action Bar Build – Clean Project Done! Action bar varies based on device

130. 130 In AppCompat Changes to the steps: Leave the class and imports alone http://blog.stylingandroid.com/actionbarcompat-part-2/ import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; public class Sourcecode extends ActionBarActivity {

131. 131 In AppCompat @style/theBar @drawable/background Doesn’t require ‘android’ before BarStyle Reason: AppCompat defined within project resources This means ‘use actionBarStyle’ defined within AppCompat Library http://blog.stylingandroid.com/actionbarcomp at-part-2/

132. 132 In AppCompat @style/theBar @drawable/background Styles are different: doesn’t require ‘android’ before BarStyle AppCompat defined within project resources

133. 133 In AppCompat import android.support.v7.app.ActionBarActivity; public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; adds items to the action bar if it is present. android.support.v7.app.ActionBar actionBar = getSupportActionBar(); getSupportActionBar().setDisplayShowHomeEnabled(true); actionBar.setLogo(R.drawable.isbanklogo); getSupportActionBar().setDisplayUseLogoEnabled(true); actionBar.setTitle(R.string.title); actionBar.setSubtitle(R.string.subtitle); getMenuInflater().inflate(R.menu.actionbar, menu); return super.onCreateOptionsMenu(menu); } Sourcecode menu:

134. Break 134

135. Mobile devices are a game changer: combine computers and telephones helps merge entertainment into one industry personal and wearable computing make information mobile causes structural changes in economy ubiquitous Course review 135

136. Disruptive technologies: change in industrial formation change in way we do things causes structural changes in economy bring significant benefits to consumers make life both better and less expensive Course review 136

137. Mail Telephone (1877) Radio (1907) Television (1925) Computers (1940s) 137 Course review

138. Jobs made mobile devices easy to understand, use Put together: app store web browser touch screen/device 138 http://appleinsider.com/articles/13/10/04/behind-the-scenes-details-reveal-steve-jobs-first-iphone-announcement Disruptive technologies & mass medias

139. Apple, the computer company 139 system software hardware Consumer applications Manufacturer http://www.macrumors.com/2011/04/10/steve-jobs-authorized-biography-coming-in-2012/ Course review

140. “PC” computer systems: hardware built by many manufacturers ISO standardized components OS: Windows CPU: Intel Applications: many 140 hardware Consumer applications Manufacturer Apple

141. May 6, 1998: iMac introduced 233 mHz CPU 4 GB HDD 141 January 9, 2007: iPhone introduced 412 mHz CPU 4 GB HDD September 12, 2016: ???? introduced http://techbeasts.com Course review

142. Proprietary vs Open source vs Licensed: proprietary: created and used by one company source code is company secret licensed: developed, used by different another source code is company secret open source: developed cooperatively source code available and modifiable Course review 142

143. Five generations of mobile devices: brick candy bar feature phone smartphone touch phone Course review 143

144. Main components the same: HD RAM CPU OS Main components are also very different 144 Course review

145. “Thoughts on Flash” (Jobs: 2010) mobile content needs to be: ‘full web’ (can be used by everyone) ‘open’ technologies (accessible data/content) reliability, security, performance battery life touch 145 Jobs, S. (2010, April). Thoughts on Flash. Retrieved from http://www.apple.com/hotnews/thoughts-on-flash/ Course review

146. Android: founded (2003) by: Andy Rubin (Danger) Rich Miner (Wildfire Communications) Nick Sears (T-Mobile) Chris White (WebTV) 5 major versions Current API: 21 (Lollipop) 146 http://www.ebellking.com Course review

147. (Android) Programming paradigms (çekim örneği): separation of concerns modular systems DRY programming (don’t repeat yourself) coupling (loose) Course review 147

148. Android: 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 (replaces Dalvik) 148 Java ART Course review

149. Android laid out using ‘activities’ (web pages) Activities have a layout: RelativeLayout LinearLayout (horizontal or vertical) TableLayout Course review 149

150. Table layouts like HTML table initial position: layout_column span: number of cells to group Course review 150 row column0column1column2 column3column4 android:layout_column="2" android:layout_span="3"

151. Separation of concerns: same idea as modularity in programming position, content, appearance of content all defined separately from each other connected for display Course review 151

152. Separation of concerns: structure presentation logic 152 screen.xml Sourcecode.java res/values/*.xml strings.xml Course review

153. HTML: styles grouped by selector Android: styles grouped using common theme 153 Course review h1 { color size dimen } string1 string2 string3 dimen1 dimen2 dimen3 color1 color2 color3

154. Strings: (res/values) defined in ‘strings.xml’ called by ‘name’ 154 Course review Steve <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/myname" />

155. Colors: (res/values) defined in ‘colors.xml’ called by ‘name’ 155 Course review #6080 <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="@color/green" />

156. Colors always in hex (or system color) #aarrggbb #argb #rrggbb Most efficient system: #aarrggbb Gradients can be used in place of colors 156 Course review

157. Dimens: 157 Course review 120dp <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="@dimen/textwidth" android:textColor="@color/green" />

158. Dimens: wrap_contentsize controlled by content match_parentsize set by parent (100%) 158 Course review Click me <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/one" />

159. dp or dip: device independent pixel 160dp per inch sets lengths based on ppi of the device sp: scalable pixel for text only 159 Course review

160. 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 160 SizeDensityUnit density/160dpLine length(px) ldpi120px1”120/160160120px mdpi160px1”160/160160160px hdpi240px1”240/160160240px xhdpi320px1”320/160160320px Course review

161. sp is same idea as dp; sp for font size only Scalable (independent) pixels Scale is determined by end user Like ‘Zoom’ in browser 161 20dp 20sp*1.0 1.1 20sp*1.1 Course review

162. Droid typeface: developed by Open Handset Alliance in 2007 Droid pro (purchase) 162 http://en.wikipedia.org/wiki/Droid_fonts android:typeface="normal | sans | serif | monospace" Course review

163. Roboto font family is sans-serif font developed in 2012 now used by: Ice Cream Sandwich Google+ Google Maps 163 android:fontFamily="sans-serif" // roboto regular android:fontFamily="sans-serif-light" // roboto light android:fontFamily="sans-serif-condensed" // roboto condensed android:fontFamily="sans-serif-thin" // roboto thin (android 4.2) Course review

164. Apple versus Android: Android: Android Studio Java/XML Apple: Xcode Objective C Swift Course review 164

165. Appcelerator Titanium (2008) supports: iPhone (2009) iPad (2010) Android (2009) Blackberry (2010) Tizen (2013) 165 Course review must be built on osX machine (could be virtual)

166. 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 166 yüz = face 100 swim Course review

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

168. Images and image descriptions are ‘drawable’.png is preferred image file type can be inserted using ‘imageView’ saved with filename.ext; used with filename Course review 168 res drawable file.png gradient.xml

169. Gradients are saved in ‘drawable’ one shape definition per file definition called by filename Course review 169 res drawable file.png gradient.xml

170. 9-patch images: can be used most anywhere; background have defined ‘stretchable’ regions is double-extended:.9.png 170 Course review

171. 171 4 lines determine how image scales top, left determine scalable areas bottom, right determine where content can go http://adilsoomro.blogspot.com/2012/11/android-how-to-use-9-patch-png.html

172. 172 Themes and styles are same basic idea: themes are styles applied to the application styles are applied to views, single use in combination, same as.css for HTML Theme defined in ‘styles.xml’ Course review

173. Styles ‘cascade’ with themes: theme styles: weakest type of style style written in ‘styles’: like embedded styles styles written in object: like inline rules 173 theme.xml styles.xml screen.xml CSS terminology: External Embedded inline Course review

174. ‘Sourcecode’ holds a class, which hold 3 methods code for page content (onClick, etc) define menus code for menu management (onClick, etc) Course review 174

175. 175 imports (shortened control names) public class Sourcecode extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { setContentView(R.layout.screen); data type and variable naming of controls methods affecting the overall activity } public boolean onCreateOptionsMenu(Menu menu) { return super.onCreateOptionsMenu(menu); data type and variable naming for menus } public boolean onOptionsItemSelected(MenuItem item) { return super.onOptionsItemSelected(item); methods affecting menu appearance } }

176. Imports: shorten ‘android.view.EditText to ‘EditText’ each type of control has an import Course review 176 import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.widget.EditText; import android.widget.Button; import android.widget.TextView; import android.view.View;

177. Data typing views Course review 177 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); EditText Amount = (EditText) findViewById(R.id.Amount); EditText People = (EditText) findViewById(R.id.People); TextView Each = (TextView) findViewById(R.id.textView1); Button btnSplit = (Button) findViewById(R.id.btnSplit); <TextView android:id="@+id/textView1" android:textColor="@color/green" />

178. Course review: 178 public static final class string {//bottom of R.java public static final int action_settings=0x7f060001; public static final int app_name=0x7f060000; public static final int hello_world=0x7f060002; } public static final class style { /** Base application theme, dependent on API level. This theme is replaced by AppBaseTheme from res/values-vXX/styles.xml on newer devices. Theme customizations available in newer API levels can go in res/values-vXX/styles.xml, while customizations related to backward-compatibility can go here. Base application theme for API 11+. This theme completely replaces AppBaseTheme from res/values/styles.xml on API 11+ devices. API 14 theme customizations can go here. */ public static final int AppBaseTheme=0x7f070000; /** Application theme. */ public static final int AppTheme=0x7f070001; public static final int gameGrid=0x7f070003; public static final int headline=0x7f070002; }

179. onClick listeners in ‘Sourcecode’ Course review 179 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); Amount = (EditText) findViewById(R.id.Amount); People = (EditText) findViewById(R.id.People); Each = (TextView) findViewById(R.id.Each); btnSplit = (Button) findViewById(R.id.btnSplit); btnSplit.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { if (Amount.getText().length() > 0 && People.getText().length() > 0) { Float eachPersonPays = Float.parseFloat(Amount.getText().toString()) / Integer.parseInt(People.getText().toString()); Each.setText(String.valueOf(eachPersonPays)); } }); }

180. Create this working calculator as an application Colors, shapes, details up to you Due with Week 9 Assignment: 16-button calculator 180 1 87 654 32 0 9 - + / *.

181. SE 390: Software Engineering for Mobile Devices Week 7: Messaging & Toast Copyright © Steven W. Johnson February 1, 2013