Layouts: Organizing The Screen Main Layout Strategies: Android Apps Programming

Android Apps Programming
Layouts: Organizing the Screen
Main Layout Strategies

XML-based
Declare layout in res/layouts/some_layout.xml
Set various XML properties
Use visual editor in Eclipse
Load with setContentView(R.layout.some_layout)
XML Layout Attributes

Each Layout class has an inner class called LayoutParams that defines general XML
parameters that layout uses. These parameters are always named android:layout_blah,
and usually have to do with sizes and margins.
Layout classes define more specific attributes. Many inherited from LinearLayout
(which extends ViewGroup and View).
Example: <LinearLayout
android:layout_width=match_parent
android:layout_height=wrap_content
android:gravity=center_horizontal
android:background=@color/color_1>
...
</LinearLayout>
Commonly Used Attributes
Size
android:layout_height, android:layout_width
match_parent fill the parent space (minus padding)
Renamed from fill_parent in older versions
wrap_content use natural size (plus padding)

An explicit size with a number and a dimension.
android:layout_weight
It controls the resizing behavior of its child Views. The value is either 0 or 1.
Using a weight of 1 makes the View stretch, while using 0 will make that View
just as big as needed.
Alignment
android:layout_gravity
How the View is aligned within containing View.
android:gravity
How the text or components inside the View are aligned.
Possible values:
top, bottom, left, right, center_vertical, center_horizontal, center, fill_vertical,
fill_horizontal, fill, clip_vertical, clip_horizontal
Margins (blank space outside)

android:layout_marginBottom, layout_marginTop
android:layout_marginRight, layout_marginLeft
Lecture 6 Layouts Page 1

Units (e.g., 14.5dp) negative values are legal

dp density-independent pixels (scaled by device resolution)
sp scaled pixels (scaled based on preffered font size)
px pixels
in inches
mm millimiters
Padding (blank space inside)

android:paddingBottom, android:paddingTop
android:paddingLeft, android:paddingRight
It controls the spacing between Views within a layout. Values are numbers with
units as above.
ID
android:id
Used if the Java code needs a reference to View

Used in RelativeLayout so XML can refer to earlier ids
Color
android:background (color or image, for any layout)
android:textColor(e.g. for TextView or Buttton)
Example: android:background=#ff8D8D8D
Click Handler
android:onClick
Should be a public method in mainActivity that takes a View (the thing clicked) as
argument and returns void.
Types of Layout:
LinearLayout
Put components in a single row or single column;
Key XML attributes:
android:orientation
horizontal (a row) or vertical (a column)
android:gravity
How the Views inside are aligned.
Possible values:
top, bottom, left, right, center_vertical, center_horizontal, center,
fill_vertical, fill_horizontal, fill, clip_vertical, clip_horizontal
RelativeLayout
Position other components relative to those components
Key XML attributes:

Aligning with container

android:layout_alignParentBottom( and Top, Right, Left)
android:layout_centerInParent( and centerHorizontal, centerVertical)
These all take true or false as values
Aligning with other component

android:layout_alignBottom( and Top, Right, Left)
android:layout_toLeftOf( and toRightOf)
android:layout_above( and below)
These all take existing ids as values
androidLayout_alignBlah=@id/existing_id
Referring to Existing Ids
First component @+id for assigning a new id

<Button id = @+id/button_1...
android:layout_alignParentRight=true .... />
Second component @id for referring to an existing id

<Button android:layout_toLeftOf=@id/button_1 ...>
Result Button 2 Button 1
TableLayout
Put widgets or nested layouts in a grid. Like HTML tables, the number of rows and
columns is determined automatically, not explicitly specified. Components are
usually placed inside TableRow.
Key XML attributes:
android:stretchColumns
An index or comma-separated list of indexes. Specifies the column or columns
that should be stretched wider if the table is narrower than its parent. Indexes are 0-
based.
android:shrinkColumns
Column(s) that should be shrunk if table is wider than parent.
android:collapseColumns
Column(s) to be totally left out. Can be programmatically putback in later.
TableRow Goes inside TableLayout to define a row.

Key XML attributes:
android:layout_column
Normally, elements are placed in left-to-right order. However, you can use
android:layout_column to specify an exact column, and thus leave earlier
columns empty.
android:layout_span

The number of columns the element should straddle, like colspan for HTML
tables. There is nothing equivalent to HTMLs rowspan; you must use nested
table instead.
AbsoluteLayout
From older versions; now depracated; use RelativeLayout
FrameLayout
For formatting a single item. Usually used explicitly with
ViewGroups
TabHost
Used internally by other layouts. Combines tabs with switching Activities
ListView
GridView
A GridView control is simply a container that holds a list of View objects. GridView is
a type of control called an AdapterView. Controls derived from AdapterView are
excellent for repeated items with identical layouts. To effectively use the GridView
Control, an adapter must be created as well as the
ScrollView
To change Orientation
In activity_main.xml : android:screenOrientation=portrait
android:configChanges=orientation|keyboardHidden
It specifies the screen orientation for the app. 2nd line makes sure that screen
orientations do not occur when either
The hardware keyboard is slid open or closed on a device
The software keyboard is enabled or disabled.
Create a landscape layout with the wizard:

Create layout
File NewAndroid XML file
Select the Layout radio Button
Type same filename with your layout in portrait
For the folder name: /res/layout-land
This will automatically add Landscape as a Chosen Qualifier
Create a small screen only layout with the wizard:

Create layout
File NewAndroid XML file
Select the Layout radio Button
Type same filename with your layout in portrait
Add the size by selecting size from the Available Qualifiers.
Select screen size Small from the dropdown on the right.
A new layout xml file will be created in the layout-small directory for small screen
phones
Android 3.0 introduced the idea of minimum screen widths and heights to
determine the dynamic layout loading. Aside from declaring small, med or large screen
widths, declare it in Density Independent Pixels (DPs). The name of the folder

determines in the size the layout applied for. The width or height is specified with a w or
h, followed by the dimensions in DPs. Screens larger than the specified width or height
load the layouts in the folder.
Screen Size
Small screens are at least 426dp x 320dp
Normal screens are at least 470dp x 320dp
Large screen are at least 640dp x 480dp
xLarge screens are at least 960dp x 720dp
Controlling Screen Timeout

On Main Activity : tView.setKeepScreenOn(true);
Making a View Display Full-Screen

On Main Activity :
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
Targeting different screen sizes

In manifest:
<supports-screens>
android:smallScreens=false
android:normalScreens=true
android:largeScreens=true
android:xlargeScreens=true
android:anyDensity=true
</supports-screens>
More Reading
Tutorial: Declaring Layout
http://developer.android.com/guide/topics/ui/declaring-layout.html
Tutorial: Hello Views

http://developer.android.com/resources/tutorials/views
Chapter:Working with Containers

From the Busy Coders Guide to Android Developmemt by Mark Murphy
http://commonsware.com/Android/
Chapter: User Interface Layout

From The Andropid Developers Cookbook by Steele & To
resource for developing for multiple screen sizes

http://developer.android.com/guide/practices/screens_support.html

Layouts: Organizing The Screen Main Layout Strategies: Android Apps Programming

Uploaded by

Copyright:

Available Formats

Layouts: Organizing The Screen Main Layout Strategies: Android Apps Programming

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Layouts: Organizing The Screen Main Layout Strategies: Android Apps Programming

Uploaded by

Copyright:

Available Formats

Android Apps Programming

Layouts: Organizing the Screen

Main Layout Strategies

XML Layout Attributes

Commonly Used Attributes

wrap_content use natural size (plus padding)

Margins (blank space outside)

Lecture 6 Layouts Page 1

Units (e.g., 14.5dp) negative values are legal

Padding (blank space inside)

Used if the Java code needs a reference to View

Key XML attributes:

Key XML attributes:

Lecture 6 Layouts Page 2

Aligning with container

Aligning with other component

Referring to Existing Ids

First component @+id for assigning a new id

Second component @id for referring to an existing id

Result Button 2 Button 1

Key XML attributes:

TableRow Goes inside TableLayout to define a row.

Lecture 6 Layouts Page 3

Create a landscape layout with the wizard:

Create a small screen only layout with the wizard:

Lecture 6 Layouts Page 4

Controlling Screen Timeout

Making a View Display Full-Screen

Targeting different screen sizes

Tutorial: Hello Views

Chapter:Working with Containers

Chapter: User Interface Layout

resource for developing for multiple screen sizes

Lecture 6 Layouts Page 5

You might also like