Question

I have a form that I want to display in a single column of:

     account name
______________________

       password
______________________

[       connect       ]

when horizontal space is limited (i.e. portrait orientation). And I want it to flow into a two column orientation when horizontal space is abundant:

account name _________________
    password _________________
[          connect            ]      

I know you can do this with a pair of layout resources, but I would like to only have one layout with a dynamic number of columns.

Answer 1

This may not be a useful example, but the approach might prove useful.

First, the GridLayout

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:useDefaultMargins="true"
        android:columnCount="@integer/create_account_pane_column_count"
        android:alignmentMode="alignBounds" >

<!-- Error messages -->
<TextView
        android:id="@+id/errors"
        android:layout_columnSpan="@integer/create_account_pane_column_count"
        android:textColor="@color/error_red"
        android:textSize="@dimen/small_text_size" />

<TextView
        android:id="@+id/account_name_label"
        android:layout_gravity="fill_horizontal"
        android:text="@string/label_account_name"
        android:textColor="?android:textColorSecondary" />

<EditText
        android:id="@+id/account_name"
        android:layout_gravity="fill_horizontal"
        android:ems="10"
        android:hint="@string/hint_account_name"
        android:inputType="textNoSuggestions" >

    <requestFocus />
</EditText>

<TextView
        android:id="@+id/password_label"
        android:layout_gravity="fill_horizontal"
        android:text="@string/label_password"
        android:textColor="?android:textColorSecondary" />

<EditText
        android:id="@+id/password"
        android:layout_gravity="fill_horizontal"
        android:ems="10"
        android:hint="@string/hint_password"
        android:inputType="textPassword" />

<Button
        android:id="@+id/connect"
        android:layout_columnSpan="@integer/create_account_pane_column_count"
        android:layout_gravity="fill_horizontal"
        android:text="@string/connect" />

<Button style="?android:borderlessButtonStyle"
        android:id="@+id/create_account"
        android:layout_columnSpan="@integer/create_account_pane_column_count"
        android:layout_gravity="center_horizontal"
        android:text="@string/create_a_new_account"
        android:textColor="@color/kas_yellow" />

</GridLayout>

Then I have two integer resource files, values-large-land-v11/integers.xml has <integer name="create_account_pane_column_count">2</integer> and values/integers.xml has <integer name="create_account_pane_column_count">1</integer>. This gives dynamic columns, where there is one column unless the device and orientation matches large land v11 (7″ tablets and above in landscape orientation).

Finally, to get the labels to align nicely (i.e centered when stacked and right aligned when inline) I set it programmatically since the xml value didn’t seem to accept a resource (neither integer nor string).

@Override
public void onConfigurationChanged(Configuration new_configuration) {
    super.onConfigurationChanged(new_configuration);

    alignLabels();
}

/**
 * Aligns the labels depending on the number of columns in the layout
 */
private void alignLabels() {
    final int column_count = getResources().getInteger(R.integer.create_account_pane_column_count);
    final int gravity = column_count == 1? Gravity.CENTER_HORIZONTAL : Gravity.RIGHT;
    _account_name_label.setGravity(gravity);
    _password_label.setGravity(gravity);
}

Also call alignLabels() in the onCreate or onCreateView (for Fragments) to set the gravity on the initial page layout.

Side note: my labels use my accent color when their associated field has focus if you notice that.