androidkotlinandroid-constraintlayoutandroid-cardviewbounds

How to limit ScrollView content inside CardView in ConstraintLayout on Kotlin. In Runtime the content show out of bounds


I am having trouble with the content of a ScrollView inside a CardView in ConstraintLayout. In the Design view it shows as I need it but on runtime the content of the ScrollView is shown covering the views below the CardView and they even are misaligned.

I tried setting the ScrollView to layout_height = 0dp, wrap_content, match_parent

Here is the Screen on runtime. Note that the Card is constraint correctly but the Views below the CardView appear hidden.

Runtime Screen with ScrollView inside CardView in ConstraintLayout

Here is the same Screen on design. Note I have a TextView and Button below the CardView. They are inside LinearLayouts.

Design Screen for the previous Screen

Here is the Screen XML Layout (Is rather long because inside the ScrollView I have TableLayout with many rows that go beyond the Screen size:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/switch_border"
android:paddingBottom="20dp">

<LinearLayout
    android:id="@+id/titleLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:paddingBottom="20dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="@string/screen_usage"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

<View
    android:id="@+id/divider"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:layout_weight="1"
    android:background="@color/black"
    app:layout_constraintTop_toBottomOf="@id/titleLayout"
    tools:layout_editor_absoluteX="126dp" />

<androidx.cardview.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/switch_border"
    app:layout_constrainedHeight="true"
    app:layout_constraintBottom_toTopOf="@id/divider2"
    app:layout_constraintTop_toBottomOf="@id/divider"
    tools:ignore="NotSibling">

    <ScrollView
        android:id="@+id/scrollLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="false">

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

            <TableLayout
                android:id="@+id/usageTable"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TableRow...>

                <TableRow...> 

                <TableRow...>

                <TableRow...>

                <TableRow...>

                <TableRow...>

                <TableRow...>

                <TableRow...>

                <TableRow...>

                <TableRow...>

            </TableLayout>
        </LinearLayout>
    </ScrollView>
</androidx.cardview.widget.CardView>

<View
    android:id="@+id/divider2"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="@color/black"
    app:layout_constraintBottom_toTopOf="@id/footer" />

<LinearLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="10dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent">

    <LinearLayout
        android:id="@+id/notes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:orientation="vertical">


        <TextView
            android:id="@+id/textView10"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:text="Scroll Up/Down to see more rows"
            android:textColor="@color/warning"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/OKlayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginBottom="50dp"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <Button
            android:id="@+id/OK"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingTop="6dp"
            android:text="@string/ok" />
    </LinearLayout>
</LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • I found a post (title: "Sticky Header/Footer with ScrollView in between") with a solution that works around my problem.

    Instead of using ConstraintLayout use RelativeLayout. Then you can use the following properties to set the Layouts better constraint to the top and bottom limits of the parent.

    android:layout_alignParentTop="true" for the Header, and android:layout_alignParentBottom="true" for the Footer

    Using the suggestion of WVIANA

    In my case, instead of a TextView as Header and Footer I use my Layouts as Header and Footer. Then I also removed the CardView as is not needed.