Why is my ScrollView too wide only when it doesn't need to scroll?

Question

I have an activity layout file:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/compose_message_view"
        style="@style/Container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout style="@style/SectionContainer" >

            <TextView
                style="@style/FieldHeader"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawablePadding="8dp"
                android:focusable="true"
                android:focusableInTouchMode="true" />

            <Spinner
                android:id="@+id/compose_message_department"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="8dp"
                android:prompt="@string/compose_message_department_prompt"
                android:spinnerMode="dropdown" />
        </LinearLayout>

        <LinearLayout style="@style/SectionContainer" >

            <TextView
                style="@style/FieldHeader"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawablePadding="8dp"
                android:text="@string/message_account_label" />

            <Spinner
                android:id="@+id/compose_message_account"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="8dp"
                android:prompt="@string/compose_message_account_prompt"
                android:spinnerMode="dropdown" />
        </LinearLayout>

        <EditText
            android:id="@+id/compose_message_subject"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:layout_marginTop="16dp"
            android:hint="@string/compose_message_subject_hint"
            android:inputType="textCapSentences" />

        <EditText
            android:id="@+id/compose_message_body"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/compose_message_body_hint"
            android:inputType="textMultiLine|textCapSentences" />
    </LinearLayout>

</ScrollView>

The relevant styles look like this:

<style name="Container">
    <item name="android:layout_marginRight">130dp</item>
    <item name="android:layout_marginLeft">130dp</item>
    <item name="android:paddingTop">32dp</item>
    <item name="android:paddingLeft">32dp</item>
    <item name="android:paddingRight">32dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:orientation">vertical</item>
</style>

<style name="SectionContainer">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:orientation">vertical</item>
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="FieldHeader" parent="android:Widget.TextView">
    <item name="android:textAllCaps">true</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingTop">24dp</item>
    <item name="android:paddingRight">12dp</item>
</style>

Now when I open this activity on a Nexus 7 in landscape (haven't tried other tablets yet), the ScrollView and its contents extend beyond the right edge of the screen. When I type several lines into the compose_message_body EditText so that the UI extends below the bottom of the screen, the right edge of the UI comes in to where it belongs. See screenshots below.

Any ideas as to what is going on here?

Answer 1

This is a side effect of using the fillViewPort attribute on your ScrollView. If you have set fillViewPort to true, then this will only be taken into account if the measured height of your child is lower than the height of your ScrollView. In that case the ScrollView will stretch the content to fill the viewport and your margins won't be applied correctly. As soon as your child's content is greater than the height of your ScrollView, your margins will be applied correctly.

I suggest to not use margins on your child layout (LinearLayout) that you have placed in the ScrollView, but only use padding.

So your Container style could become

<style name="Container">
    <item name="android:paddingTop">32dp</item>
    <item name="android:paddingLeft">164dp</item>
    <item name="android:paddingRight">164dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:orientation">vertical</item>
</style>

Answer 2

In styles, your container has a margin left 130dp. Pushing your entire layout to the right by that much. If you set it to 0dp it should be in its correct position.