Download Slide 1

User Interfaces: Part 1
(View Groups and Layouts)
Views
•
Views are the basic building blocks of an Android
graphical user interface. Class View (in package
android.view) is the base class for a collection of view
subclasses.
•
A view is an object that knows how to draw itself on the
screen.
•
A view is responsible for a rectangular area on the
screen and handling events in that area
©SoftMoore Consulting
Slide 2
Types of Views
•
Widget – an object that interacts directly with the user
(e.g., button or check box)
•
ViewGroup – a view that acts as a container to hold
other View and ViewGroup objects (called its children).
• Layout – a ViewGroup that is responsible for positioning
its children on the screen.
©SoftMoore Consulting
Slide 3
XML for a Layout
•
Layouts can be declared in XML or created at runtime
within the code, but the most common approach is to
declare them in XML.
•
Each layout file must contain exactly one root element,
which must be a View or ViewGroup object, typically one
of several common layouts.
•
Additional layout objects or widgets are added as child
elements to gradually build a View hierarchy that defines
the layout.
•
The XML file is placed in either the res/layout directory
or the res/layout-land directory
©SoftMoore Consulting
Slide 4
Loading the XML Resource
• Each XML layout file is compiled into a View resource.
• Load the layout resource in the Activity.onCreate()
by calling setContentView(), passing it the reference
to your layout resource.
• Example
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
}
©SoftMoore Consulting
Slide 5
Attributes
•
Every View and ViewGroup object supports their own
variety of XML attributes.
•
Some attributes are specific to a View object (for
example, TextView supports the textSize attribute)
• Attributes can also inherited by View classes that extend
other View class.
•
Attributes defined in the View class are common to all
View objects (e.g., the id attribute).
•
Layout attributes describe certain layout orientations of
the layout.
©SoftMoore Consulting
Slide 6
The ID Attribute
•
Any View object may have an integer ID associated with
it to uniquely identify the View within the tree.
•
Syntax:
android:id="@+id/my_button"
– The at-symbol (@) indicates that the XML parser should parse
and expand the rest of the ID string and identify it as an ID
resource.
– The plus-symbol (+) means that this is a new resource name that
must be created and added to the R.java file.
• Some ID resources are provided by the Android
framework and do not need the plus-symbol
android:id="@android:id/empty"
©SoftMoore Consulting
Slide 7
LinearLayout
•
A LinearLayout displays its child View elements in a
linear direction, either vertically or horizontally.
•
Children are stacked one after the other.
– vertical: one child per row
– horizontal: only one row high (height of the tallest child plus
padding)
•
Respects margins between children and the gravity
(right, center, or left alignment) of each child.
• Creates a scrollbar if the length of the window exceeds
the length of the screen.
©SoftMoore Consulting
Slide 8
Visualizing a LinearLayout
©SoftMoore Consulting
Slide 9
XML for a LinearLayout
<?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">
<LinearLayout android:orientation="horizontal" ...>
<TextView android:text="@string/text1"
.../>
<TextView android:text="@string/text2" ... />
...
</LinearLayout>
Text values should be
<LinearLayout ...>
...
</LinearLayout>
</LinearLayout>
©SoftMoore Consulting
specified in resource
file strings.xml.
Slide 10
RelativeLayout
•
A RelativeLayout is a ViewGroup that displays its child
View elements in relative positions.
•
The position of a child View can be specified as relative
to sibling elements (such as to the left-of or below a
given view) or relative to the parent RelativeLayout
area (such as aligned to the bottom, left, or center).
•
A RelativeLayout is a powerful utility for designing a
user interface because it can eliminate nested view
groups and keep the layout hierarchy flat, which
improves performance.
•
Nested LinearLayout groups can often be replaced by
a single RelativeLayout.
©SoftMoore Consulting
Slide 11
Visualizing a RelativeLayout
©SoftMoore Consulting
Slide 12
XML for a RelativeLayout
<?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/label" .../>
<EditText android:id="@+id/entry"
...
android:layout_below="@id/label"/>
Text values should be
specified in resource
file strings.xml.
Margin values should
be specified in resource
file dimens.xml.
<Button android:id="@+id/ok"
...
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="@dimen/btnLeftMargin"
android:text="@string/OK" />
(continued on next page)
©SoftMoore Consulting
Slide 13
XML for a RelativeLayout
(continued)
<Button android:id="@id/cancel"
...
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="@string/cancel" />
</RelativeLayout>
©SoftMoore Consulting
Slide 14
TableLayout
•
A TableLayout is a ViewGroup that displays its child
View elements in rows and columns, similar to HTML
tables.
•
The child views of a TableLayout are TableRow objects.
Each TableRow defines a single row in the table
•
Each row has zero or more cells, each of which is
defined by any kind of other view.
– Cells of a row may be composed of a variety of view objects such
as Button, ImageView, or TextView objects.
– A cell may also be a ViewGroup object; e.g., you can nest
another TableLayout as a cell.
©SoftMoore Consulting
Slide 15
TableLayout
(continued)
•
The table will have as many columns as the row with the
most cells.
•
Use the attribute android:layout_span for a cell’s view
object (e.g., Button or TextView) to make it span more
that one column; e.g., android:layout_span="2".
– You can also use attribute android:layout_weight to give a
similar appearance.
•
The width of a column is defined by the row with the
widest cell in that column; however, TableLayout can
specify certain columns as shrinkable or stretchable.
©SoftMoore Consulting
Slide 16
TableLayout
(continued)
•
A stretchable column can expand in width to fit any extra
space. A shrinkable column can be shrunk to fit the
table into its parent object.
•
Example
android:stretchColumns="0,1,2"
•
Specifying an attribute value of "*" will stretch or shrink
all columns.
•
•
A column can be both stretchable and shrinkable.
Example
android:stretchColumns="*"
android:shrinkColumns="*"
©SoftMoore Consulting
Slide 17
Example of a TableLayout
©SoftMoore Consulting
Slide 18
XML for a TableLayout
<?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="1">
<TableRow>
<TextView android:layout_column="1"
android:text="@string/open"
android:padding="@dimen/tvPad" />
<TextView android:text="@string/ctrlO"
android:gravity="right"
android:padding="@dimen/tvPad" />
</TableRow>
Text values should be
specified in resource
file strings.xml.
Padding values should
be specified in resource
file dimens.xml.
<TableRow>
...
</TableRow>
</TableLayout>
©SoftMoore Consulting
Slide 19
GridView
•
A GridView is a ViewGroup that displays its child View
elements in a two-dimensional, scrollable grid.
•
•
Example: a gallery of thumbnail pictures.
The grid items are automatically inserted to the layout
using an Adapter.
©SoftMoore Consulting
Slide 20
Visualizing a GridView
©SoftMoore Consulting
Slide 21
ListView
•
A ListView is a view group that displays a list of
scrollable items.
•
The list items are automatically inserted to the list using
an Adapter that pulls content from a source such as an
array or database query and converts each item result
into a view that’s placed into the list.
•
The layout for a ListView involves two XML files, one
for the overall layout of the list and another for laying out
the individual rows.
©SoftMoore Consulting
Slide 22
Example: ListView
ListViews will be
covered in detail
in a later section.
©SoftMoore Consulting
Slide 23
Relevant Links
•
Layouts
https://developer.android.com/guide/topics/ui/declaring-layout.html
•
Building a Simple User Interface
https://developer.android.com/training/basics/firstapp/building-ui.html
• Table Layout
https://developer.android.com/guide/topics/ui/layout/grid.html
•
How Android Draws Views
https://developer.android.com/guide/topics/ui/how-android-draws.html
©SoftMoore Consulting
Slide 24