(Design Support Library) CollapsingToolbarLayout -- Toolbar not getting pinned on collapse
android
android-support-library
android-toolbar
androiddesignsupport
android-collapsingtoolbarlayout
33,449
Solution 1
Your intuition was correct: CollapsingToolbarLayout does rely on you using the support Toolbar - it uses that to set the minimum height of the CollapsingToolbarLayout (among many other things). You should switch to using the support version of the Toolbar to ensure the best experience with CollapsingToolbarLayout.
Solution 2
<?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"
tools:context=".UserDetail" >
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp" >
<ImageView
android:id="@+id/imageView_list"
android:layout_width="match_parent"
android:layout_height="275dp"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="@drawable/default_profile" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:clipToPadding="false" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="15dp"
android:shrinkColumns="1"
android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp" >
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/CurrentAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Current Address:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_CurrentAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:text="Current Address"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/PermanentAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Permanent Address:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_PermanentAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:text="Permanent Address"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/Email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_Email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email Address"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/PhoneNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Phone Number:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_PhoneNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Phone Number"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/BirthDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date of Birth:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_BirthDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BirthDate"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/Gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_Gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/Education"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Education:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_Education"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Education"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/Qualification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qualification:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_Qualification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qualification"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/BloodGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BloodGroup:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_BloodGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BloodGroup"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
<TableRow
android:id="@+id/tableRow11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="@+id/MaritalStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MaritalStatus:"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/txt_MaritalStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MaritalStatus"
android:textColor="#000000"
android:textSize="15sp"
android:textStyle="normal" />
</TableRow>
</TableLayout>
<!-- <Button
android:id="@+id/addContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add To Contact"
android:textStyle="bold"
android:visibility="invisible" /> -->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_margin="16dp"
app:layout_anchor="@id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end"
android:clickable="true"
android:src="@drawable/addtocontact"
style="@style/FabStyle"
/>
</android.support.design.widget.CoordinatorLayout>
Solution 3
- Use
app:layout_collapseMode="pin"to ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses. - Even better, when you use
CollapsingToolbarLayoutand Toolbar together, the title will automatically appear larger when the layout is fully visible, then transition to its default size as it is collapsed. -
Note that in those cases, you should call
setTitle()on theCollapsingToolbarLayout, rather than on the Toolbar itself.For more details about implementation visit Android Developers
Blog or details about package CollapsingToolbarLayout
Related videos on Youtube
12 : 08
Collapsing Toolbar in Android Studio | Collapsing Toolbar | Collapsable Appbar Android Studio
10 : 32
Collapsing Toolbar in Android Studio | Collapsing Toolbar
10 : 31
Collapsing Toolbar Layout | Android Studio 3.1.2
07 : 18
#7.1 Introduction to Android AppBarLayout & Collapsing ToolBar Layout | Material Support Library
12 : 43
#7.3 Implementing Android CollapsingToolBarLayout | Material Design Support Library
![How to Expand and Collapse Toolbar with TabLayout - [Android Animations - #11]](https://i.ytimg.com/vi/5Myslvv6Se4/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLD67iuWfHWZB8pUTWcoKffND7c7DA)
40 : 33
How to Expand and Collapse Toolbar with TabLayout - [Android Animations - #11]
![How to Expand and Collapse Toolbar when scrolling RecyclerView - [Android Animations - #10]](https://i.ytimg.com/vi/-WIp6uNpWcE/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBrno5sey-AxPjzww0nLANA3U2Zlw)
41 : 39
How to Expand and Collapse Toolbar when scrolling RecyclerView - [Android Animations - #10]
01 : 27
(Design Support Library) CollapsingToolbarLayout -- Toolbar not getting pinned on collapse - Androi
01 : 18
Smooth animated Collapsing Toolbar with Android Design Support Library - Android
Comments
-
aindurti almost 2 years
I'm having trouble integrating the Design Support Library into my application. For some reason, the toolbar collapses with the CollapsingToolbarLayout, and does not leave it pinned like in the Cheesesquare example by Chris Banes. https://github.com/chrisbanes/cheesesquare
I didn't do anything different to my layout. In fact, I replaced my styles with his, and dropped in his layout. I wonder if using Toolbar, instead of android.support.v7.widget.Toolbar is causing this.
Here is the problem.
Here is my XML of the AppBar section.
<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:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" 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:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> ... </android.support.design.widget.CoordinatorLayout>-
ianhanniballake almost 9 yearsWhat is your view with
app:layout_behavior="@string/appbar_scrolling_view_behavior"? -
Marian Paździoch almost 8 yearshow did you make the gif?
-
-
jobbert over 8 yearsHad to add width and height to the FloatingActionButton. The rest is perfect :)
-
DKV over 7 years@Bhavinkumar Patel : how to scroll the toolbar same as in what's up. while I am doing toolbar just disappears -
Bhavinkumar Patel over 7 years@V V if you want to disappear toolbar while scrolling then just change app:layout_collapseMode="pin" to app:layout_collapseMode="complete"
