Mobile Programming Lecture 2

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 • TextView, EditText, Buttons, SeekBar, NumberPicker • Layouts • LinearLayout, RelativeLayout, TableLayout • 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 • use Forms or WYSIWYG "wizzy wig" instead

6. Widgets - Examples • TextViews • displays text in your Activity • EditText • allows the user to enter some text • Button • Can be pressed by the user to perform an action • CheckBox • RadioGroup • 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? • 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 • Drag and drop a widget onto the canvas • Right click on the widget and select "Edit ID..." • Using the XML editor • type the XML code needed for the widget that you want • 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" • @ tells the XML parser to expand the rest of the id string and treat it as an ID resource • + 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" • big enough to hold it's contents • "match_parent" • make the specified dimension as big as its parent • "fill_parent" • being deprecated, replaced by "match_parent"

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

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

15. Widgets - Gravity Android:gravitysets the gravity of the content of the View its used on. Android:layout_gravitysets 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 • e.g. "I agree to the terms and conditions" • android:checked • "true" or "false" • 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 • e.g. "Female" • android:checked • "true" or "false" • sets the default value of the RadioButton

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

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

22. Widgets - RatingBar Experimenting with the RatingBar widget. • android:numStars • e.g. "6" • android:rating • e.g. "3" • sets the default rating • android:stepSize • e.g. "2" • rating is set in groups of stepSize • 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. Layouts - LinearLayout (Vertical) A B

28. Layouts - LinearLayout (Vertical) A B C

29. Layouts - LinearLayout (Vertical) A B C D

30. Layouts - LinearLayout (Vertical) A B C D E

31. Layouts - LinearLayout • Nesting LinearLayouts can degrade performance • http://developer.android.com/training/improving-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 • Right click canvas • Change Layout... • Select a different Layout

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

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

35. Layouts - RelativeLayout A

36. Layouts - RelativeLayout A B

37. Layouts - RelativeLayout A B

38. Layouts - RelativeLayout B A

39. Layouts - RelativeLayout B A

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

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

42. Layouts - RelativeLayout B A 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/layout/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 B C TableRow D TableRow TableRow

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.