Android layout tricks #1 (Android layout skills 1)

Android layout tricks #1

Http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html

The android UI toolkit offers several layout managers that are rather easy to use and, most of the time, you only need the basic features of these layout managers to implement a user interface. sticking to the basic features is unfortunately not the most
Efficient Way to create user interfaces. A common example is the abuse
Linearlayout, which leads to a proliferation of views in the view hierarchy. every view, or worse every layout manager, you add to your application comes at a cost: initialization, layout and drawing become slower. the layout pass can be especially expensive
When you nest several linearlayout that use
Weight parameter, which requires the child to be measured twice.

Let's consider a very simple and common example of a layout: a list item with an icon on the left, a title at the top and an optional description underneath the title. here is what such an item looks like:

To clearly understand how the views, one
Imageview and two
Texview, are positioned with respect to each other, here is the wireframe of the layout as captured

Hierarchyviewer:

Implementing this layout is straightforward with linearlayout. the item itself is a horizontal linearlayout with an imageview and a vertical linearlayout, which contains the two textviews. The source code of this layout is the lowing:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="?android:attr/listPreferredItemHeight"        android:padding="6dip">        <ImageView        android:id="@+id/icon"                android:layout_width="wrap_content"        android:layout_height="fill_parent"        android:layout_marginRight="6dip"                android:src="@drawable/icon" />    <LinearLayout        android:orientation="vertical"            android:layout_width="0dip"        android:layout_weight="1"        android:layout_height="fill_parent">        <TextView            android:layout_width="fill_parent"            android:layout_height="0dip"            android:layout_weight="1"                                android:gravity="center_vertical"            android:text="My Application" />                    <TextView              android:layout_width="fill_parent"            android:layout_height="0dip"            android:layout_weight="1"                         android:singleLine="true"            android:ellipsize="marquee"            android:text="Simple application that shows how to use RelativeLayout" />                </LinearLayout></LinearLayout>

This layout works but can be wasteful if you instantiate it for every list item of
Listview. The same layout can be rewritten using a single

Relativelayout, thus saving one view, and even better one level in view hierarchy, per list item. The implementation of the layout with a relativelayout remains simple:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="?android:attr/listPreferredItemHeight"        android:padding="6dip">        <ImageView        android:id="@+id/icon"                android:layout_width="wrap_content"        android:layout_height="fill_parent"                android:layout_alignParentTop="true"        android:layout_alignParentBottom="true"        android:layout_marginRight="6dip"                android:src="@drawable/icon" />    <TextView          android:id="@+id/secondLine"        android:layout_width="fill_parent"        android:layout_height="26dip"                 android:layout_toRightOf="@id/icon"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"                android:singleLine="true"        android:ellipsize="marquee"        android:text="Simple application that shows how to use RelativeLayout" />    <TextView        android:layout_width="fill_parent"        android:layout_height="wrap_content"                android:layout_toRightOf="@id/icon"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:layout_above="@id/secondLine"        android:layout_alignWithParentIfMissing="true"                        android:gravity="center_vertical"        android:text="My Application" /></RelativeLayout>

This new implementation behaves exactly the same way as the previous implementation, except T in one case. The list item we want to display has two lines of text: the title and
OptionalDescription. When a description is not available for a given list item, the application wocould simply set the visibility of the second textview
Gone. This works perfectly with the linearlayout implementation but not with the relativelayout version:

In a relativelayout, views are aligned either with their parent, the relativelayout itself, or other views. for instance, we declared that the description is aligned with the bottom of the relativelayout and that the title is positioned above the description
And anchored to the parent's top. with the description gone, relativelayout doesn't know where to position the title's bottom edge. to solve this problem, you can use a very special layout parameter called

Alignwithparentifmissing.

This Boolean parameter simply tells relativelayout to use its own edges as anchors when a constraint target is missing. for instance, if you position a View to the right of a gone view and set alignwithparentifmissing to true, relativelayout will instead
Anchor the view to its left edge. In our case, using alignwithparentifmissing will cause relativelayout to align the title's bottom with its own bottom. The result is the following:

The behavior of our layout is now perfect, even when the description is gone. even better, the hierarchy is simpler and because we are not using linearlayout's weights it's also more efficient. the difference between the two implementations becomes obvious
When comparing the view hierarchies in hierarchyviewer:

Again, the difference will be much more important when you use such a layout for every item in a listview for instance. hopefully this simple example showed you that getting to know your layouts is the best way to learn how to optimize your UI.