[Android] Basic Widgets and Containers

899 views

Published on

1. Using XML-Based Layouts
1.1 Why Use XML-Based Layouts?
1.2 What Does It Look Like?
1.3 We Attach These to the Java . . . How?
2. Employing Basic Widgets
2.1 TextView
2.2 Button
2.3 Images
2.4 Images (cont.)
2.5 EditText
2.6 EditText (cont.)
2.7 CheckBox
2.8 RadioButton
2.9 RadioGroup
3. Working with Containers
3.1 LinearLayout
3.2 LinearLayout (cont.)
3.3 RelativeLayout
3.4 RelativeLayout (cont.)
3.5 TableLayout
3.6 TableLayout (cont.)
3.7 GridLayout (Android 4.0 or higher)
3.8 GridLayout
3.9 FrameLayout
3.10 ScrollView
4. Exercise 2

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
899
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

[Android] Basic Widgets and Containers

  1. 1. Android Programming Lesson 2Basic Widgets and Containers NGUYEN The Linh
  2. 2. Android ProgrammingContents 1 Using XML-Based Layouts 2 Employing Basic Widgets 3 Working with Containers 4 Exercise 2 2
  3. 3. Android ProgrammingBasic Widgets and Containers Using XML-Based Layouts 3
  4. 4. Android ProgrammingUsing XML-Based Layouts What is an XML-Based Layout? 4
  5. 5. Android ProgrammingUsing XML-Based Layouts Why Use XML-Based Layouts?  Most everything you do using XML layout files can be achieved through Java code.  To assist in the creation of tools for view definition, such as a GUI builder in an IDE like Eclipse or a dedicated Android GUI designer like DroidDraw.  XML forms a nice middle ground between something that is easy for tool-writers to use and easy for programmers to work with by hand as needed.  XML as a GUI definition format is becoming more commonplace. 5
  6. 6. Android ProgrammingUsing XML-Based Layouts What Does it Look Like? 6
  7. 7. Android ProgrammingUsing XML-Based Layouts What Does It Look Like?  The root element needs to declare the Android XML namespace: • xmlns:android="http://schemas.android.com/apk/res/android"  All other elements will be children of the root and will inherit that namespace declaration.  Because we want to reference this button from our Java code, we need to give it an identifier via the android:id attribute.  android:layout_width and android:layout_height tell Android to have the button’s width and height fill the “parent” 7
  8. 8. Android ProgrammingUsing XML-Based Layouts We Attach These to the Java . . . How?  All you need is one statement in your activity’s onCreate() callback to use that layout: • setContentView(R.layout.main)  All of the layouts are accessible under R.layout, keyed by the base name of the layout file—main.xml results in R.layout.main.  To access our identified widgets, use findViewById().  That numeric identifier was generated by Android in the R class as R.id.something (where something is the specific widget you are seeking). 8
  9. 9. Android ProgrammingBasic Widgets and Containers Employing Basic Widgets 9
  10. 10. Android ProgrammingEmploying Basic Widgets TextView  Text not editable directly by users. Typically, they are used to identify adjacent widgets.  Properties of relevance for TextView • android:text to set the value of the label itself. • android:typeface to set the typeface to use for the label (e.g., monospace) • android:textStyle to indicate that the typeface should be made bold (bold), italic (italic), or bold and italic (bold italic). • android:textColor to set the color of the label’s text, in RGB hex format (e.g., #FF0000 for red). 10
  11. 11. Android ProgrammingEmploying Basic Widgets Button  Button is a subclass of TextView, so everything discussed in the preceding section in terms of formatting the face of the button still holds. Images  Android has two widgets to help you embed images in your activities: ImageView and ImageButton.  As the names suggest, they are image-based analogues to TextView and Button, respectively. 11
  12. 12. Android ProgrammingEmploying Basic Widgets Images (cont.)  Properties of relevance for ImageView and ImageButton • android:src to specify what picture to use.  ImageButton, a subclass of ImageView, mixes in the standard Button behaviors, for responding to clicks. EditText  EditText is a subclass of the TextView. 12
  13. 13. Android ProgrammingEmploying Basic Widgets EditText (cont.)  Along with the standard TextView properties (e.g., android:textStyle), EditText has many others that will be useful for you in constructing fields, including: • android:autoText to control if the field should provide automatic spelling assistance • android:capitalize to control if the field should automatically capitalize the first letter of entered text (e.g., first name, city) • android:digits to configure the field to accept only certain digits • android:singleLine to control if the field is for single-line input or multiple- line input 13
  14. 14. Android ProgrammingEmploying Basic Widgets EditText (cont.)  Beyond those, you can configure fields to use specialized input methods, such as android:numeric for numeric-only input, android:password for shrouded password input, and android:phoneNumber for entering in phone numbers. CheckBox  It has TextView as an ancestor, so you can use TextView properties like android:textColor to format the widget. 14
  15. 15. Android ProgrammingEmploying Basic Widgets CheckBox (cont.)  It has TextView as an ancestor, so you can use TextView properties like android:textColor to format the widget.  Within Java, you can invoke: • isChecked() to determine if the checkbox has been checked • setChecked() to force the checkbox into a checked or unchecked state • toggle() to toggle the checkbox as if the user checked it 15
  16. 16. Android ProgrammingEmploying Basic Widgets RadioButton  Like CheckBox, RadioButton inherits from Button, which in turn inherits from TextView. Hence, all the standard TextView properties for font face, style, color, cont., are available for controlling the look of radio buttons.  Similarly, you can call isChecked() on a RadioButton to see if it is selected, toggle() to select it, and so on, like you can with a CheckBox. 16
  17. 17. Android ProgrammingEmploying Basic Widgets RadioGroup  The RadioGroup indicates a set of radio buttons whose state is tied, meaning only one button out of the group can be selected at any time.  Within Java, you can invoke: • check() to check a specific radio button via its ID (e.g., group.check(R.id.radio1)) • clearCheck() to clear all radio buttons, so none in the group are checked • getCheckedRadioButtonId() to get the ID of the currently-checked radio button (or -1 if none are checked) 17
  18. 18. Android ProgrammingBasic Widgets and Containers Working with Containers 18
  19. 19. Android ProgrammingWorking with Containers LinearLayout  As noted already, LinearLayout is a box model—widgets or child containers are lined up in a column or row, one after the next.  Concepts and Properties • android:orientation to set the value to be horizontal for a row or vertical for a column. • android:layout_width: wrap_content or match_parrent • android:layout_height: wrap_content or match_parrent • android:layout_weight: ? 19
  20. 20. Android ProgrammingWorking with Containers 20
  21. 21. Android ProgrammingWorking with Containers 21
  22. 22. Android ProgrammingWorking with Containers 22
  23. 23. Android ProgrammingWorking with Containers 23
  24. 24. Android ProgrammingWorking with Containers 24
  25. 25. Android ProgrammingWorking with Containers LinearLayout (cont.)  Concepts and Properties (cont.) • android:gravity to set the gravity of the content of the View its used on. • android:layout_gravity to set the gravity of the View or Layout in its parent • android:padding? • android:layout_margin? 25
  26. 26. Android ProgrammingWorking with Containers  Notes 2  1 is android:paddingLeft of A and android:layout_marginLeft of B  2 is android:paddingTop of A and android:layout_marginTop of B B  3 is android:paddingRight of A and1 3 android:layout_marginRight of B  4 is android:paddingBottom of A and android:layout_marginBottom 4 of BA 26
  27. 27. Android ProgrammingWorking with Containers LinearLayout (cont.)  Example 2.1 • Example 2.1.xml 27
  28. 28. Android ProgrammingWorking with Containers RelativeLayout  RelativeLayout, as the name suggests, lays out widgets based upon their relationship to other widgets in the container and in the parent container.  Concepts and Properties • android:layout_alignParentTop says the widget’s top should align with the top of the container. • android:layout_alignParentBottom • android:layout_alignParentLeft • android:layout_alignParentRight 28
  29. 29. Android ProgrammingWorking with Containers RelativeLayout (cont.)  Concepts and Properties (cont.) • android:layout_centerHorizontal says the widget should be positioned horizontally at the center of the container. • android:layout_centerVertical = • android:layout_centerInParent = android:layout_centerHorizontal + android:layout_centerVertical 29
  30. 30. Android ProgrammingWorking with Containers RelativeLayout (cont.)  Concepts and Properties (cont.) • android:layout_above indicates that the widget should be placed above the widget referenced in the property. • android:layout_below • android:layout_toLeftOf indicates that the widget should be placed to the left of the widget referenced in the property. • android:layout_toRightOf 30
  31. 31. Android ProgrammingWorking with Containers RelativeLayout (cont.)  Concepts and Properties (cont.) • android:layout_alignTop indicates that the widget’s top should be aligned with the top of the widget referenced in the property. • android:layout_alignBottom • android:layout_alignLeft • android:layout_alignRight • android:layout_alignBaseline indicates that the baselines of the two widgets should be aligned. 31
  32. 32. Android ProgrammingWorking with Containers RelativeLayout (cont.)  Example 2.2 • Example 2.2.xml 32
  33. 33. Android ProgrammingWorking with Containers TableLayout  It allows you to position your widgets in a grid to your specifications. You control the number of rows and columns, which columns might shrink or stretch to accommodate their contents, and so on.  Concepts and Properties • android:layout_span indicate the number of columns the widget spans. • android:layout_column to put a widget into a different column. 33
  34. 34. Android ProgrammingWorking with Containers TableLayout (cont.)  Concepts and Properties (cont.) • android:stretchColumns If marked as stretchable, it can expand in width to fit any extra space. • android:shrinkColumns If marked as shrinkable, the column width can be shrunk to fit the table into its parent object. • android:collapseColumns to hide a column. 34
  35. 35. Android ProgrammingWorking with Containers TableLayout (cont.)  Concepts and Properties (cont.) • Table 2: value? = “*” • Table 3: value? = “0” • Table 4: value? = “1” 35
  36. 36. Android ProgrammingWorking with Containers TableLayout (cont.)  Concepts and Properties (cont.) • Table 1: removed • Table 2: value? = “*” • Table 3: value? = “0” 36
  37. 37. Android ProgrammingWorking with Containers TableLayout (cont.)  Example 2.3 • Example 2.3.xml 37
  38. 38. Android ProgrammingWorking with Containers GridLayout (Android 4.0 or higher)  A layout that places its children in a rectangular grid.  Concepts and Properties • android:columnCount, android:rowCount: The maximum number of columns/rows to create when automatically positioning children. • android:orientation, android:layout_row, android:layout_column • android:layout_gravity = center_horizontal, fill_horizontal, fill_vertical • android:layout_rowSpan and android:layout_columnSpan 38
  39. 39. Android ProgrammingWorking with Containers GridLayout  Example 2.4 • Example 2.4.xml 39
  40. 40. Android ProgrammingWorking with Containers FrameLayout  http://developer.android.com/reference/android/widget/FrameLay out.html 40
  41. 41. Android ProgrammingWorking with Containers ScrollView  ScrollView is a container that provides scrolling for its contents. You can take a layout that might be too big for some screens.  User can see only part of your layout at one time; the rest is available via scrolling. 41
  42. 42. Android ProgrammingExercise 2 Writing Tip Calculator Now we will create a simple tip calculating application very similar to one over here: http://www.onlineconversion.com/tip_calculator.htm 42
  43. 43. Android ProgrammingExercise 2 43
  44. 44. Android Programming

×