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.
Here is the same Screen on design. Note I have a TextView and Button below the CardView. They are inside LinearLayouts.
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>
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.