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

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 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 <LinearLayout xmlns: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" />

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 <TableLayout xmlns:android=“ android:layout_width=“match_parent“ android:layout_height=“match_parent" android:stretchColumns=“*" > <Button android:text="Cell 1,1“/> <Button android:text="Cell 1,2”/> <Button android:text="Cell 2,1”/> <Button android:text="Cell 2,2”/>

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) – – aligns specified edge of each child – often causes overlap above (or below or toLeftOf or toRightOf) – – aligns children relatively to each other accordingly

Sample.xml file <RelativeLayout xmlns:android=“ android:layout_width=“match_parent“ android:layout_height="match_parent“ > <TextView 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:text="Push me" />

FrameLayout Places items on top of each other <FrameLayout xmlns: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" />

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