Friday, 25 February 2022

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...



from Round corners in NestedScrollView with Collapsing Toolbar Layout

No comments:

Post a Comment