androidxmlandroid-collapsingtoolbarlayout

Round corners in NestedScrollView with Collapsing Toolbar Layout


I'm making a detail view with a CoordinatorLayout with a header image to which I want to apply rounded edges in the view that has the NestedScrollView, something like this:

introducir la descripción de la imagen aquí

I'm making a detail view with a CoordinatorLayout with a header image to which I want to apply rounded edges in the view that has the NestedScrollView, something like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:importantForAccessibility="no"
                android:scaleType="centerCrop"
                android:src="@drawable/collapsing_image"
                app:layout_collapseMode="parallax" />

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-20dp"
        android:background="@drawable/rounded_collapsing_toolbar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:text="@string/text_collapsing" />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

One of the problems is that it starts to do strange things, because when I put the negative margin, when I expand the toolbar I see that -20dp piece of white until it starts to show the image.

I have tried to put as a kind of "fake view" which would go inside the CollapsingToolbar, but the problem that I find here is that being here inside, it also collapses and for example, if I have the toolbar in a different colour than the scroll view, you can see the difference when I expand it...


Solution

  • You need a couple of things to fix this behavior:

    1. Add enterAlways scroll flag to the CollapsingToolbarLayout: This enables the 'quick return' pattern which in your case allows the rounded background to show up when the CollapsingToolbarLayout starts to expand.

    This is also clearly explained by the documentation here:

    When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling. This is commonly referred to as the 'quick return' pattern.

    Now the scrolling flags should be: app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"

    1. Remove android:fitsSystemWindows="true" from the AppBarLayout: Leaving it will cause an issue of affecting the scrolling behaviour of the NestedScrollView when you try to scroll it up (i.e. to collapse the CollapsingToolbarLayout), the scrolling behaviour of the NestedScrollView won't be propagated to the CollapsingToolbarLayout leaving it in expanded state. So, you need to remove that.

    Preview: I've changed the app:contentScrim color to be different than the NestedScrollView background in order to show up the behaviour: