1 / 31

More on User Interface

More on User Interface. Android Applications. Layouts. Linear Layout Relative Layout Table Layout Grid View Tab Layout List View. Linear Layout.

catherine-sallas
Download Presentation

More on User Interface

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. More on User Interface Android Applications

  2. Layouts • Linear Layout • Relative Layout • Table Layout • Grid View • Tab Layout • List View

  3. Linear Layout <LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1">    <TextViewandroid:text="row one"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row two"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row three"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row four"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>  </LinearLayout></LinearLayout> <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent">  <LinearLayoutandroid:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1">      <TextViewandroid:text="red"android:gravity="center_horizontal"android:background="#aa0000"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="green"android:gravity="center_horizontal"android:background="#00aa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="blue"android:gravity="center_horizontal"android:background="#0000aa"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="yellow"android:gravity="center_horizontal"android:background="#aaaa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>  </LinearLayout>

  4. Linear Layout • A Layout that arranges its children in a single column or a single row. • The direction of the row can be set by calling setOrientation(). • You can also specify gravity, which specifies the alignment of all the child elements by calling setGravity() or specify that specific children grow to fill up any remaining space in the layout by setting the weight member of LinearLayout.LayoutParams.

  5. Relative Layout • <?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent">    <TextViewandroid:id="@+id/label"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Type here:"/>    <EditTextandroid:id="@+id/entry"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="@android:drawable/editbox_background"android:layout_below="@id/label"/>    <Buttonandroid: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" />    <Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toLeftOf="@id/ok"android:layout_alignTop="@id/ok"android:text="Cancel" /></RelativeLayout>

  6. Relative Layout • RelativeLayout is a ViewGroup that displays child View elements in relative positions. • The position of a View can be specified as relative to sibling elements (such as to the left-of or below a given element) or in positions relative to the RelativeLayout area (such as aligned to the bottom, left of center).

  7. Table Layout <Viewandroid:layout_height="2dip"android:background="#FF909090" />    <TableRow>        <TextViewandroid:text="X"android:padding="3dip" />        <TextViewandroid:text="Import..."android:padding="3dip" />    </TableRow>    <TableRow>        <TextViewandroid:text="X"android:padding="3dip" />        <TextViewandroid:text="Export..."android:padding="3dip" />        <TextViewandroid:text="Ctrl-E"android:gravity="right"android:padding="3dip" />    </TableRow>    <Viewandroid:layout_height="2dip"android:background="#FF909090" />    <TableRow>        <TextViewandroid:layout_column="1"android:text="Quit"android:padding="3dip" />    </TableRow></TableLayout> • <?xml version="1.0" encoding="utf-8"?><TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:stretchColumns="1">    <TableRow>        <TextViewandroid:layout_column="1"android:text="Open..."android:padding="3dip" />        <TextViewandroid:text="Ctrl-O"android:gravity="right"android:padding="3dip" />    </TableRow>    <TableRow>        <TextViewandroid:layout_column="1"android:text="Save..."android:padding="3dip" />        <TextViewandroid:text="Ctrl-S"android:gravity="right"android:padding="3dip" />    </TableRow>    <TableRow>        <TextViewandroid:layout_column="1"android:text="Save As..."android:padding="3dip" />        <TextViewandroid:text="Ctrl-Shift-S"android:gravity="right"android:padding="3dip" />    </TableRow>

  8. Table Layout • A layout that arranges its children into rows and columns. • A TableLayout consists of a number of TableRow objects, each defining a row. • TableLayoutcontainers do not display border lines for their rows, columns, or cells. • Each row has zero or more cells; each cell can hold one View object. • A table can leave cells empty.

  9. Grid View • <?xml version="1.0" encoding="utf-8"?><GridViewxmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview"android:layout_width="fill_parent" android:layout_height="fill_parent"android:columnWidth="90dp"android:numColumns="auto_fit"android:verticalSpacing="10dp"android:horizontalSpacing="10dp"android:stretchMode="columnWidth"android:gravity="center"/>

  10. Grid View • GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. • The grid items are automatically inserted to the layout using a ListAdapter.

  11. Tab Layout • <?xml version="1.0" encoding="utf-8"?><TabHostxmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent">    <LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:padding="5dp">        <TabWidgetandroid:id="@android:id/tabs"android:layout_width="fill_parent"android:layout_height="wrap_content" />        <FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="fill_parent"android:layout_height="fill_parent"android:padding="5dp" />    </LinearLayout></TabHost>

  12. Tab Layout • To create a tabbed UI, you need to use a TabHost and a TabWidget. • The TabHost must be the root node for the layout, which contains both the TabWidget for displaying the tabs and a FrameLayout for displaying the tab content. • You can implement your tab content in one of two ways: use the tabs to swap Views within the same Activity, or use the tabs to change between entirely separate activities.

  13. List View A view that shows items in a vertically scrolling list. The items come from the ListAdapter associated with this view.

  14. Programmatic Layout • Can also define layout in Java: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutll= new LinearLayout(this); Button button1 = new Button(this); button1.setText("Hello"); Button button2 = new Button(this); button2.setText("World"); ll.addView(button1); ll.addView(button2); setContentView(ll); } • In practice, much easier to define XML layout

  15. Activity Lifecycle • Activities in the system are managed as an activity stack. • When a new activity is started, it is placed on the top of the stack and becomes the running activity -- the previous activity always remains below it in the stack, and will not come to the foreground again until the new activity exits.

  16. An activity has essentially four states • Active • Paused • Stopped • Inactive • The entire lifetime of an activity happens between the first call to onCreate(Bundle) through to a single final call to onDestroy().

  17. onCreate() • Called when the activity is first created. This is where you should do all of your normal static set up: create views, bind data to lists, etc. • This method also provides you with a Bundle containing the activity's previously frozen state, if there was one. • Always followed by onStart().

  18. onStart() • Called when the activity is becoming visible to the user. • Followed by onResume() if the activity comes to the foreground, or onStop() if it becomes hidden.

  19. onResume() • Called when the activity will start interacting with the user. • At this point your activity is at the top of the activity stack, with user input going to it. • Always followed by onPause().

  20. onPause() • Called when the system is about to start resuming a previous activity. • This is typically used to commit unsaved changes to persistent data, stop animations and other things that may be consuming CPU, etc. • Implementations of this method must be very quick because the next activity will not be resumed until this method returns.

  21. onStop() • Called when the activity is no longer visible to the user, because another activity has been resumed and is covering this one. • This may happen either because a new activity is being started, an existing one is being brought in front of this one, or this one is being destroyed.

  22. onDestroy() • The final call you receive before your activity is destroyed. This can happen either because the activity is finishing (someone called finish() on it, or because the system is temporarily destroying this instance of the activity to save space.

  23. onRestart() • Called after your activity has been stopped, prior to it being started again. • Always followed by onStart()

  24. Process Lifecycle • The Android system attempts to keep application process around for as long as possible, but eventually will need to remove old processes when memory runs low. • The system will kill less important processes (the last ones) before it resorts to killing more important processes (the first ones).

  25. foreground activity • The foreground activity (the activity at the top of the screen that the user is currently interacting with) is considered the most important. • Its process will only be killed as a last resort, if it uses more memory than is available on the device. • Generally at this point the device has reached a memory paging state, so this is required in order to keep the user interface responsive.

  26. visible activity • A visible activity (an activity that is visible to the user but not in the foreground, such as one sitting behind a foreground dialog) is considered extremely important and will not be killed unless that is required to keep the foreground activity running.

  27. background activity • A background activity (an activity that is not visible to the user and has been paused) is no longer critical, so the system may safely kill its process to reclaim memory for other foreground or visible processes. • If its process needs to be killed, when the user navigates back to the activity (making it visible on the screen again), its onCreate(Bundle) method will be called with the savedInstanceState it had previously supplied in onSaveInstanceState(Bundle) so that it can restart itself in the same state as the user last left it.

  28. empty process • An empty process is one hosting no activities or other application components (such as Service or BroadcastReceiver classes). • These are killed very quickly by the system as memory becomes low. For this reason, any background operation you do outside of an activity must be executed in the context of an activity BroadcastReceiver or Service to ensure that the system knows it needs to keep your process around.

  29. Service • Sometimes an Activity may need to do a long-running operation that exists independently of the activity lifecycle itself. • An example may be a camera application that allows you to upload a picture to a web site. • To accomplish this, your Activity should start a Service in which the upload takes place.

  30. Service: Class Overview • A Service is an application component representing either an application's desire to perform a longer-running operation while not interacting with the user or to supply functionality for other applications to use. • Each service class must have a corresponding <service> declaration in its package's AndroidManifest.xml.

More Related