CODEWITHSUNDEEP
androidandroid-collapsingtoolbarlayout
M Rajoy
M Rajoy

Reputation: 4104

CollapsingToolbarLayout with two views, make one scroll but not the other

I have an activity with a toolbar and a recyclerview. On top of the recyclerview I have a panel that I want to be scrollable (to move along with the scroll of the recyclerview).

I want this panel to scroll behind the toolbar, so when the scrolling happens, the toolbar stays in place and the panel slides behind it.

Kind of what they do here:

https://i.imgur.com/fQA6bPH.gif

But I cant find the right combination of options with CollapsingToolbarLayout to achieve this effect:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".ui.profile.ProfileActivity">
    <android.support.design.widget.AppBarLayout
                android:id="@+id/profile_appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/topbar_gradient"
                android:theme="@style/AppTheme.Dark">


                <android.support.design.widget.CollapsingToolbarLayout
                    android:orientation="vertical"
                    android:id="@+id/detail_collapsing"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?android:attr/actionBarSize"
                        android:background="@drawable/topbar_gradient"
                        app:layout_collapseMode="none"
                        android:minHeight="?android:attr/actionBarSize" />

                    <LinearLayout
                        android:layout_marginTop="?actionBarSize"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_collapseMode="none"
                        app:layout_collapseParallaxMultiplier="0.5">


        ...


           </LinearLayout>

                </android.support.design.widget.CollapsingToolbarLayout>
            </android.support.design.widget.AppBarLayout>

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    (...)
    </FrameLayout>


</android.support.design.widget.CoordinatorLayout>

To simplify, I've changed the structure to this:

    <android.support.design.widget.CollapsingToolbarLayout
        android:orientation="vertical"
        android:id="@+id/detail_collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?colorPrimary"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlways">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@drawable/topbar_gradient"
            app:layout_collapseMode="pin"
            android:minHeight="?android:attr/actionBarSize" />

        <LinearLayout
            android:layout_marginTop="?actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.5">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/bar"/>

        </LinearLayout>

    </android.support.design.widget.CollapsingToolbarLayout>

Upvotes: 1

Views: 3679

Answers (3)

bitvale
bitvale

Reputation: 2089

I solved this problem by moving Toolbar outside of AppBarLayout. Then in code setup Toolbar as SupportActionBar.

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".ui.profile.ProfileActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/profile_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/topbar_gradient"
        android:theme="@style/AppTheme.Dark">

        <android.support.design.widget.CollapsingToolbarLayout
            android:orientation="vertical"
            android:id="@+id/detail_collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways">

            <LinearLayout
                android:layout_marginTop="?actionBarSize"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_collapseMode="pin">

                ...

            </LinearLayout>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        (...)
    </FrameLayout>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@drawable/topbar_gradient"
        android:minHeight="?android:attr/actionBarSize" />
</android.support.design.widget.CoordinatorLayout>

Upvotes: 1

Jeel Vankhede
Jeel Vankhede

Reputation: 12138

You need to change this to get desired effect:

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/detail_collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="vertical"
        app:contentScrim="?colorPrimary"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"
        app:titleEnabled="false">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="?actionBarSize"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.5">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/bar" />
        </LinearLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@drawable/topbar_gradient"
            android:minHeight="?android:attr/actionBarSize"
            app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>

Your change was in CollapsingToolbar, by using these three attributes "scroll|enterAlwaysCollapsed|exitUntilCollapsed" together will change that effect.

Description :

app:layout_collapseMode="" is attribute used to collapse/pin child views of CollapsingToolbarLayout.

There are three attributes to this :

none : No effects at all.

pin : Pin that view at CollapsingToolbar when scrolled.

parallax : Hide view parallel with CollapsingToolbar hiding.

so if you're having Toolbar pinned to CollapsingToolbarLayout then add this property pin (which will pin it to Collapsing toolbar when scrolled) and parallax will animate it until collapsed.

Let's see

How does scrolling actually works using these 4 attributes in app:layout_scrollFlags=""

scroll : The view will be scroll in direct relation to scroll events.(Necessary, otherwise any other attribute won't work)

enterAlways : When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling.

enterAlwaysCollapsed : An additional flag for 'enterAlways' which modifies the returning view to only initially scroll back to it's collapsed height.

exitUntilCollapsed : When exiting (scrolling off screen) the view will be scrolled until it is 'collapsed'.

snap : Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge.

More details from here & demo here

Findout more from here : link

Upvotes: 0

ʍѳђઽ૯ท
ʍѳђઽ૯ท

Reputation: 16976

It does exactly the same when we add an ImageView inside the CollapsingToolbarLayout like this with parallax flag of app:layout_collapseMode: 

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleMarginEnd="64dp"
    app:expandedTitleMarginStart="48dp"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="pin" />

            <ImageView
                android:src="@drawable/cheese_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" //Here is the solution
                android:minHeight="100dp" />

</android.support.design.widget.CollapsingToolbarLayout>

So you may want to add :

app:layout_collapseMode="parallax"

To your view (LinearLayout) or anything inside.

Read: https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout#creating-parallax-animations

Upvotes: 1

Related Questions