How to Pin only the last child of the CollapsingToolbarLayout?

user_5564683 0
Viewed 52

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?

android-collapsingtoolbarlayout android-coordinatorlayout android-layout android
2 Answers

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

user_98516080

A simple example to solve the problem is:

<CoordinatorLayout>
    <AppBarLayout>
        <!-- scrolls -->
        <Toolbar
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll" />
        <!-- pins -->
        <TextView
            android:layout_marginTop="?attr/actionBarSize" />
    </AppBarLayout>
</CoordinatorLayout>
user_55646830
Related