stackyyflow
stackyyflow

Reputation: 763

How to pin RelativeLayout in CollapsingToolbarLayout

I am using CollapsingToolbarLayout for my activity. Is there a way to pin RelativeLayout that contains Toolbar within instead of pinning Toolbar? I tried to do the following but the RelativeLayout does not pin on top when layout collapses.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="0dp"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="0dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/pale_red"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="230dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax">

                <android.support.v4.view.ViewPager
                    android:id="@+id/carViewPager"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"/>

                <LinearLayout
                    android:id="@+id/image_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center"
                    android:layout_gravity="bottom|center"
                    android:background="@android:color/transparent" />

            </FrameLayout>

            <RelativeLayout
                android:id="@+id/toolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="@dimen/toolbar_height"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/toolbar_height"
                    app:popupTheme="@style/AppTheme.PopupOverlay">

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

                <TextView
                    android:id="@+id/activityTitle"
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:text="@string/shop_info"
                    android:textColor="@color/white" />

            </RelativeLayout>

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

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

    <include layout="@layout/content_shop" />

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

Upvotes: 3

Views: 2836

Answers (1)

Jack Shen
Jack Shen

Reputation: 106

Like its name Collapsing,everthing except Toolbar is going to be collapsed when scroll up, the only way to pin it is to use "pin" on ToolBar, and only the ToolBar works with "pin". Hence try placing your RelativeLayout outside of CollapsingToolBarLayout ,but inside of AppBarLayout, maybe that's what you need.

I solved it through this question:

How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?

just treat your layout as the TabLayout mentioned in this question.

Hope it helps.

Upvotes: 4

Related Questions