UI Basics

• Described in XML and "inflated" by the Android system
• Programmatically at runtime

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:text="Remember the digits, and press the button ...">
    </TextView>
    <Button 
        android:id="@+id/button_to_remember"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:onClick="myClickHandler">
    </Button>
    <TextView
        android:id="@+id/success_report"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content">
    </TextView>
</LinearLayout>

• The @ indicates that rest of the string is an id resource.
• The + means a new resource must be created.

• These units are relative to a 160 dpi (dots per inch) screen, so 160dp is always one inch regardless of the screen density.
• A "small" or "normal" Android screen is (at least) 320dp wide.
• Sizes should be saved as dimen or other resources in values/dimens.xml rather than be given in the UI definition.
• See the Android documentation for Dimensions.

• layout_height and layout_width
  • These are used to indicate the size of the element.
  • They must be specified for every element.
  • match_parent - the element should be as big as its parent, minus padding.
  • wrap_content - the element should be only big enough to enclose its content, plus padding.
• layout_weight
  • Specifies the relative size of an element in LinearLayouts, so the rendering splits the available space correspondingly.
  • Set the layout_height to 0dp for android:orientation="vertical" or the layout_width to 0dp for android:orientation="horizontal". For containers, set the size to wrap_content - weird bloody stuff.
• layout_gravity and gravity
  • layout_gravity specifies where the element should be placed within its parent.
  • gravity specifies where the element's contents should be placed within itself.
• padding* and layout_margin*
  • Padding adds space around the content of an element.
  • Margins add space around an element.
• visibility
  • An element can be visible, invisible, or gone.
  • If it's invisible it still takes space. If it's gone it does not take space.
• nextFocusDown
  • This specifies which field gets focus next.
  • Useful for a series of EditText elements that require user input.
• clickable and onClick
  • clickable is a Boolean indicating if the element should react to clicks (default true).
  • onClick specifies the name of a method that is called when a clickable element is clicked.

• The "basic" UI elements do not contain any other elements.
• Examples include Button, RadioButton, ToggleButton, ImageButton, TextView, EditText, ImageView, RatingBar, ProgressBar, WebView

• Container elements contain other elements (including other container elements).
• Examples include FrameLayout, LinearLayout, TableLayout, TabHost, SlidingDrawer

• Adapters are containers with an associated array/list of content information.
• Examples include ListView, Gallery, GridView, Spinner

• A dialog is a small window that prompts the user to make a decision or enter additional information.
• Examples include AlertDialog, DatePickerDialog, TimePickerDialog, ProgressDialog

• A menu allows a user to select from a list of items.
• Examples include Option menu, Context menu, Popup menu