[Android] Basic Widgets and Containers

Android Programming

Lesson 2
Basic Widgets and Containers

NGUYEN The Linh

Android Programming

Contents

1 Using XML-Based Layouts

2 Employing Basic Widgets

3 Working with Containers

4 Exercise 2

2

Android Programming


Using XML-Based Layouts

3

Android Programming


What is an
XML-Based
Layout?

4

Android Programming


 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

Android Programming


What Does
it Look
Like?

6

Android Programming


 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

Android Programming


 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

Android Programming


Employing Basic Widgets

9

Android Programming


 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

Android Programming


 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

Android Programming


 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

Android Programming


 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

Android Programming


 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

Android Programming


 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

Android Programming


 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

Android Programming


 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

Android Programming


Working with Containers

18

Android Programming


 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

Android Programming


20

Android Programming


21

Android Programming


22

Android Programming


23

Android Programming


24

Android Programming


 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

Android Programming


 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 and
1 3
android:layout_marginRight of B
 4 is android:paddingBottom of A
and android:layout_marginBottom
4 of B
A

26

Android Programming


 LinearLayout (cont.)
 Example 2.1
• Example 2.1.xml

27

Android Programming


 RelativeLayout
 RelativeLayout, as the name suggests, lays out widgets based
upon their relationship to other widgets in the container and in
the parent container.

• 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

Android Programming


 RelativeLayout (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

Android Programming


• 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

Android Programming


• 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

Android Programming


 Example 2.2
• Example 2.2.xml

32

Android Programming


 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.

• android:layout_span indicate the number of columns the widget spans.
• android:layout_column to put a widget into a different column.

33

Android Programming


 TableLayout (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

Android Programming


• Table 2: value? = “*”
• Table 3: value? = “0”

35

Android Programming


• Table 1: removed
• Table 2: value? = “*”

36

Android Programming


 Example 2.3
• Example 2.3.xml

37

Android Programming


 GridLayout (Android 4.0 or higher)
 A layout that places its children in a rectangular grid.
• 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

Android Programming


 GridLayout
 Example 2.4
• Example 2.4.xml

39

Android Programming


 FrameLayout
 http://developer.android.com/reference/android/widget/FrameLay
out.html

40

Android Programming


 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

Android Programming

Exercise 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

Android Programming

Exercise 2

43

[Android] Basic Widgets and Containers

Recommended

More Related Content

Similar to [Android] Basic Widgets and Containers (20)

More from Nikmesoft Ltd (11)

Recently uploaded (20)

[Android] Basic Widgets and Containers