Search code examples
androidandroid-layoutscrollviewandroid-relativelayout

Putting my RelativeLayout inside a ScrollView misplaces all the items in the layout

Thank a lot for your help and attention.

This is how my Activity looks like before I put the RelativeLayout inside a ScrollView:

enter image description here

Still I need to work on it, but the Buttons, the EditTexts and the Views are at their place.

Now, if I put the RelativeLayout inside a ScrollView, all the positions of the items get messed up,

this is the (undesired) result

enter image description here

Please how do I go about this?

Here is my 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">

<RelativeLayout 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bgland"
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=".MenuActivity" >
<View
    android:id="@+id/view1"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_centerInParent="true"
    android:layout_margin="20dip"
    android:background="@android:color/darker_gray" />
<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:scaleType="fitXY"
    android:src="@drawable/white_bg" />

<EditText
    android:id="@+id/bikenumber"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/getbikebutton"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="20dip"
    android:layout_marginRight="20dip"
    android:layout_marginTop="20dip"
    android:ems="10"
    android:hint="@string/hint_getbike"
    android:inputType="number"
    android:singleLine="true" >

    <requestFocus />
</EditText>

<Button
    android:id="@+id/getbikebutton"
    style="@style/OrangeButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/view1"
    android:layout_alignLeft="@+id/view1"
    android:layout_alignRight="@+id/view1"
    android:layout_marginBottom="10dip"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="15dip"
    android:text="@string/menu_getbikebuttontext" />



<Button
    android:id="@+id/buttonGoToMyLoc"
    style="@style/OrangeButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/view1"
    android:layout_alignRight="@+id/view1"
    android:layout_below="@+id/view1"
    android:layout_marginBottom="10dip"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="15dip"
    android:text="@string/menu_text_near_me" />

<Button
    android:id="@+id/buttonGoToThisLoc"
    style="@style/OrangeButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/view1"
    android:layout_alignRight="@+id/view1"
    android:layout_below="@+id/buttonGoToMyLoc"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="15dip"
    android:layout_marginTop="10dip"
    android:text="@string/menu_text_address" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/imageView1"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="25dip"
    android:text="@string/menu_title"
    android:textColor="@android:color/black"
    android:textSize="20dip"
    android:textStyle="bold" />

<EditText
    android:id="@+id/locAddress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView1"
    android:layout_alignRight="@+id/imageView1"
    android:layout_below="@+id/textView1"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="20dip"
    android:layout_marginRight="20dip"
    android:layout_marginTop="10dip"
    android:ems="10"
    android:hint="@string/menu_hint"
    android:inputType="text"
    android:singleLine="true"
    android:visibility="gone" >

    <requestFocus />
</EditText>

<EditText
    android:id="@+id/locAddressCity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView1"
    android:layout_alignRight="@+id/imageView1"
    android:layout_below="@+id/locAddress"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="20dip"
    android:layout_marginRight="20dip"
    android:ems="10"
    android:hint="@string/menu_hint_city"
    android:inputType="text"
    android:singleLine="true"
    android:visibility="gone" />

</RelativeLayout>
</ScrollView>
Solution

  • Add android:fillViewport="true" to your ScrollView code as follows : 

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="5dp"
            tools:context=".MenuActivity" >

            <View
                android:id="@+id/view1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_centerInParent="true"
                android:layout_margin="20dip"
                android:background="@android:color/darker_gray" />

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:scaleType="fitXY"
                android:src="@android:color/white" />

            <EditText
                android:id="@+id/bikenumber"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_above="@+id/getbikebutton"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="20dip"
                android:layout_marginRight="20dip"
                android:layout_marginTop="20dip"
                android:ems="10"
                android:hint="Get Bikes"
                android:inputType="number"
                android:singleLine="true" >

                <requestFocus />
            </EditText>

            <Button
                android:id="@+id/getbikebutton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/view1"
                android:layout_alignLeft="@+id/view1"
                android:layout_alignRight="@+id/view1"
                android:layout_marginBottom="10dip"
                android:layout_marginLeft="15dip"
                android:layout_marginRight="15dip"
                android:text="FindBikes" />

            <Button
                android:id="@+id/buttonGoToMyLoc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/view1"
                android:layout_alignRight="@+id/view1"
                android:layout_below="@+id/view1"
                android:layout_marginBottom="10dip"
                android:layout_marginLeft="15dip"
                android:layout_marginRight="15dip"
                android:text="NearMe" />

            <Button
                android:id="@+id/buttonGoToThisLoc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/view1"
                android:layout_alignRight="@+id/view1"
                android:layout_below="@+id/buttonGoToMyLoc"
                android:layout_marginLeft="15dip"
                android:layout_marginRight="15dip"
                android:layout_marginTop="10dip"
                android:text="Near Address" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/imageView1"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="25dip"
                android:text="Title"
                android:textColor="@android:color/black"
                android:textSize="20dip"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/locAddress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/imageView1"
                android:layout_alignRight="@+id/imageView1"
                android:layout_below="@+id/textView1"
                android:layout_centerHorizontal="true"
                android:textColor="@android:color/black"
                android:layout_marginLeft="20dip"
                android:layout_marginRight="20dip"
                android:layout_marginTop="10dip"
                android:ems="10"
                android:hint="Addresss"
                android:inputType="text"
                android:singleLine="true"
                android:visibility="gone" >

                <requestFocus />
            </EditText>

            <EditText
                android:id="@+id/locAddressCity"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/imageView1"
                android:layout_alignRight="@+id/imageView1"
                android:layout_below="@+id/locAddress"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="20dip"
                android:layout_marginRight="20dip"
                android:ems="10"
                android:hint="Address City"
                android:inputType="text"
                android:singleLine="true"
                android:visibility="gone" />
        </RelativeLayout>
    </LinearLayout>

</ScrollView>

    ScrollView comes with LinearLayout and it works with only direct child inside ScrollView. You can put all the component inside that LinearLayout.So if you want any layout inside ScrollView then you should first put LinearLayout inside ScrollView and put all your components inside that LinearLayout.