Layouts

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

CheckBox

Can be used instead of CheckBox if you want the check mark to the right of the text

Read/write current value in Java

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

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

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

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

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

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

Reference in layout xml files

Reference in Java

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