How to put NestedScrollView between LinearLayout and MaterialButton on ConstraintLayout? - android-layout

Question

This is the rough design of my activity:
On the top is a RelativeLayout which contains an ImageView and a TextView. On the middle is a NestedScrollView which contains a RecyclerView and a CardView below it. And finally a Button on the bottom. Previously it's implemented in RelativeLayout, and works OK.
Then I change it into ConstraintLayout, like this:
<?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="#color/myapp_main_bg"
tools:context=".activity.OrderConfirmationActivity">
<RelativeLayout
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:id="#+id/rlHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgForkDish"
android:src="#drawable/ic_fork_dish"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/imgForkDish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Starbucks Senayan City" />
</RelativeLayout>
<androidx.core.widget.NestedScrollView
app:layout_constraintBottom_toTopOf="#id/btnOrderNow"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintTop_toBottomOf="#id/rlHeader"
android:id="#+id/ns_recview_orders"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/rlHeader"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recview_orders"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.cardview.widget.CardView
android:id="#+id/cvPay"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_below="#id/ns_recview_orders"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_marginTop="20dp"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/row01"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Payment Method"
android:id="#+id/tvLblPaymentMethod"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="e-wallet"
android:textStyle="bold"
android:layout_alignParentRight="true" />
</RelativeLayout>
<View
android:id="#+id/v01"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/row01"
android:layout_marginTop="10dp"
android:background="#android:color/darker_gray" />
<RelativeLayout
android:id="#+id/row02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/v01"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/tvLblTotalOrder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total Order" />
<TextView
android:id="#+id/tvTotalOrder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="10dp"
android:id="#+id/row03"
android:layout_below="#id/row02"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Service Fee"
android:id="#+id/tvLblServiceFee"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_alignParentRight="true" />
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="10dp"
android:id="#+id/row04"
android:layout_below="#id/row03"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:id="#+id/tvLblTotal"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvTotal"
android:layout_alignParentRight="true" />
</RelativeLayout>
<RelativeLayout
android:layout_marginBottom="20dp"
android:layout_marginTop="2dp"
android:id="#+id/row05"
android:layout_below="#id/row04"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Include Tax"
android:layout_alignParentRight="true" />
</RelativeLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnOrderNow"
android:text="Order Now"
app:layout_constraintBottom_toBottomOf="parent"
android:backgroundTint="#color/myapp_blue_btn"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
The result is:
As you can see, the NestedScrollView isn't positioned below RelativeLayout, but instead overlaps it. How to fix this?

Answer 1

Remove this tag from NestedScrollView:
app:layout_constraintTop_toTopOf="parent"
It is overlapping the app:layout_constraintTop_toBottomOf="#id/rlHeader" tag.