1. Note Q) How to format code in Enclipse? A) Ctrl + i
Q) How to add scroll bar?
A) ScrollView + LinearLayout

2. Android Programming 1 Week Fourth Day a tí Panamá
The Layout of Android

3. Review You have to remember that View, ViewGroup TextView ImageView
Button
EditText
Toast
어제 배운 내용들을 복습해 보겠습니다.
위의 6가지 사항은 반드시 숙지하고 계셔야 합니다.

4. Linear Layout Linear Layout
Child view horizontally and vertically, side-by-side with the layout, the most simple and intuitive, and a high frequency of use.
Orientation
Property that determines the orientation of the view (Default is horizontal)
vertical : Rothschild arranged vertically from top to bottom
horizontal : Array of children, from left to right horizontally
Button1
Button2
Button3
[ vertical ]
[ horizontal ]

5. Practice-1(1/4) Project name: Horizontal Build Target: Android 2.3.3
Application name: Horizontal
Package name: exam.horizontal
Min SDK Version: 10

6. Practice-1(2/4) Horizontal/res/values/strings.xml
<?xml version='1.0' encoding='utf-8'?>
<resources>
<string name='hello'>Hello World, HorizontalActivity!</string>
<string name='app_name'>Horizontal</string>
<string name='greetings'>Hi Panama</string>
<string name='message'>Good</string>
</resources>

7. Practice-1(3/4) Horizontal/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='
android:orientation='vertical'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<TextView
android:layout_height='wrap_content'
android:textColor='#ff0000'
android:textSize='20pt'
android:textStyle='italic'
/>
vertical 확인 후 horizontal 변경
다음은 fill_parent를 wrap 변경

8. Practice-1(4/4) Horizontal/res/layout/main.xml <TextView
android:layout_width='fill_parent'
android:layout_height='wrap_content'
android:textSize='20sp'
android:background='#0000ff'
/>
android:text='Good Morning'
android:textColor='#8000ff00'
android:textSize='5mm'
android:typeface='serif'
</LinearLayout>

9. 2. Linear Layout
gravity
Specifies how to place the content of an object, both on the x- and y-axis, within the object itself.
Must be one or more (separated by '|') of the following constant values.

10. Practice-2(1/4) Project name: GravityTest Build Target: Android 2.3.3
Application name: GravityTest
Package name: exam.gravitytest
Min SDK Version: 10

11. Practice-2(2/7) GravityTest/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='
android:orientation='vertical'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<TextView
android:text='gravity test'
android:textSize='10pt'
android:textColor='#00ff00'
/>
</LinearLayout>

12. Practice-2(3/7) GravityTest/res/layout/main.xml ... <TextView
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:text='gravity test'
android:textSize='20pt'
android:textColor='#00ff00'
android:gravity='center'
/>
</LinearLayout>

13. Practice-2(4/7) GravityTest/res/layout/main.xml ... <TextView
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:text='gravity test'
android:textSize='20pt'
android:textColor='#00ff00'
android:gravity='center_vertical'
/>
</LinearLayout>

14. Practice-2(5/7) GravityTest/res/layout/main.xml ... <TextView
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:text='gravity test'
android:textSize='20pt'
android:textColor='#00ff00'
android:gravity='center_vertical|right'
/>
</LinearLayout>

15. Practice-2(6/7) GravityTest/res/layout/main.xml ... <TextView
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:text='gravity test'
android:textSize='20pt'
android:textColor='#00ff00'
android:gravity='center_vertical | right'
/>
</LinearLayout>

16. Practice-2(7/7) GravityTest/res/layout/main.xml ... <TextView
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:text='gravity test'
android:textSize='20pt'
android:textColor='#00ff00'
android:gravity='top|bottom'
/>
</LinearLayout>

17. Practice-3(1/3) Project name: GravityTest2 Build Target: Android 2.3.3
Application name: GravityTest2
Package name: exam.gravitytest
Min SDK Version: 10

18. Practice-3(2/3) GravityTest2/res/layout/main.xml … <TextView
android:layout_width='wrap_content'
android:layout_height='fill_parent'
android:text='gravity test'
android:textSize='10pt'
android:textColor='#00ff00'
android:background='#ff0000'
android:layout_gravity='center'
/>
</LinearLayout>

19. Practice-2(3/3) GravityTest2/res/layout/main.xml’ … <TextView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:text='gravity test'
android:textSize='10pt'
android:textColor='#00ff00'
android:background='#ff0000'
android:layout_gravity='center'
/>
</LinearLayout>

20. Practice-3(1/4) baselineAligned
When set to false, prevents the layout from aligning its children's baselines.

21. Practice-3(2/4) baselineAligned/res/layout/main.xml
Project name: baselineAligned
Build Target: Android 2.3.3
Application name: baselineAligned
Package name: exam.baselinealigned
Min SDK Version: 10
baselineAligned/res/layout/main.xml
<LinearLayout xmlns:android='
android:orientation='horizontal'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:baselineAligned='false'
>

22. Practice-3(3/4) baselineAligned/res/layout/main.xml <TextView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:text='Medium'
android:textSize='20sp'
/>
android:text='Small'
android:textSize='10sp'
android:background='#0000ff'

23. Practice-3(4/4) baselineAligned/res/layout/main.xml <TextView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:text='Large'
android:textSize='40sp'
android:typeface='serif'
/>
</LinearLayout>

24. Practice-4(1/3) layout_weight
Indicates how much of the extra space in the LinearLayout will be alloc ated to the view associated with these LayoutParams.
The ratio is 1:3:1
The ratio is 1:2:3

25. Practice-4(2/3) Weight/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='
android:orientation='vertical'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<Button
android:layout_height='0px'
android:layout_weight='1'
android:text='The Button of top'
/>

26. Practice-4(3/3) Weight/res/layout/main.xml <EditText
android:layout_width='fill_parent'
android:layout_height='0px'
android:layout_weight='3'
android:text='The EditText of middle'
/>
<Button
android:layout_weight='1'
android:text='The Button of bottom'
</LinearLayout>

27. Practice-5(1/3) Fixed Range – 64dip
The sample layout which is used application commonly
Fixed Range – 64dip
Project name: Weight2
Build Target: Android 2.3.3
Application name: Weight2
Package name: exam.weight2
Min SDK Version: 10

28. Practice-5(2/3) Weight2/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='
android:orientation='vertical'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<Button
android:layout_height='64dip'
android:text='Tool Bar'
android:layout_weight='0'
/>

29. Practice-5(3/3) Weight2/res/layout/main.xml <EditText
android:layout_width='fill_parent'
android:layout_height='0px'
android:layout_weight='1'
/>
<Button
android:layout_height='64dip'
android:text='Menu Bar'
android:layout_weight='0'
</LinearLayout>

30. 2. Linear Layout Button The Padding and Margin
Margins associated with the property
Padding
Margin
For the purposes of determining the boundaries of a background, padding is considered 'inside' the widget (and so padding area gets the background) and margin is 'outside' the widget (and so does not get the background).
Button
Margin
Padding

31. Practice-6(1/4)
Nested Linear Layout
Margin
Margin + Padding

32. Practice-6(2/4) Padding/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='
android:orientation='vertical'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<EditText
android:layout_height='wrap_content'
android:text='Upper Text'
/>

33. Practice-6(3/4) Padding/res/layout/main.xml <LinearLayout
android:layout_width='fill_parent'
android:layout_height='wrap_content'
android:background='#ff0000'
android:layout_margin ='10dip'
android:padding='10dip'
>
<Button
android:text='Button'
/>
</LinearLayout>

34. Practice-6(4/4) Padding/res/layout/main.xml ... <EditText
android:layout_width='fill_parent'
android:layout_height='wrap_content'
android:text='Lower Text'
/>
</LinearLayout>

35. Relative Layout Relative Layout
A Layout where the positions of the children can be described in relation to each other or to the parent. A B
<RelativeLayout>
<B
/>
<A
</RelativeLayout>
[ The desired layout ]
[ XML Format ]

36. Practice-7(1/4) Project name: Relative Build Target: Android 2.3.3
Application name: Relative
Package name: exam.relative
Min SDK Version: 10
The Order of Layout
Alice
Alice
Bob
Default
To right of alice
Alice
Bob
José
María
Below Bob
To left of Jose

37. Practice-7(2/4) Relative/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<RelativeLayout xmlns:android='
android:layout_width='fill_parent'
android:layout_height='wrap_content'
>
<TextView
android:layout_width='wrap_content'
android:layout_marginRight='20px'
android:textSize='30sp'
android:text='Alice'
/>

38. Practice-7(3/4) Relative/res/layout/main.xml <TextView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:textSize='20sp'
android:text='Bob'
/>
android:layout_alignParentRight='true'
android:layout_marginLeft='10px'
android:textSize='30sp'
android:text='José'

39. Practice-7(4/4) Relative/res/layout/main.xml <TextView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:textSize='20sp'
android:text='María'
/>
</RelativeLayout>

40. Absolute Layout Absolute Layout
A layout that lets you specify exact locations (x/y coordinates) of its childre n. Absolute layouts are less flexible and harder to maintain than other types of layouts without absolute positioning.
Project name: Absolute
Build Target: Android 2.3.3
Application name: Absolute
Package name: exam.absolute
Min SDK Version: 10
[슬라이드 40]
여러 레이아웃 중 한 가지는 AbsoluteLayout 입니다.
AbsoluteLayout은 관계(Relation)이나 순서에 상관없이 좌표값으로 자식(Child) View를 배치합니다.
Google의 공식 문서에서는 사용을 금지하고 있습니다.

41. Practice-8(1/2) Absolute/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<AbsoluteLayout xmlns:android='
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<TextView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:layout_x='50dip'
android:layout_y='100dip'
android:textSize='30sp'
android:text='(50,100)'
/>

42. Practice-8(1/2) Absolute/res/layout/main.xml <TextView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:layout_x='200dip'
android:layout_y='70dip'
android:textSize='30sp'
android:text='(200,70)'
/>
</AbsoluteLayout>

43. Frame Layout FrameLayout
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.
Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.

44. Practice-9(1/5) Click HERE Project name: Frame
Build Target: Android 2.3.3
Application name: Frame
Package name: exam.frame
Min SDK Version: 10

45. Practice-9(2/5) Frame/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<FrameLayout xmlns:android='
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<Button
android:layout_height='wrap_content'
android:text='Push Button'
/>

46. Practice-9(3/5) Frame/res/layout/main.xml <ImageView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
/>
</FrameLayout>

47. Practice-9(4/5) Frame/src/FrameActivity.java package exam.frame;
import android.app.*;
import android.os.*;
import android.view.*;
import android.widget.*;
public class FrameActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btn = (Button)findViewById(R.id.btn);
btn.setOnClickListener(new Button.OnClickListener() {

48. Practice-9(5/5) Frame/src/FrameActivity.java
public void onClick(View v) {
ImageView img=(ImageView)findViewById(R.id.img);
if (img.getVisibility() == View.VISIBLE) {
img.setVisibility(View.INVISIBLE);
} else {
img.setVisibility(View.VISIBLE); }
}); }}

49. Table Layout TableLayout
A layout that arranges its children into rows and columns. A TableLayout consists of a number of TableRow objects, each defining a row (actually, you can have other children, which will be explained below). TableLayout containers do not display border lines for their rows, columns, or cells. Each row has zero or more cells; each cell can hold one View object. The table has as many columns as the row with the most cells. A table can leave cells empty. Cells can span columns, as they can in HTML.

50. Practice-10(1/3) Project name: Table Build Target: Android 2.3.3
Application name: Table
Package name: exam.table
Min SDK Version: 10
[슬라이드 50]
Relative Layout과 관련된 실습을 진행하도록 하겠습니다.

51. Practice-10(2/3) Table/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<TableLayout xmlns:android='
android:layout_width='fill_parent'
android:layout_height='fill_parent'>
<TableRow>
<TextView android:text='Algorithm'
android:textSize='20sp'
android:padding='10dip' />
<TextView android:text='Algebra'
<TextView android:text='Philosophy'
</TableRow>

52. Practice-10(3/3) Table/res/layout/main.xml <TableRow>
<TextView android:text='A'
android:textSize='20sp'
android:padding='10dip' />
<TextView android:text='C+'
android:padding='10dip'
android:gravity='center'/>
</TableRow>
</TableLayout>

53. Practice-11(1/5) Nested layouts -1 Project name: NestedLayouts
TextView
Linear Layout
(Vertical)
Table
Table Row
(Horizontal)
Project name: NestedLayouts
Build Target: Android 2.3.3
Application name: NestedLayouts
Package name: exam.nestedlayouts
Min SDK Version: 10

54. Practice-11(2/5) NestedLayouts/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='
android:orientation='vertical'
android:layout_width='fill_parent'
android:layout_height='fill_parent'>
<TextView
android:layout_height='wrap_content'
android:text='TableLayout in LinearLayout'/>

55. Practice-11(3/5) NestedLayouts/res/layout/main.xml
<TableLayout xmlns:android='
android:layout_width='fill_parent'
android:layout_height='wrap_content'
android:background='#808080'>
<TableRow>
<TextView android:text='Alice' android:padding='10dip' />
<TextView android:text='Bob' android:padding='10dip' />
<TextView android:text='Eve' android:padding='10dip' />
</TableRow>
<TextView android:text='Apple' android:padding='10dip' />
<TextView android:text='Melon' android:padding='10dip' />
<TextView android:text='Papaya' android:padding='10dip' />
</TableLayout>

56. Practice-11(4/5) NestedLayouts/res/layout/main.xml
<LinearLayout xmlns:android='
android:orientation='horizontal'
android:layout_width='fill_parent'
android:layout_height='wrap_content'>
<TextView
android:layout_width='wrap_content'
android:layout_height='fill_parent'
android:layout_weight='1'
android:text='Android'/>
android:text='iOS'/>

57. Practice-11(5/5) NestedLayouts/res/layout/main.xml <TextView
android:layout_width='wrap_content'
android:layout_height='fill_parent'
android:layout_weight='1'
android:text='Window Mobile'/>
</LinearLayout>

58. Practice-12(1/5) Nested layouts - 2 [슬라이드 23]
Nest Layout에 관해 실습을 진행하도록 하겠습니다.

59. Practice-12(1/5) Multipages/src/MultipagesActivity.xml
package exam.multipages;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MultipagesActivity extends Activity {
View mPage1, mPage2, mPage3;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mPage1 = findViewById(R.id.page1);
mPage2 = findViewById(R.id.page2);
mPage3 = findViewById(R.id.page3);

60. Practice-12(1/5) Multipages/src/MultipagesActivity.xml
findViewById(R.id.btnpage1).setOnClickListener(mClickListener);
findViewById(R.id.btnpage2).setOnClickListener(mClickListener);
findViewById(R.id.btnpage3).setOnClickListener(mClickListener); }
Button.OnClickListener mClickListener =
new Button.OnClickListener() {
public void onClick(View v) {
mPage1.setVisibility(View.INVISIBLE);
mPage2.setVisibility(View.INVISIBLE);
mPage3.setVisibility(View.INVISIBLE);

61. Practice-12(1/5) Multipages/src/MultipagesActivity.xml
switch (v.getId()) {
case R.id.btnpage1:
mPage1.setVisibility(View.VISIBLE);
break;
case R.id.btnpage2:
mPage2.setVisibility(View.VISIBLE);
case R.id.btnpage3:
mPage3.setVisibility(View.VISIBLE); } };

62. Practice-12(1/5) Multipages/res/layout/main.xml
<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='
android:orientation='vertical'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:background='#ffffff'
>
android:orientation='horizontal'
android:layout_height='wrap_content'

63. Practice-12(1/5) Multipages/res/layout/main.xml <Button
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:text='Page 1'
/>
android:text='Page 2'
android:text='Page 3'
</LinearLayout>

64. Practice-12(1/5) Multipages/res/layout/main.xml <FrameLayout
android:layout_width='fill_parent'
android:layout_height='fill_parent'
>
<LinearLayout
android:orientation='vertical'
android:background='#ffff00'
<TextView
android:layout_height='wrap_content'
android:textColor='#000000'
android:text='The first page'
/>

65. Practice-12(1/5) Multipages/res/layout/main.xml <ImageView
android:layout_width='wrap_content'
android:layout_height='wrap_content'
/>
</LinearLayout>
<RelativeLayout
android:layout_width='fill_parent'
android:visibility='invisible'
android:background='#00ff00'
>
<EditText
android:layout_alignParentRight='true'
android:text='The second page'

66. Practice-12(1/5) Multipages/res/layout/main.xml <Button
android:layout_width='wrap_content'
android:layout_height='wrap_content'
android:layout_alignParentBottom='true'
android:text='Button'
/>
</RelativeLayout>
<TableLayout
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:visibility='invisible'
android:background='#0000ff'
>

67. Practice-12(1/5) Multipages/res/layout/main.xml <TableRow>
<TextView android:text='Alice' android:textSize='20sp' android:padding='10dip' />
<TextView android:text='Bob' android:textSize='20sp' android:padding='10dip' />
<TextView android:text='Eve' android:textSize='20sp' android:padding='10dip' />
</TableRow>
<TextView android:text='Android' android:textSize='20sp' android:padding='10dip' />
<TextView android:text='iOS' android:textSize='20sp' android:padding='10dip' />
<TextView android:text='Windows Mobile' android:textSize='20sp' android:padding='10dip' />
</TableLayout>
</FrameLayout>
</LinearLayout>

68. Preview We are going to learn about Canvas Painting on Screen
A Various Output System
A Various Input System