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

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

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

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 ]

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

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>

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

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

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.

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

Practice-2(2/7) GravityTest/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <LinearLayout xmlns:android='http://schemas.android.com/apk/res/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>

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>

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>

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>

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>

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>

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

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>

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>

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

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='http://schemas.android.com/apk/res/android' android:orientation='horizontal' android:layout_width='fill_parent' android:layout_height='fill_parent' android:baselineAligned='false' >

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'

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>

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

Practice-4(2/3) Weight/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <LinearLayout xmlns:android='http://schemas.android.com/apk/res/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' />

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>

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

Practice-5(2/3) Weight2/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <LinearLayout xmlns:android='http://schemas.android.com/apk/res/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' />

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>

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

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

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

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>

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>

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 android:id='@+id/b' /> <A layout_above='@id/b' </RelativeLayout> [ The desired layout ] [ XML Format ]

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

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

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

Practice-7(4/4) Relative/res/layout/main.xml <TextView android:id='@+id/maria' android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_toLeftOf='@id/jose' android:layout_alignBottom='@id/jose' android:textSize='20sp' android:text='María' /> </RelativeLayout>

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의 공식 문서에서는 사용을 금지하고 있습니다.

Practice-8(1/2) Absolute/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <AbsoluteLayout xmlns:android='http://schemas.android.com/apk/res/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)' />

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>

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.

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

Practice-9(2/5) Frame/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <FrameLayout xmlns:android='http://schemas.android.com/apk/res/android' android:layout_width='fill_parent' android:layout_height='fill_parent' > <Button android:id='@+id/btn' android:layout_height='wrap_content' android:text='Push Button' />

Practice-9(3/5) Frame/res/layout/main.xml <ImageView android:id='@+id/img' android:layout_width='wrap_content' android:layout_height='wrap_content' android:src='@drawable/pride' /> </FrameLayout>

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() {

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); } }); }}

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.

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과 관련된 실습을 진행하도록 하겠습니다.

Practice-10(2/3) Table/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <TableLayout xmlns:android='http://schemas.android.com/apk/res/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>

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>

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

Practice-11(2/5) NestedLayouts/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <LinearLayout xmlns:android='http://schemas.android.com/apk/res/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'/>

Practice-11(3/5) NestedLayouts/res/layout/main.xml <TableLayout xmlns:android='http://schemas.android.com/apk/res/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>

Practice-11(4/5) NestedLayouts/res/layout/main.xml <LinearLayout xmlns:android='http://schemas.android.com/apk/res/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'/>

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>

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

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);

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);

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); } };

Practice-12(1/5) Multipages/res/layout/main.xml <?xml version='1.0' encoding='utf-8'?> <LinearLayout xmlns:android='http://schemas.android.com/apk/res/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'

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

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

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

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:id='@+id/page3' android:layout_width='fill_parent' android:layout_height='fill_parent' android:visibility='invisible' android:background='#0000ff' >

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>

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