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 Slide 2©SoftMoore Consulting

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©SoftMoore Consulting

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©SoftMoore Consulting

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);... } Slide 5©SoftMoore Consulting

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©SoftMoore Consulting

The ID Attribute Any View object may have an integer ID associated with it to uniquely identify the View within the tree. Syntax: –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 Slide 7©SoftMoore Consulting

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©SoftMoore Consulting

Visualizing a LinearLayout Slide 9©SoftMoore Consulting

XML for a LinearLayout <LinearLayout xmlns:android= android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">... Slide 10©SoftMoore Consulting Text values should be specified in resource file 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©SoftMoore Consulting

Visualizing a RelativeLayout Slide 12©SoftMoore Consulting

XML for a RelativeLayout <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <EditText <Button android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="OK" /> Slide 13©SoftMoore Consulting (continued on next page) Text values should be specified in resource file strings.xml. Margin values should be specified in resource file dimens.xml.

XML for a RelativeLayout (continued) <Button android:text="Cancel" /> Slide 14©SoftMoore Consulting

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©SoftMoore Consulting

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©SoftMoore Consulting

Example of a TableLayout Slide 17©SoftMoore Consulting

XML for a TableLayout <TableLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> <TextView android:layout_column="1" android:text="Open..." android:padding="3dip" /> <TextView android:text="Ctrl-O" android:gravity="right" android:padding="3dip" />... Slide 18©SoftMoore Consulting Text values should be specified in resource file strings.xml. Padding values should be specified in resource file 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©SoftMoore Consulting

Visualizing a GridView Slide 20©SoftMoore Consulting

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©SoftMoore Consulting

Example: ListView Slide 22©SoftMoore Consulting ListViews will be covered in detail in a later section.

Relevant Links Layouts Building a Simple User Interface Table Layout How Android Draws Views Slide 23©SoftMoore Consulting