Padding

By default, widgets are tightly packed next to each other. If you want to increase the whitespace between widgets, you will want to use the android:padding property (or call setPadding() at runtime on the widget's Java object).

The padding specifies how much space there is between the boundaries of the widget's "cell" and the actual widget contents. Padding is analogous to the margins on a word-processing document—the page size might be 8.5"x11", but 1" margins would leave the actual text to reside within a 6.5"x9" area.

The android:padding property allows you to set the same padding on all four sides of the widget, with the widget's contents centered within that padded-out area. If you want the padding to differ on different sides, use android:paddingLeft, android:paddingRight, android:paddingTop, and android :paddingBottom (see Figure 7-1).

The value of the padding is a dimension, such as 5px for 5 pixels' worth of padding.

Figure 7-1. The relationship between a widget, its cell, and the padding values

LinearLayout Example

Let's look at an example (Containers/Linear) that shows LinearLayout properties set both in the XML layout file and at runtime.

<?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" >

<RadioGroup android:id="@+id/orientation" android:orientation="horizontal" android:layout width="wrap content" android:layout height="wrap content" android:padding="5px"> <RadioButton android:id="@+id/horizontal" android:text="horizontal" /> <RadioButton android:id="@+id/vertical" android:text="vertical" /> </RadioGroup>

<RadioGroup android:id="@+id/gravity" android:orientation="vertical" android:layout width="fill parent" android:layout height="wrap content" android:padding="5px"> <RadioButton android:id="@+id/left" android:text="left" /> <RadioButton android:id="@+id/center" android:text="center" /> <RadioButton android:id="@+id/right" android:text="right" /> </RadioGroup> </LinearLayout>

Note that we have a LinearLayout wrapping two RadioGroup sets. RadioGroup is a subclass of LinearLayout, so our example demonstrates nested boxes as if they were all LinearLayout containers.

The top RadioGroup sets up a row (android:orientation = "horizontal") of RadioButton widgets. The RadioGroup has 5px of padding on all sides, separating it from the other RadioGroup. The width and height are both set to wrap content, so the radio buttons will take up only the space that they need.

The bottom RadioGroup is a column (android: orientation = "vertical") of three RadioButton widgets. Again, we have 5px of padding on all sides and a "natural" height (android: layout height = "wrap content"). However, we have set android:layout width to be fill parent, meaning the column of radio buttons "claims" the entire width of the screen.

To adjust these settings at runtime based on user input, we need some Java code:

package com.commonsware.android.containers;

import android.app.Activity; import android.os.Bundle; import android.view.Gravity; import android.text.TextWatcher; import android.widget.LinearLayout; import android.widget.RadioGroup; import android.widget.EditText;

public class LinearLayoutDemo extends Activity implements RadioGroup.OnCheckedChangeListener { RadioGroup orientation; RadioGroup gravity;

@Override public void onCreate(Bundle icicle) { super. onCreate(icicle); setContentView(R.layout.main);

orientation=(RadioGroup)findViewById(R.id.orientation); orientation.setOnCheckedChangeListener(this); gravity=(RadioGroup)findViewById(R.id.gravity); gravity.setOnCheckedChangeListener(this);

public void onCheckedChanged(RadioGroup group, int checkedId) { if (group==orientation) { if (checkedId==R.id.horizontal) { orientation.setOrientation(LinearLayout.HORIZONTAL);

orientation.setOrientation(LinearLayout.VERTICAL);

if (checkedId==R.id.left) { gravity.setGravity(Gravity.LEFT);

else if (checkedId==R.id.center) { gravity.setGravity(Gravity.CENTER HORIZONTAL);

else if (checkedId==R.id.right) { gravity.setGravity(Gravity.RIGHT);

In onCreate(), we look up our two RadioGroup containers and register a listener on each, so we are notified when the radio buttons change state (setOnCheckedChangeListener(this)). Since the activity implements OnCheckedChangeListener, the activity itself is the listener.

In onCheckedChanged() (the callback for the listener), we see which RadioGroup had a state change. If it was the orientation group, we adjust the orientation based on the user's selection. If it was the gravity group, we adjust the gravity based on the user's selection.

Figure 7-2 shows the result when the sample application is first launched inside the emulator.

ftRffle 12:22 AM

Linear!, ay outDemo

I horizontal ^B vertical

Q eft Ql center 0 right

Figure 7-2. The LinearLayoutDemo sample application, as initially launched

If we toggle on the Vertical radio button, the top RadioGroup adjusts to match (see Figure 7-3).

LinearLayoutDemo horizontal ^^ vertical

Q eft center 0 right

Figure 7-3. The same application, with the Vertical radio button selected

If we toggle the Center or Right radio button, the bottom RadioGroup adjusts to match (see Figures 7-4 and 7-5).

LinearLayoutDemo horizontal ^^ vertical

9 left center 0 right

Figure 7-4. The same application, with the Vertical and Center radio buttons selected

Figure 7-5. The same application, with the Vertical and Right radio buttons selected

0 0

Post a comment