Lectures‎ > ‎Week 2: June 6-June 12‎ > ‎

04-The Android User Interface

Homework in preparation for this lecture:

  1. Sudoku homework from yesterday
    1. Deliverable: If you didn't complete it totally yesterday, please finish it today and submit it.
  2. Automatic Mobile Conversion (re: Monday's Speaker)
    1. Read 10 Reasons why you should create a mobile web site in 2011
    2. You will notice that it is an 'advertisement' for a company called BlueTrain Mobile
    3. Study the site and study the technique (even try it if possible) for 'mobilizing' a web site
    4. Deliverbable: Write a 2-4 paragraph informal blog post on the reasons for mobilizing and how good a solution you believe BlueTrain is. Add link to post to homework log
  3. Read "The Mythical Man Month", Fred Brooks, Chapter 11: "Plan to throw one away"
    1. How is that advice changed at all by new agile methodologies
    2. Find other references that give the opposite or differing advice
    3. Note, you can get the book from the Library or Amazon. 
    4. Deliverable: Blog post reflecting on the reading. Add link to post to homework log

Summary

  1. Some Eclipse tricks: show perspective, save perspective, minimizing panes, other questions?
  2. Look at code for Photo Viewer
  3. Look at examples in Android GUI editor
  4. Review Activity States and State Transitions
  5. Talk more about Layouts in depth

Graphical User Interfaces - Universal concepts

  • Many generations of GUIs have uncovered many principles which have been proven to work well
    • View - a rectangular area of pixels that gets and loses focus
    • Redraw - an event that walks views asking them to redraw
    • Invalid Region (aka the dirty region) - the part of the screen (pixels) which need to change
    • Offscreen drawing and bitmaps - to avoid flicker
    • Event driven designs - to maintain responsiveness at all costs
    • Resources - to separate code from data and improve internationalization and other factors
    • The concept of "Focus" to receive keyboard and other I/O events
    • Multiple ways of measuring - for text, pixels, images, and so on
    • Margins and Padding - to add real-world flexibility to the simple concept of rectangular dimensions
    • RGB + Alpha - to control color and transparency
So... how does it work in Android?

The States of an Activity - review

  • Activities can be in one of four states (references: fundamentals of activities  and reference on activities

    • Resumed: If an activity in the foreground of the screen (at the top of the stack), it is active or running or resumed (all used interchangeably) 

    • Paused: If an activity has lost focus but is still visible (that is, a new non-full-sized or transparent activity has focus on top of your activity), it is paused. A paused activity is completely alive (it maintains all state and member information and remains attached to the window manager), but can be killed by the system in extreme low memory situations.

    • Stopped: If an activity is completely obscured by another activity, it is stopped. It still retains all state and member information, however, it is no longer visible to the user so its window is hidden and it will often be killed by the system when memory is needed elsewhere.

    • If an activity is paused or stopped, the system can drop the activity from memory by either asking it to finish, or simply killing its process, at which point the activity is killed or shut down. It ceases to exist. When it is displayed again to the user, it must be completely restarted and restored to its previous state.

  • Key Activity Methods and when they are called:
public class ExampleActivity extends Activity {
   
@Override
   
public void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
       
// The activity is being created.
   
}
   
@Override
   
protected void onStart() {
       
super.onStart();e
       
// The activity is about to become visible.
   
}
   
@Override
   
protected void onResume() {
       
super.onResume();
       
// The activity has become visible (it is now "resumed").
   
}
   
@Override
   
protected void onPause() {
       
super.onPause();
       
// Another activity is taking focus (this activity is about to be "paused").
   
}
   
@Override
   
protected void onStop() {
       
super.onStop();
       
// The activity is no longer visible (it is now "stopped")
   
}
   
@Override
   
protected void onDestroy() {
       
super.onDestroy();
       
// The activity is about to be destroyed.
   
}
}

Android Basics: Graphics

  • Resolution, Dimensions, coordinates, screen
    • Note qualifiers of resource folders -- res/layout-small-long-land etc.
    • Use scalable graphics (e.g. drawables vs. bitmap resources) whenever possible
    • Not so useful: in - inches, mm - millimeters, pt - points (1/72 in), px (pixels)
    • sp - scale independent pixels - use for text sizes
    • dp - density independent pixels - use for everything else
  • Drawables
    • A thing that can be drawn on the screen, or a property thereof
    • No interactivity built in (compare Views below)
    • Color (single color), Shape (oval, rectangle, ring, etc.) Backgrounds, Gradients (two or three colors) 
    • Transform, Rotation,Ninepatch, etc.
  • Working with Text
    • Similar to desktop systems: fonts, styles, sizes, descenders, etc.

Android Basics: Views

  • Base class for all visual user interface elements on Android

  • "widget" or "control" (TextView, Listview, Spinner, Button, CheckBox etc. etc. etc.)

  • ViewGroups are collections of Views. They Form a tree
  • Activity method "setContentView" 
  • Advanced: Subclass Views to create new special purpose Views (Example: LinedText)
  • Use XML resource to define a view
  • Layouts are subclasses of ViewGroups which further control how they are placed relative to each other

Let's talk about layouts

  • Can be declared in XML or instantiated at run time. Question: Tradeoff?
  • Familiar XML for a layout

    <?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="Hello, I am a TextView" />
       
    <Button android:id="@+id/button"
               
    android:layout_width="wrap_content"
               
    android:layout_height="wrap_content"
               
    android:text="Hello, I am a Button" />
    </LinearLayout>
  • XML has one root element
  • Each element may have an ID (e.g. android:id="@+id/button")
  • A Layout is attached to any ViewGroup to apply heuristics to how to lay out the pieces of the sub view

  • Layout hints:
    • layout_width and layout_height say how big this layout (== view) should be. Avoid using specific numbers
    • normally use heuristic values: match_parent (fill_parent is technically deprecated) and wrap_content,
        • )
    • Layouts, like all views also:
      • have a width and a height. getWidth() and getHeight()
      • have optional padding, which is space INSIDE the view added to the content's own dimensions
    • layout_weight:
      • An integer
      • Distributes 'extra space' in a LinearLayout according to the proportion of weights
    • layout_gravity:
      • tricky: affects the position of the view inside of a LinearView, along the opposite dimension that the weight would. 
        • top - Push object to the top of its container, not changing its size.
        • bottom - Push object to the bottom of its container, not changing its size.
        • left - Push object to the left of its container, not changing its size.
        • right - Push object to the right of its container, not changing its size.
        • center_vertical - Place object in the vertical center of its container, not changing its size.
        • .... and many more -- see android:w
  • Types of Layouts
    • FrameLayout - simple box with only one view in it. If there are more they all sit on top of each other...
    • LinearLayout - Sequence of views, in a single row or column
      • android:orientation="vertical" or "horizontal controls how it goes.
      • To create a proportionate size layout on the screen
        • create a container view group object with thelayout_width and layout_height attributes set to fill_parent
        • assign the children height or width to 0 (zero, which is the default....); 
        • then assign relative weight values to each child, depending on what proportion of the screen each should have.
    • TableLayout

Sample Table Layout

?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="fill_parent"
   
android:layout_height="fill_parent"
   
android:stretchColumns="1">
   
<TableRow>
       
<TextView
           
android:text="@string/table_layout_4_open"
           
android:padding="3dip" />
       
<TextView
           
android:text="@string/table_layout_4_open_shortcut"
           
android:gravity="right"
           
android:padding="3dip" />
   
</TableRow>

   
<TableRow>
       
<TextView
           
android:text="@string/table_layout_4_save"
           
android:padding="3dip" />
       
<TextView
           
android:text="@string/table_layout_4_save_shortcut"
           
android:gravity="right"
           
android:padding="3dip" />
   
</TableRow>
</TableLayout>

    • RelativeLayout
      • A simpler way to have layout structure
      • Avoids having to create nesting views (sometimes) - more efficient

04-The Android User Interface

<?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="
wrap_content"
                android:background="
@drawable/blue"
                android:padding="
10px" >

   
<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_background"
             
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="10px"
           
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>

Internals: How do Layouts get laid out and drawn?

  1. Activity gains focus (what does this mean?)
  2. Gets requested to draw its layout (by who?) and is told what the invalid region (what is that?)
  3. Drawing begins in root node of layout (how does activity know what this is?)
  4. Layout is told to measure and draw all the pieces in it
    1. Measurement is in two phases:
      1. Measurement phase: The Layout/ViewGroup tree is walked and each item is asked for it's 'desired' measurements (e.g. based on dimensions of text or images)
      2. Layout phase: Then it is walked again and using the hints in the views, the actual placements of each view is determined.
    2. Finally all the views are visited in order, and asked to draw
Note therefore that performance suffers as the view hierarchy gets deeper.

Afternoon Schedule

Videos from Class