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>

<Buttonandroid:text="Cell 1,1“/>

<Buttonandroid: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