How to use the whole space when placing ConstraintLayout inside a NestedScrollView?

Question

I'm trying to put a ConstraintLayout inside a NestedScrollView, but there is a line that separates the ConstraintLayout. I can't place anything underneath that invisible line. I have been trying for hours and can't find the issue.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.core.widget.NestedScrollView
        android:id="@+id/premium_layout_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#BFFFFFFF"
        android:focusableInTouchMode="true"
        android:tag="layout/fragment_premium"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".PremiumFragment">

            <ImageView
                android:id="@+id/launcher_id"
                android:layout_width="185dp"
                android:layout_height="185dp"
                android:layout_marginTop="25dp"
                android:layout_marginBottom="20dp"
                android:contentDescription="TODO"
                app:layout_constraintBottom_toTopOf="@+id/premium_text_id"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/launch_premium" />

            <TextView
                android:id="@+id/premium_text_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="220dp"
                android:text="@string/launch_to_premium"
                android:textSize="24sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerView2"
                android:layout_width="383dp"
                android:layout_height="196dp"
                android:layout_marginTop="24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/premium_text_id" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</layout>

score 0 · Accepted Answer · answered Mar 26 '21 at 18:41

With a little bit of messing around I was able to get what you are looking for. The key is to use android:fillViewport="true" in the NestedScrollView

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.core.widget.NestedScrollView
        android:id="@+id/premium_layout_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#BFFFFFFF"
        android:focusableInTouchMode="true"
        android:fillViewport="true"
        android:tag="layout/fragment_premium">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/launcher_id"
                android:layout_width="180dp"
                android:layout_height="180dp"
                android:layout_marginTop="25dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/launch_premium" />

            <TextView
                android:id="@+id/premium_text_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/launch_to_premium"
                android:textSize="24sp"
                android:layout_marginTop="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/launcher_id" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerView2"
                android:layout_width="383dp"
                android:layout_height="196dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/premium_text_id" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</layout>

Swapnil Padaya · Answer 2 · 2021-03-26T19:03:56.913

You need to add a attribute android:fillViewport="true" in your NestedScrollView

<androidx.core.widget.NestedScrollView
        android:id="@+id/premium_layout_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#BFFFFFFF"
        android:focusableInTouchMode="true"
        android:fillViewport="true" <-- add this
        android:tag="layout/fragment_premium">

why?
fillViewport allows NestedScrollView to extend its height equals to the full height of the device screen height in the cases when the child of scroll view has less height.
this blog Will explain more about it.

How to use the whole space when placing ConstraintLayout inside a NestedScrollView?

2 Answers2