Sans Pareil Technologies, Inc.

Key To Your Business

Lesson 2


Layouts


Linear Layout



A layout that displays widgets sequentially (horizontal or vertical).  This the simplest and yet one of the most flexible layouts available.  Linear layout instances are often nested to achieve complex on-screen widget layouts.  Most practical widget layouts (as provided by application designers) can be achieved using nested linear layouts. The downside of nesting is that it affects rendering performance.
Layout properties are controlled via attributes in XML or equivalent JavaBean style property mutator methods on the instance.
  • orientation - Specify whether you want horizontal or vertical orientation.
  • weight - Determine how much space Android allocates to each widget within the layout.  For instance, if there are three widgets laid out in a linear layout, they would each occupy 1/3 the available space (each widget by default gets a weight value of 1).  If you were to assign a weight of 2 to one of the widgets, it would not occupy half the available space, while the remaining two would occupy quarter of the available space each.
  • gravity - Use to control alignment of a widget to the top, bottom, center, left or right of the parent layout.

TableLayout



A table layout lays out its child widgets in a grid (similar to HTML table).  Table layout arranges widgets into rows (TableRow instances), which are then split into individual cells/columns when you add widgets to the row.  Similar to HTML table columns, individual widgets can be set to span multiple columns by setting the layout_span attribute.
Table layouts are simpler to use than Relative layouts.  Table layout inherit from Linear layout, and hence suffers from performance issues as compared with Relative layouts.  Internally a Table layout uses nested Linear layout instances to arrange widgets into a grid.


FrameLayout



A simple and efficient layout that is used to render widgets on top of each other.  Frame layout stacks its child widgets one on top of another with the first widget at the bottom and the last widget at the top of the stack.  Standard Android widgets like DatePicker, TimePicker andCalendarView inherit from FrameLayout and are composed to different widgets stacked within the frame layout.


Widgets



Widgets are the fundamental building blocks for an application.  Typical application activities are composed by arranging various widgets into layout(s).  The arrangement is often specified by an application designer, who provides specifications (arrangement of widgets, sizing of widgets, spacing between widgets etc) and designs (resources such as images to be used as icons/background for widgets) which the application developer uses to compose an activity.
  • TextView - More commonly known as a label, used to display static text
  • EditText - More commonly known as text field, used to capture user input or enable users to edit existing text.
  • Button - A control that initiates some programmatic action when user taps it.
  • CheckBox - A control that a user may select/unselect. Selection is controlled via the checked property.
  • RadioButton - Control that is used to enforce a single selection out of a group of controls.  RadioButton widgets are added to aRadioGroup widget.  Similar to CheckBox, selection is controlled via the checked property of the RadioButton.
  • Spinner - More commonly known as a drop-down box.  Allows user to select an option from a list
  • ProgressBar - A widget that provides a visual representation of the progress of an operation (a long running operation that is usually run in a separate thread).
  • SeekBar - A widget that a user control by dragging a thumb to the left or right.
  • RatingBar - A convenience widget that allows user to assign a "star" rating.  Can easily be custom built by developer for more custom rendering.
  • ImageView - Display an image (usually from res/drawable directory).
  • ImageButton - A button that uses an image instead of text for identification.
  • DatePicker - A widget for selecting a date.
  • TimePicker - A widget for selecting time of day.
  • CalendarView - A widget for selecting a calendar date.
  • ScrollView - A container that is used to hold child widgets.  Displays a scroll bar if the available screen size cannot fit all the child widgets.
  • WebView - A widget that embeds a web browser to display web content (local or internet).

EditText Widget



Editable text widget is used to request information from user, or allow user to edit some existing text in an activity.  A soft keyboard is displayed when an edit text widget gets the focus.  The widget supports multiple lines of text.  If the lines property is not specified, only a single line will be displayed on screen, however the user may scroll to the other lines that are available in the widget.
The most commonly used properties to configure an edit text widget are the ones used to configure the type of keyboard displayed and the number of lines to display
  • inputType - The type of data for the text view.  This determines the type of soft keyboard displayed.  The following are the common values for this property:
  • text - General keyboard for any type of text
  • textPersonName - For person names.  Words start with capital letters.
  • textEmailAddress - For email address
  • textPassword - For password, characters are masked
  • textMultiline - Multiple lines of text (keyboard shows "Return" key)
  • number - For numeric values
  • numberDecimal - For decimal values
  • phone - For telephone numbers
  • date - For date values
  • time - For time values
  • lines - The number of lines of text that may be displayed by the text view.  This determines the height of the text view rendered on screen.  The default value for this property is 1.

Android displays the soft keyboard when an edit view gets focus.  Often the focus is assigned to an edit text widget when an activity is displayed.  This can happen each time the user starts an activity or changes the device orientation.  This behaviour is not always desired, and can be controlled via the android:windowSoftInputMode attribute for the activity in the application manifest file (AndroidManifest.xml).  The common values for the attribute are:
  • stateHidden - Keyboard is hidden (not displayed) when entering the activity
  • stateVisible - Always show the keyboard when entering the activity.
  • stateUnchanged - Shows the keyboard when entering the activity if the user had previously selected an edit text widget (thus displaying the keyboard).

Spinner



Spinners are more commonly known as drop-down box/menu.  Spinners are backed by an array adapter, which provides the list of data to be displayed in the spinner.  For static lists, the values are commonly stored as an array in the strings.xml resource file.  The widget provides methods for retrieving the selected item or its position in the list of values.
  • getSelectedItemPosition() - Returns the position of the user selected item in the list
  • getSelectedItem() - Returns the object from the list at the user selected position.


ImageView



Android supports displaying images (called drawable resource) of type PNG, JPEG and GIF in the ImageView widget.  Resources are usually loaded from the res/drawable[-qualifier] directory.  This makes it possible to provide different images optimised for the different screen resolutions the application supports.  In the absence of an appropriate resource, Android will scale up the resource from the default drawable directory.  The common qualifier names for the drawable directory are:
  • xhdpi - Extra high-density screen (320dpi)
  • hdpi - High-density screen (240dpi)
  • mdpi - Medium-density screen (160dpi)
  • ldpi - Low-density screen (120dpi)
PNG images are preferred for illustrations and drawings, while JPEG is preferred for photographs (for smaller file sizes and hence lower memory consumption).  GIF’s are not recommended due to copyright/royalty issues.


WebView



A widget that uses the Webkit engine to display HTML/CSS/JavaScript content (usually from an internet URL).  Web view widgets may be sized as appropriate, and can be used to integrate external content into an application.
An application that uses a web view to display internet content needs to declare the appropriate permission the application manifest file.


Web views that load external content need to configured to avoid reloading the content on screen size or device orientation change.  By default, when the screen size changes (keyboard appearing or hiding) or device orientation changes, the web view is reloaded.  It is preferred to modify the configuration to only re-render the content to fit the new screen in these cases.  This is controlled via the android:configChanges attribute of the activity in the manifest file.


Web views by default have JavaScript processing disabled.  This can be controlled via the setJavaScriptEnabled method.  URL's within the displayed content will by default be displayed in the user's preferred web browser application.  This can be modified to load the URL within the web view by attaching a WebViewClient instance to the widget using the setWebViewClient method.  The custom WebViewClient instance must over-ride the shouldOverrideUrlLoading method to return false (may be conditional based on URL patterns as appropriate for business needs).