NestedScrollView in CoordinatorLayout hiding bottom widgets

Question

I just hit a snag in my project that seems to have been an issue for a while now.

I have a CoordinatorLayout which has an AppBarLayout and a NestedScrollView. I'm working with the CollapsibleToobarLayout and it works just fine. The problem is that the NestedScrollView doesn't scroll up and down as it should. after the toolbar collapses, it doesn't scroll anymore, leaving the widgets below hidden.

I have tried android:fillViewPort="true" and android:layout_gravity="fill_vertical" but there's no change. Here's the code

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/MyMaterialTheme"
    android:fitsSystemWindows="true"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appBar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/collapsingToolbar"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="10dp"
            app:expandedTitleMarginEnd="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@color/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:background="@drawable/bgPicture"
                app:layout_collapseMode="pin"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:titleTextAppearance="@style/Toolbar.TitleText"
                android:layout_gravity="top"
                app:layout_collapseMode="pin"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                >

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/custom_trash"
                    android:clickable="true"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_gravity="end"
                    android:id="@+id/deleteButton"/>

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:fitsSystemWindows="true"
        android:layout_gravity="fill_vertical"
        android:background="@color/grey"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:fillViewport="true">

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingTop="10dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:id="@+id/tableLayout">

            <TableRow
                android:layout_height="wrap_content"
                android:layout_width="wrap_content">



                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_centerHorizontal="false"
                    >

                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="0dp"
                        android:id="@+id/goalIdTextView"
                        android:visibility="gone"
                        />
                    <ProgressBar
                        android:id="@+id/progress"
                        android:layout_width="match_parent"
                        android:indeterminate="false"
                        android:max="100"
                        android:progress="60"
                        android:progressDrawable="@drawable/circular_progress_bar"
                        android:layout_height="match_parent"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_centerHorizontal="true" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="100%"
                        android:textColor="#000000"
                        android:textSize="20sp"
                        android:textStyle="bold"/>

                </RelativeLayout>



                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textAlignment="gravity"
                    android:layout_gravity="right"
                    android:id="@+id/progressText"
                    />

            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp">


            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp">

                <EditText
                    android:layout_weight="1"
                    android:id="@+id/goalTitle"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:background="@android:drawable/editbox_background_normal"
                    android:paddingTop="14dp"
                    android:textCursorDrawable="@null"
                    android:paddingBottom="11dp"
                    android:hint="Goal Title"/>
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="5dp">

                <TextView
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:text="@string/deadline_text"
                    android:textStyle="bold"
                    />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp">

                <EditText
                    android:id="@+id/dateEditText"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:layout_weight="1"
                    android:focusable="false"
                    android:inputType="date"
                    android:background="@android:drawable/editbox_background_normal"
                    android:paddingTop="14dp"
                    android:paddingBottom="11dp"
                    />

                <ImageButton
                    android:id="@+id/selectDate"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:layout_weight="0"
                    android:layout_toRightOf="@+id/date"
                    android:contentDescription="@string/select_date"
                    android:cropToPadding="true"
                    android:background="@drawable/calendar_icon"/>

            </TableRow>
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="5dp">

                <TextView
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:text="@string/tasks_label"
                    android:textStyle="bold"
                    />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ListView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/listView"
                    android:paddingTop="5dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingBottom="10dp"
                    android:background="@android:drawable/editbox_background_normal"
                    android:layout_centerHorizontal="true" />

            </TableRow>


            <TableRow
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:background="@color/colorPrimary">

                <Button
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:id="@+id/updateButton"
                    android:textColor="#000"
                    android:onClick="updateGoal"
                    android:textAppearance="?android:textAppearanceLarge"
                    android:text="@string/submit"
                    />
            </TableRow>
        </TableLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Anything after the ListView doesn't show on screen, neither can it be scrolled into view. I have seen this implemented in apps like Whatsapp. clicking on a group takes you to that activity where a profile picture is displayed in a collapsible toolbar, followed by images shared, a whole list of people in that group, and an exit button at the bottom of the page. I have tried several approaches to achieve this, but I've had no luck.

Answer 1

Give this a try. I modified your code little bit but it will work for you

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="10dp"
            app:expandedTitleMarginStart="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/complete_eco_slide"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="top"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin">

                <ImageButton
                    android:id="@+id/deleteButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_gravity="end"
                    android:background="@drawable/check"
                    android:clickable="true" />

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"
        android:layout_weight="1"
        android:background="#666666"
        android:clipToPadding="false"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/tableLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp">

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


                <RelativeLayout
                    android:layout_width="1dp"
                    android:layout_height="100dp"
                    android:layout_centerHorizontal="false">

                    <TextView
                        android:id="@+id/goalIdTextView"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:visibility="gone" />

                    <ProgressBar
                        android:id="@+id/progress"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_centerHorizontal="true"
                        android:indeterminate="false"
                        android:max="100"
                        android:progress="60" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="100%"
                        android:textColor="#000000"
                        android:textSize="20sp"
                        android:textStyle="bold" />

                </RelativeLayout>


                <TextView
                    android:id="@+id/progressText"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="right"
                    android:textAlignment="gravity" />

            </LinearLayout>

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

                <EditText
                    android:id="@+id/goalTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@android:drawable/editbox_background_normal"
                    android:hint="Goal Title"
                    android:paddingBottom="11dp"
                    android:paddingTop="14dp"
                    android:textCursorDrawable="@null" />
            </LinearLayout>

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

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="dfsdgfg"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="5dp">

                <EditText
                    android:id="@+id/dateEditText"
                    android:layout_width="0dp"
                    android:layout_weight="0.9"
                    android:layout_height="wrap_content"
                    android:background="@android:drawable/editbox_background_normal"
                    android:ems="10"
                    android:focusable="false"
                    android:inputType="date"
                    android:paddingBottom="11dp"
                    android:paddingTop="14dp" />

                <ImageButton
                    android:id="@+id/selectDate"
                    android:layout_width="0dp"
                    android:layout_weight="0.1"
                    android:layout_height="wrap_content"
                    android:background="@drawable/calendar"
                    android:contentDescription="asda"
                    android:cropToPadding="true" />

            </LinearLayout>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="asdas"
                android:textStyle="bold" />


            <ListView
                android:id="@+id/listView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:drawable/editbox_background_normal" />


            <Button
                android:id="@+id/updateButton"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:onClick="updateGoal"
                android:text="submit"
                android:textAllCaps="false"
                android:textAppearance="?android:textAppearanceLarge"
                android:textColor="#000" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>