CODEWITHSUNDEEP
androidandroid-animationandroid-coordinatorlayoutandroid-collapsingtoolbarlayoutandroid-appbarlayout
Rajkiran
Rajkiran

Reputation: 16191

Android sticky CollapsingToolbarLayout in AppBarLayout

I want to add a behaviour to my CollapsingToolbarLayout such that the "collapsible" content is sticky (image) in this case. Only the bottom sheet needs to be scrollable and it will overlay the images in the ViewPager. Attaching recording video for better understanding.

https://www.youtube.com/shorts/trmpy__f9Is

The expected behaviour is as shown the image below where the header should stick and footer should overlay it when scrolled. Expected behaviour

Code is something like this-

        <androidx.coordinatorlayout.widget.CoordinatorLayout>
            <com.google.android.material.appbar.AppBarLayout>

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">

                    <androidx.viewpager2.widget.ViewPager2/>

                    <androidx.appcompat.widget.Toolbar />

                    <ConstraintLayoutForSomeContent/>

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

            </com.google.android.material.appbar.AppBarLayout>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>

Also tried playing with app:layout_collapseMode="pin" and app:layout_scrollFlags="noScroll" to CollapsibleToolbarLayout, AppBarLayout with no luck.

The other option was not making ViewPager part of the CollapsibleToolbarLayout which solves the purpose but then the ViewPager is not scrollable anymore as the touch is consumed by the overlaying CollapsibleToolbarLayout.

Is there a way this can be achieved.

Upvotes: 0

Views: 527

Answers (1)

Mayur
Mayur

Reputation: 358

Try This

add the below line in your view pager

app:layout_collapseParallaxMultiplier="1.0"

change the value you want between 1 to 0.9

Upvotes: 1

Related Questions