Android Layout Basics Topics Screen resolution – Important factor in App Development Density Independent Pixels: dp vs sp XML Syntax wrap_content and match_parent Lab 2 Exercise 1

Optimal Mobile Development Mobile Apps must run optimally across a range of devices. Developers must consider the following: Processing Memory usage Screen resolution

Android Screen Resolution in the Early Days Android was first released in 2008. In 2008 there was only one commercially available device, the T-Mobile G1. It was common practice to build apps specifically with the resolution of this device in mind.

Why is Resolution important? Screen resolution is a commonly used spec when buying a device. Android developers need to build apps that function well on all Android devices. There are hundreds of different Android devices, with different resolutions, to choose from. How does this differ from Apple devices?

Screen Resolution A screen is comprised of a grid (thousands or millions) of pixels, arranged in rows and columns. Each pixel represents the bits that store information about color depth. DPI (dots per inch) describes pixel density of a screen .

Potential problem (with Android images): An image may end up too small on the higher-resolution devices. An image may end up too large on the smaller-resolution devices.

Image Solution: Density-Independent Pixel, dp Consider a 2dp by 2dp View element. The same physical size is maintained on different resolution devices. Android maps dps to a different number of pixels. dps are relative to a 160dpi screen, so one dp is one pixel on a 160 dpi screen.

Scale-Independent Pixel, sp sp is a scale-independent pixel. Usage: sp is used when defining text size. dp is used when defining image size.

Layouts and XML XML is Extensible Markup Language. XML is used to describe how an Android app is going to look. XML is used to build layouts and other data resource files. An app layout will use XML to specify where View elements will be placed on an interface screen.

Example What information is stored in this XML element?

XML syntax Option 1: XML information is stored as key/value pairs. XML elements begin with an opening angle bracket, followed by the View type. Key/value pairs are a list of attributes and values A list of attributes often ends with forward slash and a closing angle bracket. This is a self-closing tag.

Attribute /value pairs syntax  Attribute names are located the left side. Values are on the right side. Attribute values should be put in quotation marks as part of the syntax for XML. There are many attributes for a given view type. Unless specified, attributes are assigned default values. The TextView XML element below uses a self-closing tag.

XML syntax Option 2: Instead of a self-closing tag an element definition may use a separate opening tag and a closing tag. This syntax is useful when using a View that is a container. The TextView XML element below uses a closing tag.

Another Example of XML syntax Option 2 This LinearLayout is a container used to store a sequential list of items. A separate opening tag and a closing tag allows the placement of items in a container View.

wrap_content and match_parent wrap_content and match_parent are values that specify a height and width. wrap-content means that the width (and height) will accommodate the width and height of content, which may change over time. match-parent forces the view to occupy the complete area of the parent view - it will match the parent dimensions. Look at the examples below.

Lab 2 Exercise 1

Lab 2 Ex 1 Structure Task 1: Locate the images. Task 2: Place images in the drawable folder.

Lab 2 Exercise 1: Layout Design Task 3: Build the layout Lab 2 Exercise 1: Layout Design Task 3: Build the layout. Task 4: Code and test the app.

Guide for building main_layout: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView …/> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#62f1f6"> <TextView …. /> <Button …. /> </RelativeLayout> </LinearLayout> Add necessary attributes as key value pairs.