Putting multiple views in CollapsingToolbarLayout overlap on one another-CodePudding

I am trying to include a layout under the toolbar within a CollapsingToolbarLayout. The first draft was without the linearlayout, but doing so the toolbar was overlapping the included layout. So I put the toolbar and the layout into a linearlayout. The layout is under the toolbar as intended, but the scrolling behaviour is now gone. They just stay at the same place and don't scroll.

<com.google.android.material.appbar.AppBarLayout
        android:id="@ id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@ id/toolbar_layout"
            style="@style/Widget.SaltWatcher.App.Toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false"
            app:toolbarId="@id/toolbar">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <com.google.android.material.appbar.MaterialToolbar
                    android:id="@ id/toolbar"
                    style="@style/Widget.SaltWatcher.App.Toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="0dp"
                    app:contentInsetStart="0dp"
                    app:elevation="0dp"
                    app:layout_collapseMode="parallax" />

                <include
                    android:id="@ id/values"
                    layout="@layout/layout_values"
                    android:layout_width="match_parent"
                    android:layout_height="136dp"
                    android:layout_gravity="bottom"
                    android:scaleType="centerCrop"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="parallax" />
            </LinearLayout>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

CodePudding user response：

The first draft was without the linearlayout, but doing so the toolbar was overlapping the included layout.

You can go ahead with your first attempt, but just add a top margin that equals to the Toolbar height; which is the default ActionBar height in your case ?attr/actionBarSize.

So, this will be:

<com.google.android.material.appbar.AppBarLayout
    
    <com.google.android.material.appbar.CollapsingToolbarLayout
        
        <com.google.android.material.appbar.MaterialToolbar
            ...
            android:layout_height="?attr/actionBarSize"
         
         <include
            ... 
            android:layout_marginTop="?attr/actionBarSize"
         
...