How to wrap a relative layout in a Scrollview?

Question

I tried to modify my main activity to convert to a scroll view but when I added the Scrollview elements around the layout xml,the formatting is messed up.

Can anyone spot where I made a mistake when wrapping it in a ScrollView?

This is the layout before adding Scrollview:

This is after:

And this is how I implemented it in the layout xml:

 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
     >

<RelativeLayout

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >


    <EditText
        android:id="@+id/ductDepth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/calc"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="37dp"
        android:ems="10"
        android:hint="Enter duct depth mm"
        android:inputType="numberDecimal"
        android:singleLine="true" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/offDepth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView3"
        android:layout_alignLeft="@+id/ductDepth"
        android:layout_marginBottom="14dp"
        android:ems="10"
        android:hint="Enter offset depth mm"
        android:inputType="numberDecimal"
        android:singleLine="true" />

    <EditText
        android:id="@+id/offLength"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView2"
        android:layout_alignLeft="@+id/offDepth"
        android:layout_marginBottom="20dp"
        android:ems="10"
        android:hint="Enter offset length mm"
        android:inputType="numberDecimal"
        android:singleLine="true" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/offDepth"
        android:layout_alignLeft="@+id/offDepth"
        android:text="Depth:"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/ductDepth"
        android:layout_alignLeft="@+id/ductDepth"
        android:text="Duct Depth:"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/offLength"
        android:layout_alignLeft="@+id/offLength"
        android:text="Length:"
        android:textSize="30sp" />

    <Button
        android:id="@+id/calc"
        android:layout_width="200dp"
        android:layout_height="70dp"
        android:layout_alignLeft="@+id/ductDepth"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:background="@drawable/calcbttrans" />



    <android.support.v4.view.ViewPager     
    android:id="@+id/pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/calc" >

    <!--
    This title strip will display the currently visible page title, as well as the page
    titles for adjacent pages.
    -->

    <android.support.v4.view.PagerTitleStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:paddingBottom="4dp"
        android:paddingTop="4dp"
        android:textColor="#fff" />

</android.support.v4.view.ViewPager>

</RelativeLayout>

</ScrollView>

Answer 1

Here is a snippet I have that works:

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

Two things that I feel could be causing your problems: you probably need android:fillViewport="true", and android:layout_height="wrap_content" in the RelativeLayout makes more sense to me than fill_parent.

Answer 2

Try adding android:fillViewport="true" to your scrollView