Transcript Introduction to XML

Android Layouts
Layouts
• Define the user interface for an activity
• Layouts are defined in .xml files
– within /res/layout folder
– different layout can be designed for lanscape view
• placed within /res/layout-land folder
• Handful of layouts to choose from
• All derived from the class:
android.view.ViewGroup
View class
• Any widget or ViewGroup placed as part of
interface on an Activity is a View
– 11 direct subclasses
– 62 indirect subclasses
•
•
•
•
•
LinearLayout
TableLayout
EditText
Button
Others
http://developer.android.com/reference/android/view/View.html
View attributes
• Apply to any instance of a View
– syntax: android:layout_attribute_name=“value”
– layout_height and layout_width
• values: match_parent or wrap_content
• fill_parent deprecated (renamed to match_parent as of 2.2)
– layout_margin
• extra space on all sides of item
–
–
–
–
layout_marginX (i.e. X= Top, Bottom, Right, Left)
layout_gravity
gravity
text (for labels, buttons, etc.)
Sizing options
• preferred units
– dp or dip – device independent pixels
• scales size according to screen density
• 1 dp is equivalent to 1 pixel on 160 dpi screen
– sp – scale-independent pixels
• scales fonts according to user’s font size
• other options
– px
• actual pixels
– mm and in – millimeters and inches
– pt – points (1/72”)
Layouts
• Available layouts
– AbsoluteLayout
• Deprecated as of 1.5 - allowed specific x, y coordinates
– Common Layouts
• LinearLayout
– Default
– Allows child items to be placed in a single row or column
• TableLayout
– Allows child items to be placed in multiple rows and columns
– More sophisticated/specialized layouts
• RelativeLayout
– Allows child items to be placed relative to each other
• FrameLayout
– Allows child items to be stacked on one another
LinearLayout
• Child items placed in single row or column
– Important attributes for LinearLayout
• orientation
– applies to parent
– “vertical” = single column
– “horizontal” = single row
• layout_width and layout_height
– decide if the layout should take up:
» the entire width (height) of the screen
» minimum width (height) needed
» specific width (height) desired
Sample .xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width=“match_parent“
android:layout_height=“match_parent“
>
<TextView
android:layout_width=“match_parent"
android:layout_height="wrap_content“
android:layout_margin="2dp“
android:text="View me"
/>
<Button
android:layout_width=“match_parent"
android:layout_height="wrap_content"
android:layout_margin=“2dp"
android:text="Push me"
/>
</LinearLayout>
TableLayout
• Places items in rows and columns
• Important attributes
– collapseColumns (hides columns)
• =“*”, =“1”, =“0,3”, etc.
– stretchColumns (displays columns)
– layout_span
• allows child to span multiple columns
Sample .xml file
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent“
android:layout_height=“match_parent"
android:stretchColumns=“*"
>
<TableRow>
<Button
android:text="Cell 1,1“/>
<Button
android:text="Cell 1,2”/>
</TableRow>
<TableRow>
<Button
android:text="Cell 2,1”/>
<Button
android:text="Cell 2,2”/>
</TableRow>
</TableLayout>
RelativeLayout
• Currently the default layout supplied in Eclipse
• Tends to work the best with the visual editor
• Where child items are in relation to:
– parent
– each other
• Sometimes allows for one layout to be used instead
of layouts within layouts
• Many attributes
– See documentation on RelativeLayout.LayoutParams
class
RelativeLayout
• Important attributes
– layout_X where X is:
•
•
•
•
centerInParent
centerHorizontal (or Vertical)
alignParentTop (or Bottom or Left or Right)
alignRight (or Left or Top or Bottom)
– (=“@+id/childIdName”)
– aligns specified edge of each child
– often causes overlap
• above (or below or toLeftOf or toRightOf)
– (=“@+id/childIdName”)
– aligns children relatively to each other accordingly
Sample .xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent“
android:layout_height="match_parent“
>
<TextView
android:id="@+id/tv1“
android:layout_width="wrap_content"
android:layout_height="wrap_content“
android:layout_centerInParent="true“
android:text="View me“
/>
<Button
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toRightOf="@+id/tv1"
android:text="Push me"
/>
</RelativeLayout>
FrameLayout
• Places items on top of each other
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width="match_parent“
android:layout_height="match_parent“
>
<TextView
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:text="This is big text!“
android:textSize="20pt“
/>
<TextView
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:text="I am small...“
android:textSize="8pt"
/>
</FrameLayout>
Layout Orientations
• Portrait
– Default view
• Landscape
– When device is rotated 90°
• To set specific layouts for each
– \res\layout\main.xml for portrait layout
• layout folder is provided
– \res\layout-land\main.xml for landscape layout
• layout-land folder must be created
– file name and variable names within file must match
– not restricted to main.xml
Layout Orientations
• Orientation can be locked
– screenOrientation attribute of Activity
• android:screenOrientation="portrait"
– Each Activity handled separately
• can do any combination of locked and unlocked
Activities
• can lock all, but must do each individually
Common Views
• User-interface views placed within layouts
– TextView
– EditText
– Button
– CheckBox
– RadioButton
– Spinner
– Many others
Determining a given View’s .xml
attributes
• Use Android reference to find class
– Example: Button
• View XML attributes of the class
– Button does not have any listed
• View XML attributes of the Ancestor classes
– In this case, TextView and View
• Use eclipse pop-up help in .xml file