Creating simple XML layouts in Android is dead easy, but getting them to look how you want is more tricky. A bit like a Web page, elements can be made to fill all the remaining space by setting the android:layout_weight attribute.
Here's a very simple login form with and without the android:layout_weight attributes as shown in bold in the layout XML below.
The left-hand screenshot shows what you get if you use the UI builder in Eclipse -- all the elements are scrunched up in the corner. Specifying android:layout_weight tells the UI that a given element should expand to fill all the remaining space.
If more than one element in a given container has a layout_weight they share the available space in proportion to their relative weights.
<?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" android:padding="3sp">
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="@string/intro" android:textSize="18sp" android:paddingBottom="15sp"/>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1">
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="@string/email_address"/>
<EditText android:id="@+id/EditText01" android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="@string/password"/>
<EditText android:id="@+id/EditText01"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:password="true"/>
</LinearLayout>
<!-- Sign in and Cancel filling horizontal space -->
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<Button android:id="@+id/Button01"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="@string/sign_in" android:layout_weight="1"/>
<Button android:id="@+id/Button02"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="@string/cancel" android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
Pretty much any layout you want can be accomplished with a combination of LinearLayout and the following attributes:
android:layout_width / android:layout_height
There are only two valid values: wrap_content and fill_parent. Note that fill_parent does exactly what it says on the tin, causing the element to completely fill the parent even if it means pushing other elements out of view.
android:gravity
See android docs for valid values. Confusingly this attribute should be set in the container to tell it where its children should go (e.g. top, middle, bottom) and specifies both vertical and horizontal positioning within the element.
android:layout_weight
Specifies how any leftover space is used up. The most common thing is to have one element take up all the remaining space. To do this, just that element needs android:layout_weight=1. If more than one element has an android:layout_weight then they share the remaining space in proportion to their relative weights.
Posts
