2 ScrollViews in a RelativeLayout

Question

Is it not possible to vertically stack more than 1 ScrollView using RelativeLayout? I would like 2 ScrollViews - each taking up approximately 50% of the screen height.

Unfortunately the top one takes up all of the space and the second one is completely squashed at the bottom. I tried adding layout_weights and this didn't help at all.

I realise I can use vertical LinearLayout (and that works) but I'm trying to use RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/article_heading"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:padding="@dimen/padding_regular"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
        android:textStyle="bold"
        android:text="@string/article_title"/>

    <ScrollView
        android:layout_above="@+id/butConnect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/article_scrollview"
        android:layout_below="@id/article_heading">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="@dimen/line_spacing"
            android:id="@+id/article"
            android:padding="@dimen/padding_regular"
            android:textAppearance="@android:style/TextAppearance.DeviceDefault"
            android:autoLink="web"
            android:text="@string/article_text"/>

    </ScrollView>

    <ScrollView
        android:layout_below="@id/article_scrollview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/debug_scrollview"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="@dimen/line_spacing"
            android:id="@+id/tvDebug"
            android:padding="@dimen/padding_regular"
            android:textAppearance="@android:style/TextAppearance.DeviceDefault"
            android:autoLink="web"
            android:text="@string/article_text"/>

    </ScrollView>

</RelativeLayout>

Answer 1

The problem is most likely because your first ScrollView has android:layout_above="@+id/butConnect".

For what you want it should be android:layout_above="@+id/debug_scrollview"

Answer 2

One way to do this and if you don't mind is to use a helper View that acts as a separator between your two Scrollviews.

You can use a view like this, positioned vertically on your relative layout and use it to set relationships for your ScrollViews:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_above="@id/separatorView"
        android:id="@+id/article_scrollview">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="@null"
            android:id="@+id/article"
            android:padding="8dp"
            android:text="first scroll"/>

    </ScrollView>
    <view
        android:id="@+id/separatorView"
        android:layout_centerVertical="true"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <ScrollView
        android:layout_below="@id/separatorView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:id="@+id/debug_scrollview"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tvDebug"
            android:padding="8dp"
            android:text="first scroll"/>

    </ScrollView>

</RelativeLayout>