How to Pin toolbar in a coordinator layout using collapsing toolbar?

Question

I am trying to make the toolbar appear in this layout always visible instead of it appearing only when it is scrolled out completely. I have an image inside collapsing toolbar that needs to get hidden when scrolled out fully.

This is what I tried.. Any opinion on how to achieve it?

        <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"
        tools:context=".activities.Event_details">


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/topLayout"
        app:layout_anchorGravity="top"
        android:layout_gravity="top" >
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/toolbar_height">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorWhite"
                    android:id="@+id/toolbarTitle"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="?android:attr/actionBarSize"
                    android:textStyle="bold"
                    android:textSize="@dimen/page_innerheader_titletxt"
                    android:text="@string/app_name"/>

                <TextView
                    android:id="@+id/save_toolbar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/save"
                    android:textColor="@color/colorYellow"
                    android:layout_centerVertical="true"
                    android:textSize="@dimen/textsize16"
                    android:layout_toStartOf="@id/toolbarButton"
                    android:layout_marginEnd="15dp"/>

                <Button
                    android:id="@+id/toolbarButton"
                    android:layout_width="60dp"
                    android:layout_height="30dp"
                    android:text="@string/done"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:textColor="@color/colorPrimary"
                    android:background="@drawable/rect_yellow"
                    android:layout_marginEnd="10dp"
                    />
            </RelativeLayout>


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

           </RelativeLayout>
        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="6dp"
            app:layout_anchor="@id/topLayout"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true">


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

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/party"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"/>

<!--

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/toolbar_height">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/colorWhite"
                        android:id="@+id/toolbarTitle"
                        android:layout_centerVertical="true"
                        android:layout_marginEnd="?android:attr/actionBarSize"
                        android:textStyle="bold"
                        android:textSize="@dimen/page_innerheader_titletxt"
                        android:text="@string/app_name"/>

                    <TextView
                        android:id="@+id/save_toolbar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/save"
                        android:textColor="@color/colorYellow"
                        android:layout_centerVertical="true"
                        android:textSize="@dimen/textsize16"
                        android:layout_toStartOf="@id/toolbarButton"
                        android:layout_marginEnd="15dp"/>

                    <Button
                        android:id="@+id/toolbarButton"
                        android:layout_width="60dp"
                        android:layout_height="30dp"
                        android:text="@string/done"
                        android:layout_alignParentEnd="true"
                        android:layout_centerVertical="true"
                        android:textColor="@color/colorPrimary"
                        android:background="@drawable/rect_yellow"
                        android:layout_marginEnd="10dp"
                        />
                </RelativeLayout>


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


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

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


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

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

P.S: I also tried using the toolbar inside the collapsing toolbar but I can make only the title and button visible but I want the whole toolbar to have a colorPrimary background.

I tried these links collapsing toolbar fixed and this AppBar layout behaviour and some from the other SO threads. But nothing seems to solve my problem.

Usually in collapsing toolbar with an image when you scroll, the image collapses to a toolbar(ref:https://medium.com/@tonia.tkachuk/appbarlayout-scroll-behavior-with-layout-scrollflags-2eec41b4366b). But what I want to achieve is that the toolbar should always be fixed even before collapsing and only the image should be collapsed when scrolled. — sanjeev, Nov 27 '18 at 11:42

score 5 · Accepted Answer · answered Nov 27 '18 at 11:44

Try this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/ivBack"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_arrow_back" />

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/activity_horizontal_margin"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:text="Title"
                app:layout_constraintBottom_toBottomOf="@+id/ivBack"
                app:layout_constraintStart_toEndOf="@+id/ivBack"
                app:layout_constraintTop_toTopOf="@+id/ivBack" />

        </android.support.constraint.ConstraintLayout>

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

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:clipToPadding="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipToPadding="false"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll">

                // Your Image View


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

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

            // RecyclerView if required
            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvContent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipToPadding="false"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="128dp" />

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

</android.support.constraint.ConstraintLayout>

In this code snippet, I have created a Toolbar and CoordinatorLayout which are inside the ConstraintLayout

Toolbar contains the ConstraintLayout which set the back button and title.

CoordinatorLayout has AppBarLayout which has CollapsingToolbarLayout in which you can set you ImageView.

quick question what if I have to place a view that overlaps(that stays over both the toolbar and coordinator)?? — sanjeev, Nov 29 '18 at 04:22
@sanjeev in that case what you can do is create another `layout` inside parent `ConstraintLayout ` and place it above the toolbar layout. And also you might have to give `elevation` to that view to make it above the other views(i.e. Toolbar and Coordinator) — Prithvi Bhola, Nov 29 '18 at 06:17

How to Pin toolbar in a coordinator layout using collapsing toolbar?

1 Answers1