Understanding Weight and Gravity

The orientation attribute is the first important attribute recognized by the LinearLayout layout manager. Other important properties that can affect size and position of child controls include weight and gravity. You use weight to assign size importance to a control relative to the other controls in the container. Suppose a container has three controls: one has a weight of 1 (the highest possible value), while the others have a weight of 0. In this case, the control whose weight equals 1 will consume the empty space in the container. Gravity is essentially alignment. For example, if you want to align a label's text to the right, you would set its gravity to right.

Note Layout managers extend android.widget.ViewGroup, as do many control-based container classes such as ListView. Although the layout managers and control-based containers extend the same class, the layout-manager classes strictly deal with the sizing and position of controls and not user interaction with child controls. For example, compare the LinearLayout to the ListView control. On the screen, they look similar in that both can organize children vertically. But the ListView control provides APIs for the user to make selections, while the LinearLayout does not. In other words, the control-based container (ListView) supports user interaction with the items in the container, whereas the layout manager (LinearLayout) addresses sizing and positioning only.

Now let's look at an example involving the weight and gravity properties (see Figure 4-11).

Now let's look at an example involving the weight and gravity properties (see Figure 4-11).

Figure 4-11. Using the LinearLayout layout manager

Figure 4-11 shows three user interfaces that utilize LinearLayout, with different weight and gravity settings. The UI on the left uses the default settings for weight and gravity. The XML layout for this first user interface is shown in Listing 4-25.

Listing 4-25. Three Text Fields Arranged Vertically in a LinearLayout, Using Default Values for Weight and Gravity

<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="one"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="two"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="three"/> </LinearLayout>

The user interface in the center of Figure 4-11 uses the default value for weight but sets android:gravity for the controls in the container to left, center, and right, respectively. The last example sets the android:layout_weight attribute of the center component to 1.0 and leaves the others to the default value of 0.0 (see Listing 4-26). By setting the weight attribute to 1.0 for the middle component and leaving the weight attributes for the other two components at 0.0, we are specifying that the center component should take up all the remaining white space in the container and that the other two components should remain at their ideal size.

Similarly, if you want two of the three controls in the container to share the remaining white space among them, you would set the weight to 1.0 for those two and leave the third one at 0.0. Finally, if you want the three components to share the space equally, you'd set all of their weight values to 1.0. Doing this would expand each text field equally.

Listing 4-26. LinearLayout with Weight Configurations

<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_weight="1.0" android:layout_height="wrap_content" android:text="one" android:gravity="left"/>

<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="two" android:gravity="center" android:layout_weight="1.0"/>

<EditText android:layout_width="fill_parent" android:layout_weight="1.0" android:layout_height="wrap_content" android:text="three" android:gravity="right" />

</LinearLayout>

0 0

Post a comment