I have some problems with AppBarLayout and CollapsingToolbarLayout. This is what currently happens:
https://www.youtube.com/watch?v=z4yD8rmjSjU
The downwards scrolling motion is exactly what I want. However when I scroll up again, the orange bar should appear immediately (which it does), but I want the ImageView to start appearing only when the user has scrolled to the very top. Can anyone help me to achieve this effect?
This is my layout xml:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:text="ImageView"
android:textSize="20sp"
android:textColor="#android:color/white"
android:gravity="center"
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="145dp"
app:layout_collapseMode="parallax"
android:background="#444"/>
<TextView
android:text="Top bar"
android:textColor="#android:color/white"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:text="Bottom bar"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:textColor="#android:color/black"
android:layout_height="50dp"
android:background="#ddd"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling"/>
Customisation of CoordinatorLayout behaviour is hard. You want the orange bar to appear immediately but ImageView only after the content is scrolled to the top, but these views belong to one parent CollapsingToolbarLayout and both get either the behaviour you have now or the opposite with enterAlwaysCollapsed flag. I see no way to separate the behaviour for these views without messing with CoordinatorLayout/CollapsingToolbarLayout Java API.
If simpler behaviour is not an option and noone here points out a simple solution, I suggest trying a relatively new MotionLayout instead of dancing with CollapsingToolbarLayout internals, you will save yourself a lot of time in the end. It will be a little harder at start but it provides clear ways for customisation. Here's a very good article that shows how to build a UX similar to CoordinatorLayout but using MotionLayout. And the second part of this article with some additional customisations.
I ended up moving the orange bar out of the CollapsingToolbarLayout and setting an OnOffsetChangedListener that changes the translationY of the top bar on the AppBarLayout.
Setting the OnOffsetChangedListener:
app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->
topbar.translationY = Math.min(image.height.toFloat(), - offset.toFloat())
})
Layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="#+id/topbar"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="#android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>
There are lots of effects on the scrolling behavior that can be achieved by setting different layout_scrollFlags. In your case, I think the flag you want is enterAlwaysCollapsed. Add the flag along with enterAlways instead of replacing all the flags.
scroll will make the toolbar scroll like the rest of the content, enterAlways will make the toolbar AND the rest of the CollapsingToolbarLayout to pop back immediately after scroll up, whereas enterAlwaysCollapsed only expands the CollapsingToolbarLayout after the page is scrolled all the way to the top.
Here's the effect that enterAlwaysCollapsed achieves.
I think you can manage that from your code ,I have tried that by simply detecting behavior of layout
app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
{
// Collapsed
}
else
{
//Expanded
}
}
});
Try this #Mark.I got the scroll you showed in the Video
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:layout_marginTop="56dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="#android:color/white"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="#android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Related
I am using CollapsingToolbarLayout in my Fragment. It contains A RelativeLayout consisting of a ViewPager and an EditText aligned in top of ViewPager. When the user scrolls down the toolbar collapses. What i want is when it collapses I want to make only the ViewPager collapse but Edit Text remain un collapsed.
This is my XML file:
<?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:orientation="vertical"
android:layout_marginBottom="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_gravity="top"
android:scaleType="centerCrop"
android:background="#drawable/loading_image"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/user"
android:text=""
android:gravity="center"
android:layout_centerInParent="true"
android:textSize="16sp"
android:textColor="#ff0000"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_below="#+id/user"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search here"
android:padding="10dp"
android:id="#+id/srch"
android:textColor="#000"
android:maxLines="1"
android:background="#drawable/search_border_grey"/>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/search_24"
android:layout_centerVertical="true"
android:background="#fff"
android:layout_margin="5dp"
android:text="Button"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/collapsing_toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:id="#+id/root_layout"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/customgrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:paddingBottom="10dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:verticalSpacing="3dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I have tried adding a new layout below AppBarLayout and making it visible on collapsing of Toolbar, but its having a bad user experience since it causes the ui flicker. Is there solution for my requirement. All your responses are appreciated.
When the user scrolls down the toolbar collapses. What i want is when
it collapses I want to make only the ViewPager collapse but Edit Text
remain un collapsed.
You have added "scroll|exitUntilCollapsed" in the CollapsingToolbarLayout which means, it will close-exit the view when it collapsed.
In order to make EditText (Search) stay in there, I'd suggest adding the EditText inside the CoordinatorLayout as it's child then, anchoring it to the AppBarLayout. Just like when we anchor a Fab inside CoordinatorLayout.
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center" // change it for your own porpuse
The other way I'd suggest (Not tested), would be adding :
app:layout_collapseMode="pin"
To your View (EditText or Container of that) or, changing the flags to:
app:layout_scrollFlags="scroll|snap"
In the CollapsingToolbarLayout.
It can however be done by handling AppBarLayout behavior to detect when it is collapsed or expended:
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
{
if (offset == 0)
{
// Fully expanded
// make your view visible or not collapsible here maybe?
}
else
{
// Not fully expanded or collapsed
}
}
Check: How can i determine that CollapsingToolbar is collapsed?
Problem 1:
I have made my toolbar transparent but There is some sort of overlay effect which I don't want. How can I remove that effect? I have marked that place(1) in a sample image.
code for ToolBar:
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
ToolBarLayOut:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:background="#color/transparent"
android:minHeight="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/location_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_location"
/>
<TextView
android:layout_toRightOf="#id/location_ic"
android:id="#+id/toolbar_title"
android:padding="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/custom_font"
android:text="서울 서초구 강남역 주변"
android:textColor="#color/colorWhite" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_arrow_drop_down"
android:layout_toRightOf="#id/toolbar_title"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Problem 2: I am using a scroll view with a child list view in my app. but the problem is when I am taping any white space(marked 2) o list item parent scroll is not working but when taping on images then the parent scroll works (Marked 3). only the child list view scroll is working which I don't want I want the parent scroll to work here.
AppBarLayout has StateListAnimator by default try setting it to null using below code
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
android:stateListAnimator="#null"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
I have the following code inside a CoordinatorLayout. What this code basically does is that it has two toolbars on top of one another See Image Here. What I plan to achieve is that when users scroll down, only the second toolbar collapses.
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_home_appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:background="?attr/colorPrimary"
app:theme = "#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways|snap"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar_filters"
android:background="#color/colorAccent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/category"
android:textSize="12dp"
style="#style/FlatButton"
android:id="#+id/toolbar_category_btn"
android:textColor="#android:color/white"
android:layout_height="wrap_content" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/filter"
android:id="#+id/toolbar_filter_btn"
android:textSize="12dp"
android:textColor="#android:color/white"
style="#style/FlatButton"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
You can use CollapsingToolbar layout to achieve this. Its one of the material design UI component they have released when you want to collapse any view over scroll. Follow the below link to understand how it works,
https://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
use toolbar instead of imageview in the example.
I have an odd problem with my layouts. I have a CoordinatorLayout with a CollapsingToolBarLayout in it. I have a transparent status bar to better display the image in the top. Thus I have fitsSystemWindow set on this ImageView. The problem I now have is that when the Toolbar is fully collapsed, the top part of the toolbar scrolls behind the system status bar. Is there a way to prevent this behavior?
Here are the screenshots:
Here is my 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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordinatorLayout">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main_collapsing"
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="140dp"
app:expandedTitleMarginBottom="90dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
app:layout_collapseMode="parallax"
android:id="#+id/icon"
android:transitionName="pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/missing_album_art"
android:tint="#AA000000"
android:fitsSystemWindows="true"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="20dp"
android:orientation="horizontal">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/smallicon"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/artist"
android:ellipsize="end"
android:singleLine="true"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:id="#+id/date"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/main_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.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/list"
android:dividerHeight="2dp"
android:transitionName="bottom">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Also, I tweak the layout parameters a bit when creating the activity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
Add android:fitsSystemWindows="true" to the root of your layout i.e. CoordinatorLayout
Most of the time, your app won’t need to draw under the status bar or the navigation bar, but if you do: you need to make sure interactive elements (like buttons) aren’t hidden underneath them. That’s what the default behavior of the android:fitsSystemWindows=“true” attribute gives you: it sets the padding of the View to ensure the contents don’t overlay the system windows.
Read more on this here.
Good evening folks,
Here's the deal. I put some widgets inside my CollapsingToolbarLayout (2 TextViews, 2 ImageViews, 1 ImageButton and 1 NetworkImageView that appears in the background) alongside a Toolbar. The result is great on Lollipop.
Here's what it looks like on Lollipop (desired result):
However, from Android 4.0 to Android 4.4, this is the result:
The children views don't appear. As you can see, all these views are supposed to be at the bottom of the layout.. and I've actually noticed they do appear but only when the bottom of the expanded App bar is aligned underneath the toolbar. This is why 1 of the two ImageViews does appear.
.. Very weird.
Anyway, here's my full AppBarLayout, which is later included in another layout.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/actionBar.QuickLyric"
app:layout_behavior="com.geecko.QuickLyric.utils.AppBarBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="162dp"
app:expandedTitleMarginStart="60dp"
app:expandedTitleTextAppearance="#style/TextAppearance.Invisible"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.geecko.QuickLyric.view.FadeInNetworkImageView
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/cover_art_desc"
android:scaleType="centerCrop"
android:background="#color/cover_bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_gravity="top"
android:rotation="180"
android:src="#drawable/gradient_overlay"
app:layout_collapseMode="pin"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_gravity="bottom"
android:src="#drawable/gradient_overlay"/>
<TextView
android:id="#+id/song"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginBottom="25dp"
android:ellipsize="end"
android:paddingLeft="12dp"
android:paddingRight="26dp"
android:scrollHorizontally="true"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="?android:textColorPrimary"/>
<TextView
android:id="#+id/artist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|bottom"
android:layout_marginBottom="5dp"
android:ellipsize="end"
android:paddingLeft="12dp"
android:paddingRight="26dp"
android:scrollHorizontally="true"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Subhead"
android:textColor="?android:textColorSecondary"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="4dp"
android:background="?android:attr/selectableItemBackground"
android:padding="10dp"
android:src="#drawable/ic_edit"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:focusable="false"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
Hopefully you guys can help.. :/
It's been filed as a bug and will be fixed in a future Release.
Source: https://code.google.com/p/android/issues/detail?id=177738&can=1&q=CollapsingToolbarLayout&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars