05. Layoutict.edu.mn/uploaded/file_manager/files/05 LayOut-Mongol.pdf · Page 3 1. Layout Overview The basic concept layout Layout Hierarchy A layout defines the visual structure

DKU-MUST Mobile ICT Education Center

05. Layout

Page 2

Goal

• Learn the layout.

• Configuration screen in various Layouts.

• Designed to screen only the Java code.

Page 3

1. Layout Overview ▶ The basic concept layout

Layout Hierarchy

A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways:

• Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to

the View classes and subclasses, such as those for widgets and layouts.

• Instantiate layout elements at runtime. Your application can create View and ViewGroup objects

(and manipulate their properties) programmatically.

Page 4

The typical properties(attributes) of the Layout

orientation : Should the layout be a column or a row. Use "horizontal" for a row, "vertical" for

a column. The default is horizontal.

gravity : Specifies how an object should position its content, on both the X and Y axes,

within its own bounds

- top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal,

center, fill, clip_vertical, clip_vertical, start, end

padding : Sets the padding, in pixels, of all four edges. Padding is defined as space between the edges of the view and the view's content. A views size will include it's padding

layout_weight: This attribute assigns an "importance" value to a view in terms of how much space

is should occupy on the screen. A larger weight value allows it to expand to fill any

remaining space in the parent view. Child views can specify a weight value, and then

any remaining space in the view group is assigned to children in the proportion of

their declared weight. Default weight is zero.

1. Layout Overview ▶ The basic concept layout

Page 5

The Basic Type of Layout

1. Layout Overview ▶ Type of layout

widget

widget

widget

widget

wid

ge

t

wid

ge

t

wid

ge

t

widget

widgetwidget

widget

widget widget

widget widget

widget widget

widget widget

widget widget

widget

widget

widget

widget

widget

widget

LinearLayout RelativeLayout TableLayout GridLayout FrameLayout

Page 6

2. LinearLayout ▶ Basic form of the LinearLayout

orientation attribute

• Vertical is column, horizontal is row

Page 7

gravity attribute

• Specifies how an object should position its content, on both the X and Y axes, within its own bounds.

• Must be one or more (separated by '|') of the following constant values- top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal,

center, fill, clip_vertical, clip_horizontal, start, end

Exam


Page 8

gravity attribute


Constant Value Description

top 0x30 Push object to the top of its container, not changing its size.

bottom 0x50 Push object to the bottom of its container, not changing its size.

left 0x03 Push object to the left of its container, not changing its size.

right 0x05 Push object to the right of its container, not changing its size.

center_vertical 0x10 Place object in the vertical center of its container, not changing its size.

fill_vertical 0x70 Grow the vertical size of the object if needed so it completely fills its container.

center_horizontal 0x01 Place object in the horizontal center of its container, not changing its size.

fill_horizontal 0x07 Grow the horizontal size of the object if needed so it completely fills its container.

center 0x11 Place the object in the center of its container in both the vertical and horizontal axis, not

changing its size.

fill 0x77 Grow the horizontal and vertical size of the object if needed so it completely fills its contai

ner.

clip_vertical 0x80 Additional option that can be set to have the top and/or bottom edges of the child clipped

to its container's bounds. The clip will be based on the vertical gravity: a top gravity will cl

ip the bottom edge, a bottom gravity will clip the top edge, and neither will clip both edge

s.

clip_horizontal 0x08 Additional option that can be set to have the left and/or right edges of the child clipped to

its container's bounds. The clip will be based on the horizontal gravity: a left gravity will cl

ip the right edge, a right gravity will clip the left edge, and neither will clip both edges.

start 0x00800003 Push object to the beginning of its container, not changing its size.

end 0x00800005 Push object to the end of its container, not changing its size.

Page 9

layout_gravity attribute

• Standard gravity constant that a child supplies to its parent. Defines how the child view should be positioned, on both the X and Y axes, within its enclosing layout.

• Must be one or more (separated by '|') of the following constant values


Constant Value Description

top 0x30 Push object to the top of its container, not changing its size.

bottom 0x50 Push object to the bottom of its container, not changing its size.

left 0x03 Push object to the left of its container, not changing its size.

right 0x05 Push object to the right of its container, not changing its size.

center_vertical 0x10 Place object in the vertical center of its container, not changing its size.

fill_vertical 0x70 Grow the vertical size of the object if needed so it completely fills its container.

center_horizontal 0x01 Place object in the horizontal center of its container, not changing its size.

fill_horizontal 0x07 Grow the horizontal size of the object if needed so it completely fills its container.

center 0x11 Place the object in the center of its container in both the vertical and horizontal axis, not changing its si

ze.

fill 0x77 Grow the horizontal and vertical size of the object if needed so it completely fills its container.

clip_vertical 0x80 Additional option that can be set to have the top and/or bottom edges of the child clipped to its contain

er's bounds. The clip will be based on the vertical gravity: a top gravity will clip the bottom edge, a bott

om gravity will clip the top edge, and neither will clip both edges.

clip_horizontal 0x08 Additional option that can be set to have the left and/or right edges of the child clipped to its container's

bounds. The clip will be based on the horizontal gravity: a left gravity will clip the right edge, a right gra

vity will clip the left edge, and neither will clip both edges.

start 0x00800003 Push object to the beginning of its container, not changing its size.

end 0x00800005 Push object to the end of its container, not changing its size.

Page 10

layout_gravity attribute

• Exam


Page 11

Design the Screen.

Layout is LinearLayout- orientation attribute : vertical

Make the 3 Button- layout_width : 110dp- layout_height : 100dp

hint - Setting the gravity, layout_gravity

attribute

[Self Test 5-1]


Page 12

baselineAligned attribute

• When set to false, prevents the layout from aligning its children's baselines.

• This attribute is particularly useful when the children use different values for gravity. The default value is true.

• Must be a boolean value, either "true" or "false".

Exam


false true or default

Page 13

Basic form of redundant LinearLayout

2. LinearLayout ▶ Redundant LinearLayout of form

Page 14

layout_weight attribute

• This attribute assigns an "importance" value to a view in terms of how much spaceis should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view.

• Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight.

• Default weight is zero.

Exam 1 - Error


Page 15

exam 2(error), exam 3(nomal)


Page 16

Design the screen

Layout is LinearLayout

Layout color differently

Hint: layout redundant

[Self Test 5-2]


Page 17

XML and Java code the behavior

2. LinearLayout ▶ Creating a screen in Java code

Page 18

[Practice 5-1] Coding without XML code (1/3)

When you click the button, show the Toast message(Only using the Java code)

Project Information

Project Name : Project5_1

Package Name : com.cookandroid.project5_1

Build SDK : Goolge API 15 또는 16

Minimum Required SDK : API 15 또는 16

Activity Name : Project5_1Activity

Layout Name : main 추후 삭제


Page 19

Java Coding 1

Write the code to create a LinearLayout

Run the Code



Page 20

Java Coding 2

Create the Button. When you click the button, show the Toast Message.

Write the code in the onCreate() method.



Page 21

Be Complete only using the Java code in this screen without XML code

Layout 1, EditText 1, Button 1, TextView 1

When you click the button, copy the Text(EditText) into the TextView

[Self Test 5-3]


Page 22

3. Other Layout ▶ RelativeLayout

Concept

• RelativeLayout is a view group that displays child views in relative positions.

• The position of each view can be specified as relative to sibling elements(such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area(such as aligned to the bottom, left of center).

Page 23

Exam 1


Page 24

Positioning Views

• RelativeLayout lets child views specify their position relative to the parent view orto each other(specified by ID).

• So you can align two elements by right border, or make one below another,centered in the screen, centered left, and so on.

• By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.


Page 25

Exam 2


Page 26

Exam 3


Page 27

Design the this Screen

Using the LinearLayout, RelativeLayout

1 TextView, 1 EditText, 2 Button

[Self Test 5-4]

3. Other Layout

Page 28

Concept

• TableLayout is a ViewGroup that displays child View elements in rows and columns.

• TableLayout positions its children into rows and columns. TableLayout containers do not display border lines for their rows, columns, or cells. The table will have as many columns as the row with the most cells. A table can leave cells empty, but cells cannot span columns, as they can in HTML.

• TableRow objects are the child views of a TableLayout (each TableRow defines a single row in the table). Each row has zero or more cells, each of which is defined by any kind of other View. So, the cells of a row may be composed of a variety of View objects, like ImageView or TextViewobjects. A cell may also be a ViewGroup object (for example, you can nest another TableLayoutas a cell).

3. Other Layout ▶ TableLayout

Page 29

Attribute

• layout_span : Defines how many columns this child should span. Must be >= 1.Must be an integer value, such as "100".

• layout_column : The index of the column in which this child should be.Must be an integer value, such as "100".

• stretchColumns : The zero-based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. Illegal and duplicate indices are ignored. You can stretch all columns by using the value "*" instead.

Note that a column can be marked stretchable and shrinkable at the same time.Must be a string value, using '\\;' to escape characters such as '\\n' or '\\uxxxx' for a unicode character.


Page 30

Attribute exam


Page 31

[Practice 5-2] Calculator(using the TableLayout) (1/6)

Upgrade the Calculator of the <Pratice 4-1>

Using the TableLayout

Project Info.

Project Name : Project5_2

Package Name : com.cookandroid.project5_2

Build SDK : Goolge API 15 or 16

Minimum Required SDK : API 15 or 16

Activity Name : Project5_2Activity

Layout Name : main


Page 32

Design the Screen (1/2)

1 TableLayout, 9 TableRow

2 EditText, 10 Button(Number button), 4 Operator Button(+, -, *, /), 1 TextView.

Setting the layout_margin(Operator button)

Change the TextView attribute(color : red, font size : 20dp)

Widget id : Edit1, Edit2, BtnNum0~9, BtnAdd, BtnSub, BtnMul, BtnDiv, TextResult



Page 33

Design the Screen (2/2)



Page 34

Java Coding 1 : Global variable declarations

7 Widget variable(without number button)

2 String type variable(for store the Input string)

1 Integer variable(Result of the calculation)

10 button array(number button)

An array of integers to store the id of the button 10.

integer variable for using the increase value



Page 35

Java Coding 1 : Global variable declarations



Page 36

Java Coding 2



Page 37

Java Coding 3



Page 38

Concept

• The grid is composed of a set of infinitely thin lines that separate the viewing area into cells. Throughout the API, grid lines are referenced by grid indices.

• A grid with N columns has N + 1 grid indices that run from 0 through N inclusive. Regardless of how GridLayout is configured, grid index 0 is fixed to the leading edge of the container and grid index N is fixed to its trailing edge (after padding is taken into account).

• Row and Column Specs- Children occupy one or more contiguous cells, as defined by their rowSpec and

columnSpec layout parameters. Each spec defines the set of rows or columns that are to be occupied; and howchildren should be aligned within the resulting group of cells. Although cells do not normally overlap in a GridLayout, GridLayout does not prevent children being defined to occupy the same cell or group of cells. In this case however, there is no guarantee that children will not themselves overlap after the layout operation completes.

3. Other Layout ▶ GridLayout

Page 39

Concept


Page 40

Attribute

• <GridLayout> Commonly used properties

rowCount: The maxmimum number of rows to create when automatically positioning children. Must be an integer value, such as "100".

columnCount: The maxmimum number of columns to create when automatically positioning children.Must be an integer value, such as "100".

orientation : The orientation property is not used during layout. It is only used to allocate row and column parameters when they are not specified by its children's layout paramters. GridLayout works like LinearLayout in this case; putting all the components either in a single row or in a single column - depending on the value of this flag. In the horizontal case, a columnCount property may be additionally supplied to force new rows to be created when a row is full. The rowCount attribute may be used similarly in the vertical case. The default is horizontal.


Page 41

Attribute

• Widget attribute included in the GridLayout

• layout_row: The row boundary delimiting the top of the group of cells occupied by this view.Must be an integer value, such as "100".

• layout_column: The column boundary delimiting the left of the group of cells occupied by this view.Must be an integer value, such as "100".

• layout_rowSpan: The row span: the difference between the bottom and top boundaries delimiting the group of cells occupied by this view. The default is one. See GridLayout.Spec.Must be an integer value, such as "100".

• layout_columnSpan: The column span: the difference between the right and left boundaries delimiting the group of cells occupied by this view. The default is one. See GridLayout.Spec.Must be an integer value, such as "100".

• layout_gravity: Gravity specifies how a component should be placed in its group of cells. The default is LEFT | BASELINE. See setGravity(int).Must be one or more (separated by '|') of the following constant values.


Page 42

Exam


Page 43

Change the <Pratice 5-2> to GridLayout

hint - Do not need to change the Java code,

you only need to change XML- Use the same XML id of the widget.

[Self Test 5-5]


Page 44

Concept

• FrameLayout is designed to block out an area on the screen to display a single item.

• Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.

• You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

3. Other Layout ▶ FrameLayout

Page 45

Attribute

• Foreground: Defines the drawable to draw over the content. This can be used as an overlay.

The foreground drawable participates in the padding of the content if the gravity is set to fill.

• foregroundGravity: Defines the gravity to apply to the foreground drawable.

The gravity defaults to fill.

3. Other Layout ▶ FrameLayout

Page 46

Summary

1. Type of layout

LinearLayout, RelativeLayout, FrameLayout, TableLayout, GridLayout

2. Layout of the main propertiesorientation, gravity, padding, layout_weight, baselineAligned

3. The table layout is used when placing a widget in a grid, the number of rows is determined by the <TableRow>

DKU-MUST Mobile ICT Education Center

Documents

05. Layoutict.edu.mn/uploaded/file_manager/files/05 LayOut-Mongol.pdf · Page 3 1. Layout Overview The basic concept layout Layout Hierarchy A layout defines the visual structure