androidandroid-layoutandroid-coordinatorlayoutandroid-collapsingtoolbarlayout

How to Pin only the last child of the CollapsingToolbarLayout?

Suppose I have the following .xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout>
    
    <com.google.android.material.appbar.AppBarLayout>
        
        <com.google.android.material.appbar.CollapsingToolbarLayout>
            
            <androidx.appcompat.widget.Toolbar>
                <!--ToolBar here-->
            </androidx.appcompat.widget.Toolbar>

            <!-- scrolls with the recycler view - may have different heights -->
            <PageTitleHere
                app:layout_collapseMode="none"/>

            <!-- This view pins on top when scrolling -->
            <AViewThatShouldPinOnTopOnScroll
                app:layout_collapseMode="pin" />

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

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

    <androidx.recyclerview.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

I want that only the last child of CollapsingToolbarLayout pins to the top when scrolling. The problem is that if I leave the xml as it is, its children will all be placed on top of it, overlaying each other (because CollapsingToolbarLayout inherits FrameLayout)

Knowing that the height of AViewThatShouldPinOnTopOnScroll may vary, how can I achieve what I want by only editing the XML?

Solution

  • To achieve this behavior, the AViewThatShouldPinOnTopOnScroll requires to be a direct child of the AppBarLayout; i.e. get it out of the CollapsingToolbarLayout; and no need to the app:layout_collapseMode="pin" as it's not a part of the CollapsingToolbarLayout anymore:

    The XML structure now:

    <com.google.android.material.appbar.AppBarLayout>
    
    <com.google.android.material.appbar.CollapsingToolbarLayout>
        
        <androidx.appcompat.widget.Toolbar>
            <!--ToolBar here-->
        </androidx.appcompat.widget.Toolbar>

        <!-- scrolls with the recycler view - may have different heights -->
        <PageTitleHere/>

    </com.google.android.material.appbar.CollapsingToolbarLayout>
    
    <!-- This view pins on top when scrolling -->
    <AViewThatShouldPinOnTopOnScroll/>

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

    Demo

    The yellow is the AViewThatShouldPinOnTopOnScroll