Lecture Presentation

Goals

  • Learn how to build a complete layout with nested LinearLayouts
  • Know about some common Views for input and display
  • Change the appearance of Views
  • Understand how resources and qualifiers work
  • Classes and methods introduced in this chapter
    • LinearLayout, EditText, CheckBox, ImageView, Spinner

Layouts

  • The layout element is responsible for laying out its child elements
    • Determines width and height of each child element, and how to position them in relation to one another. Different layout classes uses different attributes and rules when performing this operation.
  • Layouts are defined using ViewGroup-derived classes
    • LinearLayout
    • RelativeLayout
    • TableLayout
    • FrameLayout
    • GridLayout (from Android 4.0)

Layouts in this course

  • RelativeLayout is the default in the latest project template in the Android SDK
    • Actually LinearLayout was the previous default and I still think of LinearLayout as the simplest layout to understand and use.
  • We'll try and limit ourselves to LinearLayout for simplicity reasons
    • By combining LinearLayout objects inside a container that is also a LinearLayout, most (all?) layouts we'll need can be accomplished even though both RelativeLayout and GridLayout could be better and more efficient choices

LinearLayout attributes

  • android:orientation
    • Specify "horizontal" or "vertical" depending on in which direction all children should be layed out
  • Nesting
    • Create LinearLayout inside of a LinearLayout
    • Forms a "Grid"
    • Usually the orientation changes
    • The child LinearLayout has child attributes like other child Views
    • Not recommended for performance reasons if it can be avoided (with other layouts)

LinearLayout layout attributes for children

  • android:layout_width
    • wrap_content to let the contents of the view decide the width
    • match_parent to have the width of the child extended to the maximum width of the layout
  • android:layout_height
    • Same as layout_width, but for the height of course. Usually for a layout with horizontal orientation it doesn't make any sense to have any child specify layout_width as fill_parent and vice versa.
  • android:layout_gravity
    • If the layout_width/layout_height hasn't extended the size of the child view to the full width/height of the layout, this value will determine to which edge to align the child view.
  • android:layout_margin
    • Specify a value here to have extra space between the child view's contents and any surrounding child views. Is also available in parts such as layout_marginLeft, layout_marginTop etc.

Automatic expansion with layout_weight

  • One or more views can be automatically distributed evenly across the width or height
    • Can also be used to make a view fill the remaining space of a container
    • For some reason you don't specify percentages for layout_width/layout_height, but instead use layout_weight
  • Usage
    • Set the layout_width/layout_height to "0px"
    • Set the layout_weight to a number
  • The value of layout_weight only have meaning in comparison with other views in the same container that also have a layout_weight specified

EditText

  • Input field where user can enter text, numbers etc
  • android:inputType
    • Defines what type of content can be typed in the field
    • Also means that different virtual keyboards can be displayed
    • Many options exist, like "text", "textMultiLine", "textPassword", "number", "phone"
    • Can also be combined with flags like "textAutoCorrect"
  • Read/write current value in Java
    String value = _textView.getText().toString();
    _textView.setText("Hello, world!");
    

CheckBox

  • Input field with a checkmark and text
  • android:checked
    • The default value of the field, "true" och "false"
  • CheckedTextView
    • Can be used instead of CheckBox if you want the check mark to the right of the text
  • Read/write current value in Java
    if (_checkBox.isChecked())
      _checkBox.setChecked(false);
    

ImageView

  • Display an image
  • android:src
    • The image to display. Unfortunately http/web address are not possible here. Must be a Drawable.
  • android:contentDescription
    • Textual description/replacement of the image. Important to specify for accessibility reasons (people with visual disabilities).
  • android:scaleType
    • How to display the image with regards to the size of the view. One example is "fitXY" where the image is stretched to fit the view both horizontally and vertically. Default is "center" where the image size is not changed and it is centered in the view.

Spinner

  • Drop list of options
    • Default from Android 4.0 is to show drop list in the same view, for older versions the list of options may be shown in a dialog popup.
  • android:entries
    • An array xml resource identifier. The xml resource file will contain all strings in the list.
  • /res/values/array.xml
    <resources>
      <string-array name="countries">
        <item>Sweden</item>
    
  • android:prompt
    • Title of dialog popup when such is shown for choosing one of the options
  • android:spinnerMode
    • Can be used to force popup dialog on newer versions using value "dialog".

Styling Views in Android

  • The styling system is not as versatile as CSS in the HTML world, but there are a few similar concepts
  • Change style of View by setting attributes on the xml element
  • Multiple attributes can be collected into a Style
    • A Style and its attributes are put in its own xml file and referenced in the View element. An Android Style is somewhat similar to a CSS class.
  • Themes is a way to apply multiple styles automatically for an Activity
    • Themes are specified on the Activity (or the Application as a whole). Themes are also the way for different Android platform versions to update its appearence of the same View objects. An Android Theme is somewhat similar to a CSS stylesheet.
  • We'll skip most of Style and Themes for simplicity reasons in this course

General View attributes

  • android:textColor
    • Color of any text displayed in the view
  • android:textSize
    • Font size of any text displayed in the view
  • android:background
    • Background color (or a Drawable) for the background of the view
  • android:padding
    • Space between view edge and its contents. Can be specifed as a single attribute, or in individual components paddingLeft, paddingTop, paddingRight and paddingBottom.
  • android:gravity
    • How content inside of the View is aligned horizontally and vertically. Two values can be combined with the pipe "|" character.

Units

  • Units that can be used when specifying sizes like padding, margin, layout_width etc
  • px
    • Screen pixels. 1px is simply always one pixel on the screen.
  • dp (or dip)
    • Density-independent pixels. This unit is based on the physical density of the screen, relative to a screen with 160 pixels/inch. A size with this unit should have the same physical size on all screens from tiny 3 inch to tablet 10 inch sizes, independently of the pixel resolution of those screens. This is the recommended unit for all sizes except textSize.
  • sp
    • Size-independent pixels. This is like the dp unit, but is also scaled according to an optional user setting for font size. This is the recommended unit for textSize.
  • Colors are specified as hex values with 6 characters plus the

Colors

  • Specified in xml attributes as hexadecimal value prefixed with
    <TextView android:textColor="#a05528"
    
  • Exactly as in HTML/CSS
    • Two hexadecimal digits for each of the colors red, green and blue
  • Also supports a forth value for opacity (alpha channel) which is the first, if specified
    <TextView android:background="#880000ff"
    

View

  • Use just the base View object when a drawable background is all you need
  • Can also be useful when padding/extending empty areas in a user interface
  • Or to simluate lines/dividers in the user interface

Drawables

  • Drawables are an abstraction in Android for handling backgrounds, images and other "drawable" things
    • BitmapDrawable - binary image
    • ColorDrawable - a single color
    • GradientDrawable - smooth transition from one color into another
    • NinePatchDrawable - special binary image that can have both non-stretchable and stretchable parts
  • Specified in resource folder "res/drawable"
    • Binary files like png and jpg images
    • Xml files that can be converted into objects like ShapeDrawable

Bitmap drawables

  • Just drag and drop image files onto the drawable folder in Eclipse project
    • Create it first
    • Choose to Copy the file so the project has all required files in its folder
  • Name must comply with Java naming rules
    • Keep it to a-z, 0-9 and underscores
  • File name is also the resource identifier
  • /res/drawable/background.jpg
    <ImageView android:src="@drawable/background"
    

Shape drawables as xml resource file

  • Use for rounded corners
  • Use for gradient backgrounds
  • Add xml resource file with shape as root element
  • /res/drawable/example.xml
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" />
      <gradient android:startColor="#ee8888" android:endColor="#dd3333"
        android:type="linear" android:angle="270" />
    </shape>
    

Resource Qualifiers

  • A qualifier is a condition that can be used to determine which specific resource file to use
  • Qualified resource files have the same file name, but are put in different folders
  • The folder determines the qualifier, what to check and what value to trigger the particular file
  • The folder names is usually enough to realize what the qualifier is
    • -land for landscape orientation
    • -sv for Swedish language
  • Adding Android XML File in Eclipse will use a dialog wizard
    • File, New, Android XML File
    • Choose Resource type
    • Set a File name, then Next
    • Move an Available qualifier to Chosen qualifiers and set its value

Qualifier use cases

  • Landscape/Portrait orientation of device
    • Specify a different layout for landscape orientation, taking into the account that there is more space horizontally than vertically.
  • Language of device
    • Usually only used for texts in the user interface, even though you could use it for other resources too.
  • Tablet devices (screen size/resolution) Specify a different layout when there is more display space on the device, like on 7 or 10 inch tablet compared to a phone.

Strings and language support

  • If you have any ambition to translate your application into more than one language
    • Make sure NO string literals for user interface text is stored in Java
    • All user interface text i xml attributes should also be string resources
  • Stored as resource xml files in /res/values/strings.xml
    <resources>
      <string name="msg">Welcome to this application!</string>
    
  • Reference in layout xml files
    <TextView android:text="@string/msg" />
    
  • Reference in Java
    _textView.setText(R.string.msg);
    

Good design

  • Important to use the mobile medium to its fullest and create beautiful and useful applications
  • Use inspiration and visual design from other platforms, but keep the user interface patterns on the platform you are targeting
  • Don't be too inventive so users are confused
  • Learn from the source

Design inspiration

More information

  • Book references
    • Android Programming Unleashed, Chapter 1 Introduction to Android, Using the TextView Control
    • Android Programming Unleashed, Chapter 2 Basic Widgets, Using the EditText Control
    • Android Programming Unleashed, Chapter 3 Laying Out Controls in Containers, LinearLayout
    • Android Programming Unleashed, Chapter 4 Utilizing Resources and Media, Resources