1. Mobile Programming Lecture 2 Layouts, Widgets, Toasts, and Event Handling

2. Lecture 1 Review How to edit XML files in Eclipse? What holds all elements (Views) that appear to the user in an Activity? When should you make changes to R.java? Give an example of a View (something in Android that extends View) How to add a new XML Layout file?

3. Today's Agenda Widgets o TextView, EditText, Buttons, SeekBar, NumberPicker Layouts o LinearLayout, RelativeLayout, TableLayout LinearLayoutRelativeLayoutTableLayout Toasts Event Handling

4. Widgets - Finding available Widgets To see some of the available Widgets, open one of the XML files in res/layout View the XML file as Graphical Layout using the tabs at the bottom of the window Select a category in the left pane if necessary (e.g. Form Widgets)

5. Widgets All of these widgets are subclasses of the View class (i.e., View is the base class for widgets) Try to avoid modifying XML files directly if you can o use Forms or WYSIWYG "wizzy wig" instead

6. Widgets - Examples TextViews o displays text in your Activity EditText o allows the user to enter some text Button o Can be pressed by the user to perform an action o CheckBox o RadioGroup o ToggleButton

7. Widgets - id's Id's are not required for each widget R.java stores the id's for your widgets. How does the id's set and get? o Remember, don't edit the R.java file!

8. Widgets - id's 2 ways to add a widget and set its android:id value Using the Graphical Layout editor o Drag and drop a widget onto the canvas o Right click on the widget and select "Edit ID..." Using the XML editor o type the XML code needed for the widget that you want o add android:id="@+id/id_name“ to its attributes

9. Widgets - id's Save your file, and the id will automatically be added R.java android:id="@+id/id_name" o @ tells the XML parser to expand the rest of the id string and treat it as an ID resource o + is what causes the id to be added to R.java

10. Widgets As you may have noticed, you can do this for attributes other than the android:id attribute You can explore your options by right clicking on anything on the canvas

11. Widgets - layout_height/width Always set the android:layout_height and android:layout_width attributes in the XML file for your widgets. NOT doing so is an easy way to get Force close Drag and drop onto the canvas so that you don't have to worry about this

12. Widgets - layout_height/width Values for android:layout_height and android:layout_width "wrap_content" o big enough to hold it's contents "match_parent" o make the specified dimension as big as its parent "fill_parent" o being deprecated, replaced by "match_parent"

13. Widgets - TextView We will experiment with some of the attributes for the TextView widget android:text o e.g. "Hello World!" android:textSize o e.g. "20dp" o android:textSize should be specified in dp (density-pixels), so that phones with different pixels-per-inch can be supported android:textStyle o e.g. "italic" android:textColor o e.g. #FFFFFF

14. Widgets - EditText Experimenting with the EditText widget. EditText is a subclass of TextView. android:hint o e.g. "Enter your name" android:inputType o textCapWords o textMultiLine o textPassword o textNumber android:gravity o e.g. "right”, “center_vertical”, “top”

15. Widgets - Gravity Android:gravity sets the gravity of the content of the View its used on. Android:layout_gravity sets the gravity of the View or Layout in its parent.

16. Widgets - Button Experimenting with the Button widget. Button is a subclass of TextView. android:inputType android:gravity

17. Widgets - CheckBox Experimenting with the CheckBox widget. CheckBox is a subclass of Button android:text o e.g. "I agree to the terms and conditions" android:checked o "true" or "false" o sets the default value of the CheckBox

18. Widgets - RadioGroup / RadioButton You usually want to drag a RadioGroup onto the canvas first It's easy to drag and drop or remove RadioButtons to the RadioGroup

19. Widgets - RadioButton Experimenting with the RadioButton widget. RadioButton is a subclass of Button android:text o e.g. "Female" android:checked o "true" or "false" o sets the default value of the RadioButton

20. Widgets - ToggleButton Experimenting with the ToggleButton widget. ToggleButton is a subclass of Button android:textOn o e.g. "GPS Enabled" o default value is "On" android:textOff o e.g. "GPS Disabled" o default value is "Off" android:checked o "true" or "false" o sets the default value of the ToggleButton

21. Widgets - SeekBar Experimenting with the SeekBar widget. android:max o e.g. "100" o you can't set the min, it's always 0 android:progress o e.g. "50" o sets the current position of the slider on the SeekBar

22. Widgets - RatingBar Experimenting with the RatingBar widget. android:numStars o e.g. "6" android:rating o e.g. "3" o sets the default rating android:stepSize o e.g. "2" o rating is set in groups of stepSize o default = "1"

23. Layouts You can add multiple Layouts to the canvas!

24. Layouts LinearLayout RelativeLayout TableLayout

25. Layouts - LinearLayout Review Only allows you to arrange widgets in a linear direction horizontally or vertically sometimes this is all you need!

26. Layouts - LinearLayout (Vertical) A

27. A B

28. A B C

29. A B C D

30. A B C D E

31. Layouts - LinearLayout Nesting LinearLayouts can degrade performance Nesting LinearLayouts can degrade performance http://developer.android.com/training/improvi ng-layouts/optimizing-layout.html For your homeworks and projects, only use LinearLayout when you have good reason to do so

32. Layouts Try not to waste too much time on editing the Layout in the XML editor If you want to switch from LinearLayout to another Layout o Right click canvas o Change Layout... o Select a different Layout

33. Layouts Want to add an entirely new UI? Right click your project > New > Android XML File o Resource Type: Layout o File: xml_file_name.xml o Root Element: e.g. RelativeLayout o This stores the new XML file in res/layout

34. Allows you to specify the position of one view B relative to another view A Layouts - RelativeLayout

35. A

36. A B

37. AB

38. B A

39. BA

40. A B Many possibilities! Unlike LinearLayout

41. Layouts - RelativeLayout A B Many possibilities! Unlike LinearLayout

42. Layouts - RelativeLayout A B Many possibilities! Unlike LinearLayout

43. Layouts - RelativeLayout Many more possibilities for arranging your widgets, unlike LinearLayout. RelativeLayout > LinearLayout http://developer.android.com/guide/topics/ui/l ayout/relative.html

44. Layouts - TableLayout Displays widgets in rows and columns similar to HTML tables Your TableLayout usually consists of TableRows, which lay their children out horizontally layout_width attribute of TableLayout's children are forced to be match_parent (even if you set it yourself) Likewise, layout_height of a TableRow is forced to be wrap_content

45. Layouts - TableLayout A D B TableRow C

46. Layouts - Oversized Layouts If you have some widgets that aren't being displayed on the screen, it could be because there isn't enough space on the screen to show them all You won't be able to scroll by default

47. Layouts - ScrollView To solve this: Add a ScrollView view to the root of your root layout (can be LinearLayout) Move your main Layout to root of the ScrollView (e.g. RelativeLayout)

48. Toast Finally, Java code Before looking at Toasts... let's look the autogenerated Java code. public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }

49. Toast Finally, Java code Before looking at Toasts... let's look the autogenerated Java code. public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } Main point of entry into your code. Called when the Activity is created.

50. Toast Finally, Java code Before looking at Toasts... let's look the autogenerated Java code. public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } Android needs to do who knows what before you can do anything.

51. Toast Finally, Java code Before looking at Toasts... let's look the autogenerated Java code. public class HelloWorldActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } Set the layout that you want to use. This one corresponds to res/layout/main.xml

52. Toast A notification message that pops up on the screen for a few seconds Add this to your code: Toast.makeText(this, "Message", Toast.LENGTH_SHORT).show();

53. Toast There are several reasons why your Toast won't show up on the screen One reason is that you probably forgot the.show() part of the Toast code.

54. Events - Event driven programming Android is event-driven The flow of code depends on events, unlike programs you normally write in C++ If you've written JavaScript code before then you've probably done event-driven programming

55. Events - examples events Call a method when the user o clicks a button o checks a checkbox o pulls back on and lets go of slingshot in Angry Birds Call a method when the system o receives an SMS o receives a phone call o completely loads a web page in the browser

56. Events - View Every View can react to the onClick event Layouts are also Views!

57. Let's react to a Button click event. Add a button to the canvas, and add the code in bold below to the button <Button android:text="Submit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="myEventHandler" /> Events - Button Click

58. Let's react to a Button click event. Add a button to the canvas, and add the code in bold below to the button <Button android:text="Submit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="myEventHandler" /> Events - Button Click This says to launch the myEvent method when this button is clicked

59. Let's react to a Button click event. Add the method below to your Java code public void myEventHandler(View v) { Toast.makeText( this, "You pressed a button!", Toast.LENGTH_LONG).show(); } Events - Button Click

60. Let's react to a Button click event. Add the method below to your Java code public void myEventHandler(View v) { Toast.makeText( this, "You pressed a button!", Toast.LENGTH_LONG).show(); } Events - Button Click Name of the method must match the android:onClick attribute in the XML file

61. Let's react to a Button click event. Add the method below to your Java code public void myEventHandler(View v) { Toast.makeText( this, "You pressed a button!", Toast.LENGTH_LONG).show(); } Events - Button Click Has to be public to be able to work. private may give you a Force close.

62. Let's react to a Button click event. Add the method below to your Java code public void myEventHandler(View v) { Toast.makeText( this, "You pressed a button!", Toast.LENGTH_LONG).show(); } Events - Button Click void for onClick. Not all event-handlers should return void, however. We'll see this soon

63. Let's react to a Button click event. Add the method below to your Java code public void myEventHandler(View v) { Toast.makeText( this, "You pressed a button!", Toast.LENGTH_LONG).show(); } Events - Button Click View parameter is required. You may use myEventHandler to handle multiple events.

64. Let's react to a Button click event. Add the method below to your Java code public void myEventHandler(View v) { Toast.makeText( this, "You pressed a button!", Toast.LENGTH_LONG).show(); } Events - Button Click How do you know which view has been clicked?

65. So far we've done most of our development using XML. Now we're going to really start looking at Java code. We need to be able to reference our views (specified in the XML file) using Java In the Graphical Layout, right click the Button and choose Edit Id... o set the ID to "submitButton" Events - How do we know which view has been clicked?

66. Add an EditText to the canvas Set the ID to "firstname" Set android:onClick="myEventHandler" Events - How do we know which view has been clicked?

67. public class HelloWorldActivity extends Activity { Button mSubmitButton; EditText mFirstName; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } Events - How do we know which view has been clicked?

68. public class HelloWorldActivity extends Activity { Button mSubmitButton; EditText mFirstName; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } Events - How do we know which view has been clicked? Add local fields for the corresponding widgets to reference them later

69. public class HelloWorldActivity extends Activity { Button mSubmitButton; EditText mFirstName; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } Events - How do we know which view has been clicked? Set the widgets. Remember we set the unique IDs for these widgets previously.

70. public class HelloWorldActivity extends Activity { Button mSubmitButton; EditText mFirstName; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } Events - How do we know which view has been clicked? Cast it to the correct View subclass, since findViewById returns a View.

71. public class HelloWorldActivity extends Activity { Button mSubmitButton; EditText mFirstName; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } Events - How do we know which view has been clicked? Now that you can reference the views in Java, take a look at the method for the views

72. public class HelloWorldActivity extends Activity { Button mSubmitButton; EditText mFirstName; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } Events - How do we know which view has been clicked? e.g. mSubmitButton.setText("submit"); mSubmitButton.getText(); This is important!

73. public void myEventHandler(View v) { Toast.makeText( this, "You pressed a button!", Toast.LENGTH_LONG).show(); } Events - How do we know which view has been clicked? How do you know which view has been clicked?

74. public void myEventHandler(View v) { if(v == mSubmitButton) { /* submitButton clicked */ } else if(v == mFirstName) { /* first name clicked */ } } Events - How do we know which view has been clicked?

75. public void myEventHandler(View v) { if(v == mSubmitButton) { /* submitButton clicked */ } else if(v == mFirstName) { /* first name clicked */ } } Events - How do we know which view has been clicked? Add this method to your class

76. You can also create a different method to handle events for different views if you want to. Events

77. Events - Handling Events There are 3 ways to incorporate EventListeners: 1.Specify the name of the method to handle the event in XML. We just did this. 1.Have your Activity implement an EventListener 1.Create an anonymous implementation of the EventListener

78. Events - Handling Events There are 3 ways to incorporate EventListeners: 1.Specify the name of the method to handle the event in XML. We just did this. 1.Have your Activity implement an EventListener 1.Create an anonymous implementation of the EventListener

79. Events - Implement EventListener public class HelloWorldActivity extends Activity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } You should remove the android:onClick attribute from the submitButton in the XML file

80. Events - Implement EventListener public class HelloWorldActivity extends Activity implements OnClickListener { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); mSubmitButton.setOnClickListener(this); } public void onClick(View v) {... }

81. Events - Implement EventListener public class HelloWorldActivity extends Activity implements OnClickListener { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); mSubmitButton.setOnClickListener(this); } public void onClick(View v) {... } What if I remove this? Try it.

82. Events - Handling Events There are 3 ways to incorporate EventListeners: 1.Specify the name of the method to handle the event in XML. We just did this. 1.Have your Activity implement an EventListener 1.Create an anonymous implementation of the EventListener

83. Events - Anonymous Listener public class HelloWorldActivity extends Activity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); }

84. Events - Anonymous Listener public class HelloWorldActivity extends Activity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); } Doesn't need to implement OnClickListener this time!

85. Events - Anonymous Listener public class HelloWorldActivity extends Activity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button mSubmitButton = (Button) findViewById(R.id.submitButton); EditText mFirstName = (EditText) findViewById(R.id.firstName); mSubmitButton.setOnClickListener( new OnClickListener() { public void onClick(View v) { /* submitButton clicked */ } }); }

86. Events - Anonymous Listener A fast way to set the onClickListener: after typing “mSubmitButton.” (including the dot) choose the “setOnClickListener” method from the list 1.in the parentheses, type “new “ (including the whitespace) 2.press Ctrl+Spacebar 3.select View.OnClickListener from the list 4.You may have to press Ctrl + o to import any missing packages 5.add a semicolon at the end of the autogenerated code 6.add your code to the auto-generated methods

87. Widgets - NumberPicker NumberPicker is in HoneyComb or later (Android 3.0) You may get Force close if you try to manipulate it in an earlier version

88. Widgets - NumberPicker For some reason, it doesn't seem like NumberPicker attributes can be set in XML...

89. Widgets - NumberPicker After adding NumberPicker with android:id="@+id/agePicker" to the XML file NumberPicker mAgePicker; public class HelloWorldActivity extends Activity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mAgePicker = (NumberPicker) findViewById(R.id.agePicker); mAgePicker.setMaxValue(120); mAgePicker.setMinValue(5); }

90. Widgets Most of a widget's XML attributes can be set and get programmatically Example widgetXML attributeset methodget method EditTextandroid:textsetText(String)getText() Buttonandroid:onClick setOnClickListener(On ClickListener) - CheckBoxandroid:checkedsetChecked()isChecked() SeekBarandroid:progresssetProgress()getProgress() SeekBarandroid:maxsetmax()getMax()

91. Homework 2 Homework 2 is posted on my website: http://ww2.cs.fsu.edu/~tian/mobileProgramming.php It is due on May 24 th, next Friday, in class. Please just demo to me.

92. References The Busy Coder's Guide to Android Development - Mark Murphy The Busy Coder's Guide to Android Development - Mark Murphy Android Developers The Mobile Lab at Florida State University