Android UserInterfaces

1. Android UserInterfaces NasrullahNiazi

2. 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.

3. Each viewGroup is an invisible container that organizes views while View are widgets and controls that draw some part of UI.

4. <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"              android:orientation="vertical" >    <TextViewandroid: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>

5. 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. • Declare UI elements in XML. • Instantiate layout elements at runtime 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

6. Questions 1 In order to create views and reference them from the application you use ?

7. Attributes • android:id="@+id/my_button“ • android:id="@android:id/empty“ • Local resoures and android resources • (android.R.) • (R.id

8. 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.

9. 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.

10. 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

11. LinearLayout • <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:paddingLeft="16dp"android:paddingRight="16dp"    android:orientation="vertical" ><EditTextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="@string/to" /> <EditTextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="@string/subject" /><EditTextandroid:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="top"android:hint="@string/message" /><Buttonandroid:layout_width="100dp"android:layout_height="wrap_content"android:layout_gravity="right"android:text="@string/send" /></LinearLayout>

12. 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.

13. 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).

14. <?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" > <EditTextandroid:id="@+id/name"android:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="@string/reminder" />  <Spinnerandroid: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" /> <Spinnerandroid:id="@id/times"android:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/name"android:layout_alignParentRight="true" />  <Buttonandroid:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/times"android:layout_alignParentRight="true"android:text="@string/done" /></RelativeLayout>

15. 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.

16. GridViews • that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.