User Interfaces: Part 1 (View Groups and Layouts).

User Interfaces: Part 1(View Groups and Layouts)

©SoftMoore Consulting

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

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.

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

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.

• Examplepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... }

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.

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-symbolandroid:id="@android:id/empty"

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.

Slide 8


Visualizing a LinearLayout

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="red" .../> <TextView android:text="green" ... /> ... </LinearLayout> <LinearLayout ...> ... </LinearLayout></LinearLayout>

Slide 10

Text values should bespecified in resourcefile strings.xml.


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.

Slide 11


Visualizing a RelativeLayout

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"/>

<Button android:id="@+id/ok" ... android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="OK" />

Slide 13

(continued on next page)

Text values should bespecified in resourcefile strings.xml.Margin values shouldbe specified in resourcefile dimens.xml.


XML for a RelativeLayout(continued)

<Button android:id="@id/cancel" ... android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Cancel" />

</RelativeLayout>

Slide 14


TableLayout

• A TableLayout is a ViewGroup that displays its child View elements in rows and columns.

• The child views of a TableLayout are TableRow objects.– each TableRow defines a single row in the table

• The table will have as many columns as the row with the most cells.

• 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, like

ImageView or TextView objects.– A cell may also be a ViewGroup object (e.g., you can nest

another TableLayout as a cell).Slide 15


TableLayout(continued)

• Table layouts are similar to HTML tables except that cells cannot span columns (but the use of weights can give a similar appearance).

• Columns can be marked as “stretchable” via the android attribute stretchColumns. To stretch all columns use a value of "*".

Slide 16


Example of a TableLayout

Slide 17


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="Open..." android:padding="3dip" /> <TextView android:text="Ctrl-O" android:gravity="right" android:padding="3dip" /> </TableRow>

<TableRow> ... </TableRow></TableLayout>

Slide 18

Text values should bespecified in resourcefile strings.xml.Padding values shouldbe specified in resourcefile dimens.xml.


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.

Slide 19


Visualizing a GridView

Slide 20


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.

Slide 21


Example: ListView

Slide 22

ListViews will becovered in detailin a later section.


Relevant Links

• Layoutshttp://developer.android.com/guide/topics/ui/declaring-layout.html

• Building a Simple User Interfacehttp://developer.android.com/training/basics/firstapp/building-ui.html

• Table Layouthttp://developer.android.com/guide/topics/ui/layout/grid.html

• How Android Draws Viewshttp://developer.android.com/guide/topics/ui/how-android-draws.html

Slide 23

http://developer.android.com/guide/topics/ui/declaring-layout.html

http://developer.android.com/training/basics/firstapp/building-ui.html

http://developer.android.com/guide/topics/ui/layout/grid.html

http://developer.android.com/guide/topics/ui/how-android-draws.html

User Interfaces: Part 1 (View Groups and Layouts).

Documents

Transcript of User Interfaces: Part 1 (View Groups and Layouts).