Download Android UserInterfaces - iba-s13

Android UserInterfaces
Nasrullah Niazi
overView
• All user interface elements in an Android app
are built using View and ViewGroup objects. A
View is an object that draws something on the
screen that the user can interact with. A
ViewGroup is an object that holds other View
(and ViewGroup) objects in order to define
the layout of the interface.
• Each viewGroup is an invisible container that
organizes views while View are widgets and
controls that draw some part of UI.
• <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a Button" />
</LinearLayout>
Layouts
• A layout defines the visual structure for a user
interface, such as the UI for an activity or app
widget
• You can declare a layout in two ways.
1. Declare UI elements in XML.
The advantage to declaring your UI in XML
is that it enables you to better separate
the presentation of your application from
the code that controls its behavior
2. Instantiate layout elements at runtime
Questions
1 In order to create views and reference them
from the application you use ?
Attributes
• android:id="@+id/my_button“
• android:id="@android:id/empty“
• Local resoures and android resources
• (android.R.)
• (R.id
Layout Parameters
• XML layout attributes named layout_something
define layout parameters for the View that are
appropriate for the ViewGroup in which it resides
• (layout_width and layout_height)
• wrap_content tells your view to size itself to the
dimensions required by its content
• fill_parent (renamed match_parent in API Level 8)
tells your view to become as big as its parent view
group will allow.
• The geometry of a view is that of a rectangle.
A view has a location, expressed as a pair of
left and top coordinates, and two dimensions,
expressed as a width and a height. The unit for
location and dimensions is the pixel.
• getLeft() and getTop()
• The latter returns the top, or Y, coordinate of the rectangle representing
the view. These methods both return the location of the view relative to
its parent. For instance, when getLeft() returns 20, that means the view is
located 20 pixels to the right of the left edge of its direct parent.
Linear Layout
• It is a view group that aligns all children in a single
direction, vertically or horizontally. You can specify the
layout direction with the android:orientation attribute
LinearLayout
•
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/r
es/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/to" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/subject" />
<EditText
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="@string/message" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="@string/send" />
</LinearLayout>
android:layout_weight
• This attribute assigns an "importance" value to a
view in terms of how much space is should
occupy on the screen.
• For example, if there are three text fields and two
of them declare a weight of 1, while the other is
given no weight, the third text field without
weight will not grow and will only occupy the
area required by its content. The other two will
expand equally to fill the space remaining after all
three fields are measured. If the third field is then
given a weight of 2 (instead of 0), then it is now
declared more important than both the others,
so it gets half the total remaining space, while the
first two share the rest equally.
Relative Layout
• is a view group that displays child views in relative positions. The
position of each view can be specified as relative to sibling
elements (such as to the left-of or below another view) or in
positions relative to the parent RelativeLayout area (such as aligned
to the bottom, left of center).
•
<?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"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times" />
<Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentRight="true"
android:text="@string/done" />
</RelativeLayout>
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.
GridViews
• that displays items in a two-dimensional,
scrollable grid. The grid items are
automatically inserted to the layout using a
ListAdapter.