CODEWITHSUNDEEP
androidmaterial-designandroid-collapsingtoolbarlayout
Alpha
Alpha

Reputation: 1874

CollapsingToolbarLayout doesn't work well with NestedScrollView

I made an activity where image should collapse with toolbar and only text below would be visible. But When Toolbar being collapsed, there shows up a large gap between Toolbar and NestedScrollView

<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        app:elevation="5dp"
        app:layout_collapseMode="pin"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:toolbarId="@+id/toolbar"
            android:id="@+id/collapsing"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <com.noframe.farmisagronom.util.ResizibleImageView
                android:id="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
                android:minHeight="100dp"
                android:maxHeight="400dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                android:scaleType="centerCrop"/>

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

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nesteview"
        app:layout_anchorGravity="top"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
         .....
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

And this activity looks really good. enter image description here

But when i scroll up the NestedScrollView this goes out of control. enter image description here

This little space between toolbar and text is getting on my nerves.

note that if there is large text in NestedScrollView problem won't show up, but if NestedScrollView + collapsed tool bar doesn't take all phone screen, then there is a gap between them.

Upvotes: 3

Views: 4940

Answers (1)

venturidoo
venturidoo

Reputation: 393

Adding:

android:layout_gravity="fill_vertical"

to the NestedScrollView worked for me.

Upvotes: 7

Related Questions