mobile programming lecture 2 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Mobile Programming Lecture 2 PowerPoint Presentation
Download Presentation
Mobile Programming Lecture 2

play fullscreen
1 / 92

Mobile Programming Lecture 2

141 Views Download Presentation
Download Presentation

Mobile Programming Lecture 2

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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.