Put multiple views in CollapsingToolbarLayout

Issue

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>

Solution

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

Answered By – Zain

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published