How to implement snapping in CollapsingToolbarLayout?

Question

I have a collapsing toolbar layout, below that a tab layout and below that the corresponding viewpager. I want to implement snapping such that when I collapse the collapsing toolbar layout more than half and leave it, it should snap and collapse completely. How do I do it? Here is my actual layout :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#231f20"
    android:fitsSystemWindows="true">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        android:background="#231f20"
        app:layout_anchor="@+id/appbar"
        app:layout_anchorGravity="bottom"
        app:tabGravity="fill"
        app:tabMode="fixed" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <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="#FAC80A"
            app:expandedTitleMarginBottom="110dp"
            app:expandedTitleMarginStart="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax">

                <ImageView
                    android:id="@+id/imageView78"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentLeft="true"
                    android:background="@drawable/user_profile_bg_img"
                    android:scaleType="fitXY"
                    android:src="@drawable/gradient" />

                <ImageView
                    android:id="@+id/imageView82"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:elevation="10dp"
                    android:src="@drawable/user_profile_shape_profile_pic"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="30dp" />

                <ImageView
                    android:id="@+id/imageView80"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_gravity="center_vertical"
                    android:elevation="10dp"
                    android:layout_marginRight="60dp"
                    android:layout_marginTop="35dp" />

                <ImageView
                    android:id="@+id/imageView81"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:elevation="10dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="35dp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="300dp"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:orientation="vertical"
                        android:paddingRight="10dp"
                        android:elevation="10dp"
                        android:id="@+id/fans">

                        <TextView
                            android:id="@+id/textView7"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#FFFFFF"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/textView8"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:alpha="0.8"
                            android:text="Fans"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#FFFFFF" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/imageView179"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="10dp"
                        android:src="@drawable/user_profile_thin_line_separator_profile_metrics" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:orientation="vertical"
                        android:paddingRight="10dp"
                        android:elevation="10dp"
                        android:id="@+id/comments">

                        <TextView
                            android:id="@+id/textView9"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#FFFFFF"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/textView12"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:alpha="0.8"
                            android:text="Comments"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#FFFFFF" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/imageView180"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="10dp"
                        android:src="@drawable/user_profile_thin_line_separator_profile_metrics" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:orientation="vertical"
                        android:paddingRight="10dp"
                        android:elevation="10dp"
                        android:id="@+id/bookmarks">

                        <TextView
                            android:id="@+id/textView13"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#FFFFFF"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/textView111"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:alpha="0.8"
                            android:text="Bookmarks"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#FFFFFF" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/imageView181"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="10dp"
                        android:src="@drawable/user_profile_thin_line_separator_profile_metrics" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:orientation="vertical"
                        android:elevation="10dp"
                        android:id="@+id/galleries">

                        <TextView
                            android:id="@+id/textView112"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#FFFFFF"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/textView113"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:alpha="0.8"
                            android:text="Galleries"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="#FFFFFF" />
                    </LinearLayout>

                </LinearLayout>

                <TextView
                    android:id="@+id/textView114"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="200dp"
                    android:layout_marginTop="200dp"
                    android:textColor="#FFFFFF" />


            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:elevation="4dp"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            </android.support.v7.widget.Toolbar>

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

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

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

Phonon

Answer 1

it latest version of the design library, compile 'com.android.support:design:23.1.0', the snap has been added

app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"

should do it

Letty

I added that. But the problem is, when it snaps, my toolbar goes out of view, which is fine, but my tabs get cut from status bar. So in effect, there is status bar at top, and below that my tabs, whose around 30% height is caught behind status bar. How do I fix that? If you want, I can attach screenshot. – Phonon

Hi @AmitTiwari, did you managed to solve this issue ? Im also struggling with this. – Megalopolis

@Megalopolis Nope. I had already tried the above answer, but the issue is there. Probably a bug in snap feature itself. There have been other bugs in CollapsingToolbarLayout previously too. – Phonon

Did you try moving the TabLayout to be the last child of the AppBarLayout and get rid of the anchors. That's how it is done in CheeseSquare app. – Suu