Centering views using weights Android v1.6+

At an Android talk I gave to a group of developers, when I was explaining how to create a view using an XML file, someone asked, “What should I write if I want a button to be centered and 50% of its parent width?” At first I didn’t understand what he was asking, but after he drew it on the board, I understood. His idea is shown in figures 1.1 and 1.2.


It looks simple, right? Now take five minutes to try to achieve it. In this hack, we’ll look at how to solve this problem using the LinearLayout’s android:weightSum attribute in conjunction with the LinearLayout’s child android:layout_weight attribute. This might sound like a simple task, but it’s something I always ask
about in interviews with developers because a lot of them don’t know the best way to do this.

Figure 1.1 Button with 50% of its parent width (portrait)

Figure 1.2 Button with 50% of its parent width (landscape)

Combining weightSum and layout_weight

Android devices have different sizes, and as developers we need to create XML in a way that works for different screen sizes. Hard-coding sizes isn’t an option, so we’ll need something else to organize our views.

We’ll use the layout_weight and weightSum attributes to fill up any remaining space inside our layout. The documentation for android:weightSum (see section 1.3) describes a scenario similar to what we’re trying to achieve:

1. Defines the maximum weight sum. If unspecified, the sum is computed by adding the layout_weight of all of the children. This can be used for instance to give a single child 50% of the total available space by giving it a layout_weight of 0.5 and setting the weightSum to 1.0.
2. Imagine we need to place stuff inside a box. The percentage of available space would be the weightSum and the layout_weight would be the percentage available for each item inside the box. For example, let’s say the box has a weightSum of 1 and we have two items, A and B. A has a layout_weight of 0.25 and B has a layout_weight of 0.75. So item A will have 25% of the box space, while B will get the remaining 75%.

The solution to the situation we covered at the beginning of this chapter is similar. We give the parent a certain weightSum and give the button half of that value as android:layout_weight. The resulting XML follows:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#FFFFFF"

android:gravity="center"

android:orientation="horizontal"

android:weightSum="1">

<Button

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="0.5"

android:text="Click me"/>

</LinearLayout>

The LinearLayout reads the android:weightSum attribute and learns that the sum of the weights of its children needs to be 1. Its first and only child is the Button and because the button has its android:layout_width set to 0dp, the LinearLayout knows that it must decide the button’s width by the available space given by the android:weightSum. Because the Button has the android:layout_weight set to 0.5, it will use exactly 50% of the available space.
A possible example would be a 200dp wide LinearLayout with its android:weightSum set to 1. The width of the Button would be calculated as follows:
Button's width + Button's weight * 200 / sum(weight)
Because the Button’s width is 0dp, the Button’s weight is 0.5. With the sum(weight) set to 1, the result would be the following:
0 + 0.5 * 200 / 1 = 100

The bottom line
Using LinearLayout’s weight is important when you want to distribute the available space based on a percentage rather than using hard-coded sizes. If you’re targeting Honeycomb and using Fragments, you’ll notice that most of the examples place the different Fragments in a layout using weights.

Ref@ http://developer.android.com/reference/android/widget/LinearLayout.html