01 08 - graphical user interface - layouts


Published on

Android graphical user interface - layouts

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

01 08 - graphical user interface - layouts

  1. 1. Android Graphical User Interface
  2. 2. Agenda Familiarize with the main types of GUI components Layouts Widgets Menus
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Relative Layout
  14. 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. 15. Table Layout  A Table Layout is a View Group that that will lay child View elements into rows and columns.
  16. 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. 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. 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. 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. 20. Scroll View
  21. 21. Questions?