CODEWITHSUNDEEP
androidandroid-coordinatorlayoutandroid-collapsingtoolbarlayout
sanjeev
sanjeev

Reputation: 1675

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

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.

Upvotes: 2

Views: 3487

Answers (1)

Prithvi Bhola
Prithvi Bhola

Reputation: 3151

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.

Upvotes: 5

Related Questions