Mobile
 

Android Application Development : Layouts (part 1) - inearLayout

1/17/2012 4:45:07 PM

Layouts are Android’s solution to the variety of screens that come on Android devices: they can have different pixel densities, different dimensions, and different aspect ratios. Typical Android devices, such as the HTC G1 mobile phone, even allow changing the screen orientation (portrait or landscape) while applications are running, so the layout infrastructure needs to be able to respond on the fly. Layouts are intended to give developers a way to express the physical relationship of Views as they are drawn on the screen. As Android inflates the Layout, it uses the developer requests to come up with a screen layout that best approximates what the developer has asked for.

Looking a little deeper, layouts in Android are in the form of a tree, with a single root and a hierarchy of Views. Look back at any of the XML Layout files in the previous section and you’ll see that the XML tags create just such a hierarchy, with a screen Layout as the root of the tree. Each View in the tree is termed the parent of the Views it contains and the child of the View that contains it. Layout is a two-pass process:


Measure pass

Traversing the tree from the root, each View in the layout records its dimensional request—in other words, how much vertical height and horizontal width it needs to display itself in the final display.


Layout pass

Again traversing the tree from the root, each parent View uses the available layout information to position its children as requested. If the requests can’t be followed explicitly, Android does its best to make everything fit on the screen. If there are no requests given, it uses a default set of layout parameters. Each parent can pass layout information on to its children, telling them where they are positioned and what screen dimensions they have been granted (they might get less than they requested).

A Layout is a View itself, so there’s nothing wrong with having multiple Layouts in a single layout XML file—they just have to be arranged in a hierarchy. So it’s perfectly valid to have a vertical LinearLayout that includes a TableLayout as one of its rows.

1. Frame Layout

The Frame Layout is sort of a null layout specification. It reserves space on the screen for a single View to be drawn, and the View is always located at the upper left of the space. There is no way to specify a different location for the View, and there can be only one View in the Layout. If more than one View is defined in the layout file, they are just drawn on top of each other, all pinned to the upper-left corner.

2. LinearLayout

LinearLayouts are used extensively in Android applications, and we used them in example code earlier. A LinearLayout asks that the contained Views be layed out as either a series of rows (vertical LinearLayout) or a series of columns (horizontal LinearLayout). In a vertical LinearLayout, all the rows are the same width (the width of the widest child). In a horizontal LinearLayout, there is one row of Views, all the same height (the height of the tallest child).

Figure 3 shows an example of a LinearLayout containing four EditTexts. The first two have no weights assigned. EditText3 has a weight of 1 and EditText4 has a weight of 2. The effect is to make EditText4 twice as big as EditText3, while EditText1 and EditText2 just split whatever space the layout leaves over.

Example 1. Vertical LinearLayout resource file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="EditText1"
/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="EditText2"
/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="EditText3"
/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="EditText4"
/>
</LinearLayout>

Figure 1. Vertical LinearLayout


Example 2. Horizontal LinearLayout resource file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="E1"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="E2"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="E3"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="E4"
/>
</LinearLayout>

Figure 2. Horizontal LinearLayout


The horizontal layout might not look exactly as you would think: how come E4 is narrower than the other three? The answer is that there is a default minimum width for an EditText. If you build and run the horizontal example and type something into EditText E1, you’ll see that it expands in width as the line gets longer, which is just what we asked for with android:layout_width="wrap_content".

In addition to the usual dimensional parameters for child Views (width, height, padding), you can include a weight for each child (attribute android:lay⁠out_weight=;weight). The weight tells the layout manager how you want to use unfilled space, and defaults to a value of 0. If you specify children with weights greater than zero, the layout manager will allocate unused space to each child in proportion to its weight.

Figure 3 shows an example of a LinearLayout containing four EditTexts. The first two have no weights assigned. EditText3 has a weight of 1 and EditText4 has a weight of 2. The effect is to make EditText4 twice as big as EditText3, while EditText1 and EditText2 just split whatever space the layout leaves over.

Figure 3. Weighted LinearLayout

 
Others
 
- Building an Advanced Java Game on Symbian OS (part 4) - Using the Bluetooth API
- Building an Advanced Java Game on Symbian OS (part 3) - Using the Mobile 3D Graphics API
- Building an Advanced Java Game on Symbian OS (part 2) - Using the Mobile Media API & Using the Scalable 2D Vector Graphics API
- Building an Advanced Java Game on Symbian OS (part 1)
- jQuery 1.3 : Simultaneous versus queued effects (part 2) - Working with multiple sets of elements & Callbacks
- jQuery 1.3 : Simultaneous versus queued effects (part 1) - Working with a single set of elements
- iPhone 3D Programming : Crisper Text with Distance Fields (part 3) - Implementing Outline, Glow, and Shadow Effects
- iPhone 3D Programming : Crisper Text with Distance Fields (part 2) - Smoothing and Derivatives
- iPhone 3D Programming : Crisper Text with Distance Fields (part 1) - Generating Distance Fields with Python
- Mapping Well-Known Patterns onto Symbian OS : Singleton
- Mapping Well-Known Patterns onto Symbian OS : Model–View–Controller
- The Anatomy of a Mobile Site : STYLING WITH CSS - CSS Considerations for Mobile & Optimizing CSS
- The Anatomy of a Mobile Site : INVOKING OTHER DEVICE CAPABILITIES & THE STATE OF JAVASCRIPT
- iPad Development : The Dual-Action Color Popover (part 3) - Serving Two Masters
- iPad Development : The Dual-Action Color Popover (part 2) - Hooking Up the Grid
- iPad Development : The Dual-Action Color Popover (part 1) - Creating a Simple Color Grid
- XNA Game Studio 3.0 : Creating Fake 3-D - Creating Shadows Using Transparent Colors
- Android Application Development : ViewGroups (part 2) - ListView, ListActivity, ScrollView & TabHost
- Android Application Development : ViewGroups (part 1) - Gallery and GridView
- Java ME on Symbian OS : MIDP 2.0 Game API Core Concepts
 
 
Most View
 
- Microsoft Lync Server 2013 Edge Server : Edge Server Installation (part 3) - Deploying a Load-Balanced Edge Server Pool, Publish the Topology
- Windows Server 2012 : Increase scalability and performance (part 7) - SMB and PowerShell
- Lync Server 2013 Clients : Mac Client - Installing the Client - Feature Comparison
- SQL Server 2012 : Enhancing Your Troubleshooting Toolset with Powershell (part 6) - Index Maintenance, Managing Disk Space Utilization of Backups
- Windows Server 2012 : A complete virtualization platform (part 6) - Live Migration without shared storage, Performing Live Migration
- Windows 8 : Disks and Storage Devices - Simple Volumes (part 1) - To create and format a new partition or volume
- Windows Phone 8 : Working with People - The People Hub (part 5) - Searching for a Contact,Using Jump Lists to Find a Contact
- Windows 8 : Network and Sharing Center (part 2)
- Windows 8 : Using the Control Panel Items (part 9) - Power Options
- Active Directory 2008 : Configuring DNS Integration with Active Directory
 
 
Top 10
 
- Microsoft Project 2010 : Setting Up Project for Your Use - Defining Project Information (part 2) - Defining Project Properties
- Microsoft Project 2010 : Setting Up Project for Your Use - Defining Project Information (part 1) - Understanding the Project Information Dialog Box
- Microsoft Project 2010 : Setting Up Project for Your Use - Setting the Task Mode
- Securing an Exchange Server 2007 Environment : Securing Outlook Web Access
- Securing an Exchange Server 2007 Environment : Protecting Against Spam (part 2) - Filtering Junk Mail
- Securing an Exchange Server 2007 Environment : Protecting Against Spam (part 2) - Filtering Junk Mail
- Securing an Exchange Server 2007 Environment : Protecting Against Spam (part 1) - Protecting Against Web Beaconing
- Securing an Exchange Server 2007 Environment : Securing Outlook 2007 (part 2) - Encrypting Communications Between Outlook and Exchange , Blocking Attachments
- Securing an Exchange Server 2007 Environment : Securing Outlook 2007 (part 1) - Outlook Anywhere
- Securing an Exchange Server 2007 Environment : Securing Your Windows Environment (part 3) - Keeping Up with Security Patches and Updates