Sizing and Posioning

How does the programmer specify where each component

appears, how big each component should be, etc.?

● Absolute posioning (C++, C#, others):

– Programmer speci(es exact pixel coordinates of every component.
– "Put this buon at (x=15, y=75) and make it 70x31 px in size."

● Layout managers (Java, Android):

– Objects that decide where to posion each component based on some
general rules or criteria.
● "Put these four buons into a 2x2 grid and put these text boxes in a horizontal
6ow in the south part of the app."
– More 6exible and general; works beer with a variety of devices.
 ViewGroup as layout
● ViewGroup superclass represents containers of widgets/views
– layouts are described in XML and mirrored in Java code
– Android provides several pre-exisng layout managers;
you can de(ne your own custom layouts if needed
– layouts can be nested to achieve combinaons of features

● in the Java code and XML:

– an Acvity is a ViewGroup
– various Layout classes are also ViewGroups
– widgets can be added to a ViewGroup, which will then
manage that widget's posion/size behavior
 XML, in brief
● XML : a language for describing hierarchical text data. *
– Uses tags that consist of elements and a%ributes. Tags can be nested.
– Some tags are opened and closed; others self-close.

<element attr="value" attr="value"> ... </element>

<element attr="value" attr="value" /> (self-closing)

● Example: * XML is case-sensi!ve!

<!-- this is a comment -->
<course name="CS 193A" quarter="15wi">
<instructor>Marty Stepp</instructor>
<ta>none</ta>
</course>
 Changing layouts
● go to the Text view for your layout XML (le
● modify the opening/closing tags to the new layout type,
e.g. LinearLayout
● now go back to Design view and add widgets
 LinearLayout (link)
● lays out widgets/views in a single line
● orientaon of horizontal (default) or vercal
● items do not wrap if they reach edge of screen!

horizontal vercal
 LinearLayout example 1
<LinearLayout ...
android:orientation="horizontal"
tools:context=".MainActivity">
<Button ... android:text="Button 1" />
<Button ... android:text="Button 2 Hooray" />
<Button ... android:text="Button 3" />
<Button ... android:text="Button 4
Very Long Text" />
</LinearLayout>

● In our examples, we'll use ... when omiCng boilerplate

code that is auto-generated by Android Studio and not
relevant to the speci(c example at hand.
 LinearLayout example 2
<LinearLayout ...
android:orientation="vertical"
tools:context=".MainActivity">
<Button ... android:text="Button 1" />
<Button ... android:text="Button 2
Hooray" />
<Button ... android:text="Button 3" />
<Button ... android:text="Button 4
Very Long Text" />
</LinearLayout>
 Gravity
● gravity: alignment direcon that widgets are pulled
– top, boom, leD, right, center
– combine mulple with |
– set gravity on the layout to adjust all widgets;
set layout_gravity on an individual widget

<LinearLayout ...
android:orientation="vertical"
android:gravity="center|right">
<Button ... android:text="Button 1" />
<Button ... android:text="Button 2 Hooray" />
<Button ... android:text="Button 3" />
<Button ... android:text="Button 4 Very Long Text" />
<Button ... android:text="Button 5"
android:layout_gravity="left" />
</LinearLayout>
 Weight
● weight: gives elements relave sizes by integers
– widget with weight K gets K/total fracon of total size
– cooking analogy: "2 parts 6our, 1 part water, ..."

<LinearLayout ...
android:orientation="vertical">
<Button ... android:text="B1"
android:layout_weight="1" />
<Button ... android:text="B2"
android:layout_weight="3" />
<Button ... android:text="B3"
android:layout_weight="1" />
</LinearLayout>
 Widget box model
● content: every widget or view has a certain size (width x height)
for its content, the widget itself
● padding: you can ar(cially increase the widget's size by
applying padding in the widget just outside its content
● border: outside the padding, a line around edge of widget
● margin: separaon from neighboring widgets on screen
 Sizing an individual widget
● width and height of a widget can be:
– wrap_content : exactly large enough to (t the widget's content
– match_parent : as wide or tall as 100% of the screen or layout
– a speci(c (xed width such as 64dp (not usually recommended)
● dp = device pixels; dip = device-independent pixels; sp = scaling pixels

<Button ...
android:layout_width="match_parent"
android:layout_height="wrap_content" />
 Padding
● padding: extra space inside widget
– set padding to adjust all sides;
paddingTop, Boom, LeD, Right for one side
– usually set to speci(c values like 10dp
(some widgets have a default value ~16dp)

<LinearLayout ...
android:orientation="vertical">
<Button ... android:text="Button 1"
android:padding="50dp" />
<Button ... android:text="Button 2 Hooray" />
<Button ... android:text="Button 3"
android:paddingLeft="30dp"
android:paddingBottom="40dp" />
</LinearLayout>
 Margin
● margin: extra space outside widget to separate it from others
– set layout_margin to adjust all sides;
layout_marginTop, Boom, LeD, Right
– usually set to speci(c values like 10dp
(set defaults in res/values/[Link])

<LinearLayout ...
android:orientation="vertical">
<Button ... android:text="Button 1"
android:layout_margin="50dp" />
<Button ... android:text="Button 2 Hooray" />
<Button ... android:text="Button 3"
android:layout_marginLeft="30dp"
android:layout_marginTop="40dp" />
</LinearLayout>
 GridLayout
● lays out widgets/views in lines of rows and columns
– orientaon aribute de(nes row-major or column-major order
– introduced in Android 4; replaces older TableLayout
● by default, rows and columns are equal in size
– each widget is placed into "next" available row/column index unless it is
given an explicit layout_row and layout_column aribute

– grid of 4 rows, 3 columns:

 GridLayout example 1
<GridLayout ...
android:rowCount="2"
android:columnCount="3"
tools:context=".MainActivity">
<Button ... android:text="Button 1" />
<Button ... android:text="Button Two" />
<Button ... android:text="Button 3" />
<Button ... android:text="Button Four" />
<Button ... android:text="Button 5" />
<Button ... android:text="Button Six" />
</GridLayout>
 GridLayout example 2
<GridLayout ...
android:rowCount="2"
android:columnCount="3"
android:orientation="vertical">
<Button ... android:text="Button 1" />
<Button ... android:text="Button Two" />
<Button ... android:text="Button 3" />
<Button ... android:text="Button Four" />
<Button ... android:text="Button 5"
android:layout_row="1"
android:layout_column="2" />
<Button ... android:text="Button Six"
android:layout_row="0"
android:layout_column="2" />
</RelativeLayout>
 GridLayout example 3
<GridLayout ...
android:rowCount="2"
android:columnCount="3">
<Button ... android:text="B1" />
<Button ... android:text="B2" />
<Button ... android:text="Button Number 3!" />
<Button ... android:text="B4"
android:layout_columnSpan="2"
android:layout_gravity="center" />
<Button ... android:text="B5" />
<Button ... android:text="B6"
android:layout_paddingTop="40dp"
android:layout_paddingBottom="40dp" />
<Button ... android:text="B7" />
<Button ... android:text="Button #8"
android:layout_gravity="right" />
</RelativeLayout>
 Nested layout
● to produce more complicated appearance, use a nested layout
– (layouts inside layouts)

● what layout(s) are used to create

the appearance at right?
– overall acvity: __________
– internal layouts: _________
 Nested layout template
<OuterLayoutType ...>

<InnerLayoutType ...>
<Widget ... />
<Widget ... />
</InnerLayoutType>

<InnerLayoutType ...>
<Widget ... />
<Widget ... />
</InnerLayoutType>

<Widget ... />

<Widget ... />
</OuterLayoutType>
 Nested layout exercise
● Write the layout XML necessary to create the following app UI.
– How many overall layouts are needed?
– Which widgets go into which layouts?
– ...
 Nested layout soluon
<LinearLayout ...
android:orientation="vertical" android:gravity="center|top">
<Button ... android:text="B1" />
<LinearLayout ...
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center|top">
<Button ... android:text="B2" />
<Button ... android:text="Button Number 3" />
<Button ... android:text="B4" />
</LinearLayout>
<Button ... android:text="B5" />
<Button ... android:text="B6" android:layout_gravity="left" />
<LinearLayout ...
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center|top">
<Button ... android:text="B7" />
<Button ... android:text="Button Number 8" />
</LinearLayout>
</LinearLayout>
 RelaveLayout (link)
● each widget's posion and size are relave to other views
– relave to "parent" (the acvity itself)
– relave to other widgets/views
– x-posions of reference: leD, right, center
– y-posions of reference: top, boom, center

● intended to reduce the need for nested layouts

 Relave anchor points
● properes for x/y relave to another widget:
– layout_below, above, toLeDOf, toRightOf
● set these to the ID of another widget in the format "@id/theID"
(obviously, the given widget must have an ID for this to work)

● properes for x/y relave to layout container (the acvity):

– layout_alignParentTop, Boom, LeD, Right
● set these 6ags to a boolean value of "true" to enable them

– layout_centerHorizontal, Vercal, InParent

● set these 6ags to "true" to center the control within its parent in a dimension
 RelaveLayout example 1
<RelativeLayout ... >
<Button ... android:id="@+id/b1" android:text="B1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button ... android:id="@+id/b2" android:text="B2"
android:layout_alignParentLeft="true"
android:layout_below="@+id/b1" />
<Button ... android:id="@+id/b3" android:text="B3"
android:layout_centerHorizontal="true"
android:layout_below="@+id/b2" />
<Button ... android:id="@+id/b4" android:text="B4"
android:layout_alignParentRight="true"
android:layout_below="@+id/b2" />
<TextView ... android:id="@+id/tv1"
android:text="I'm a TextView!"
android:layout_centerInParent="true" />
<Button ... android:id="@+id/b5" android:text="B5"
android:padding="50dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp" />
</RelativeLayout>