Android graphical user interface - layouts

1. Android
Graphical User Interface

2. Agenda
Familiarize with the main types of GUI components
Layouts
Widgets
Menus

3. What is an XML Layout?
 An XML-based layout is a specification of the various UI components (widgets) and
the relationships to each other –and to their containers –all written in XML format.
Android considers XML-based layouts to be
resources, and as such layout files are stored in
the res/layout
directory inside your Android project.
Each XML file contains a tree of elements specifying a
layout of widgets and containers that make up one
View (shown later).
The attributes of the XML elements are properties,
describing how a widget should look or how a container
should behave.
Example:
If a Button element has an attribute value of
android:textStyle= "bold"
that means that the text appearing on the face of the
button should be rendered in a boldface font style.

4. Using @ in XML Layouts
 The button application introduced
<?xmlversion="1.0"encoding="utf-8"?>
<Buttonxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myButton"
android:text=""
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
Anything you do want to use in your Java source needs an
android:id=“…”
The convention is to use @+id/nnn as the id value, where the nnn represents your
locally-unique name for the widget (eg. @+id/myButton).

5. Attaching Layouts to Java Code
 Assume res/layout/main.xml has been created. This layout could be
called by an application using the statement
setContentView(R.layout.main);
 Individual widgets, such as myButton could be accessed by the
application using the statement findViewByID(...) as in
Button btn= (Button) findViewById(R.id.myButton);
 Where R is a class automatically generated to keep track of resources
available to the application. In particular R.id... is the collection of
widgets defined in the XML layout.

6. Attaching Layouts to Java Code
 Attaching Listeners to the Widgets
 The button of our example could now be used, for instance a listener for the click event
could be written as:
btn.setOnClickListener(newOnClickListener() {
@Override
Public void onClick(View v) {
updateTime();
}
});
Private void updateTime() {
btn.setText(newDate().toString());
}

7. Android Layouts
 An Android layout is a class that handles arranging the way its
children appear on the screen.
 Anything that is a View (or inherits from View) can be a child of a
layout.
 The most common way to define layout and express the view
hierarchy is with an XML layout file.
There are five basic types of Layouts:
– Linear Layout
– Absolute Layout
– Table Layout
– Relative Layout
– Frame Layout
– Scroll View Layout

8. Frame Layout
 Frame Layout is the simplest type of layout object. It's basically a blank space on
your screen that you can later fill with a single object —for example, a picture that
you'll swap in and out.
 Views that you add to a Frame Layout is always anchored to the top left of the
layout.
<?xml version="1.0" encoding="utf‐8"?>
<AbsoluteLayout android:id="@+id/widget68"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android”>
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="40px"
android:layout_y="35px"
>
<ImageView android:src = "@drawable/androidlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</FrameLayout>
</AbsoluteLayout>

9. Linear Layout
 A Linear Layout is a View Group that will lay child View elements
 vertically or horizontally depending on the android:orientation attribute.
All children are stacked one after the other, so a
Vertical list will only have one child per row, no matter
how wide they are, and a
Horizontal list will only be one row high (the height of
the tallest child, plus padding).

10. Linear Layout
<?xml version="1.0" encoding="utf‐8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
android:layout_width="105px"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:text="Button"
/>
</ LinearLayout >
The default orientation of Linear Layout is set to
horizontal.

11.  If you want to change its orientation to vertical, set the orientation
 attribute to vertical
Linear Layout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.
com/apk/res/android"
>

12. Relative Layout
 A Relative Layout is a ViewGroup that allows you to layout child elements in
positions relative to the parent or siblings elements.
The following properties manage positioning of a widget respect to other
widgets:
 android:layout_above indicates that the widget should be placed above the
widget referenced in the property
 android:layout_below indicates that the widget should be placed below the
widget referenced in the property
android:layout_toLeftOf indicates that the widget should be placed to the left
of the widget referenced in the property
 android:layout_toRightOf indicates that the widget should be placed to the
right of the widget referenced in the property

13. Relative Layout

14. 14
Relative Layout
 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Type here:"/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_backg
round"
android:layout_below="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="OK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>

15. Table Layout
 A Table Layout is a View Group that that will lay child View elements into rows
and columns.

16. Table Layout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.androi
d.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_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>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090
" />
[………………………]
</TableLayout>

17. Absolute Layout
The Absolute Layout lets you specify the exact location of its children.
Consider the following UI defined in main.xml
the two Button views located at their specified positions using the android_layout_x
and android_layout_y attributes

18. Absolute Layout
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent” android:layout_height="fill_parent">
<Button
android:id="@+id/backbutton"
android:text="Back” android:layout_x="10px” android:layout_y="5px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_x="10px” android:layout_y="110px"
android:text="First Name” android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_x="150px” android:layout_y="100px"
android:width="100px” android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_x="10px” android:layout_y="160px"
android:text="Last Name” android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_x="150px” android:layout_y="150px"
android:width="100px"
android:layout_width="wrap_content” android:layout_height="wrap_content" />
</AbsoluteLayout>

19. Scroll View Layout
 A Scroll View is a special type of Frame Layout in that it allows
users to scroll through a list of views that occupy more space than
the physical display.
 The Scroll View can contain only one child view or View Group,
which normally is a Linear Layout.
 Note: Do not use a List View together with the Scroll View. The List
View is designed for showing a list of related information and is
optimized for dealing with large lists.

20. Scroll View

21. Questions?