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.
1 answers
solution1
0 2016-09-26 04:03:57
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Can't See the widgets at the bottom of NestedScrollView
How to remove empty white space at the bottom of CoordinatorLayout with NestedScrollView
CoordinatorLayout with NestedScrollView adding padding bottom for sticky button not working
NestedScrollView in CoordinatorLayout not showing overscroll
GestureOverlayView in CoordinatorLayout scroll and NestedScrollView
NestedScrollView not scrolling with CoordinatorLayout
CoordinatorLayout with NestedScrollView behavior
EditText not focusing in CoordinatorLayout with NestedScrollView
NestedScrollView not showing inside CoordinatorLayout
How to prevent bottom navigation from hiding when scrolling a CoordinatorLayout
Related Tags