Develop Reference

CollapsingToolbarLayout that contains only custom views (layouts)

I have a fragment where I want to use CollapsingToolbarLayout
<?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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:contentDescription="#string/app_name"
android:src="#drawable/festival"
app:layout_collapseMode="parallax"/>
<include layout="#+id/custom_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
//...custom view /> ...
When collapsing_toolbar is expanded I want to have the image displayed and when collapsed I want to have only the #+id/custom_layout. The custom_layout is a relative layout with a textview and an imageview.
I want to have exactly the same behavior as if I had the following:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
instead of the custom layout.
Why this is not working?
Even though the CollapsingToobarLayout is expanded i see both the ImageView and the custom layout.
!!Note I do have an activity with a toolbar defined. I don't want to touch that part of the code. When I m scrolling up the fragment, I want the #+id/custom_layout to be aligned below the existing toolbar defined in the activity.
I add the following in onViewCreated() method inside the fragment:
RelativeLayout headerLayout = view.findViewById(R.id.custom_layout);
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout);
mAppBarLayout.addOnOffsetChangedListener(new
AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset == 0) {
//fully expanded
headerLayout.setVisibility(View.GONE)
} else {
//fully collapsed
headerLayout.setVisibility(View.Visible);
//ISSUE HERE!!!: Only when ImageView has height = 0, the headerLayout pops up.
//!!The transition is not smoothly.
// I would like the headerLayout to be visible when the ImageView height reaches the headerLayout height.
}
}
});

You can do it programatically.In your activity add this listener in OnCreate() method
ImageView headerImage = view.findViewById(R.id.header_image);
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout);
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = false;
int scrollRange = -1;
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
isShow = true;
headerImage.setVisibility(View.VISIBLE);
} else if (isShow) {
isShow = false;
headerImage.setVisibility(View.GONE);
}
}
});
EDIT to why you can't get the same effect as having the actual Toolbar
The docs state CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. So it was designed to be used with Toolbar by Google. You can simple create some sort of a workaround to use your custom layout

You can hide the imageView when the collapsingToolbar is collapsed and show again when it is expanded. In your activity class, use onOffsetChangedListener :
AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// If collapsed, then do this
imageViewHeaderImage.setVisibility(View.GONE);
} else if (verticalOffset == 0) {
// If expanded, then do this
imageViewHeaderImage.setVisibility(View.VISIBLE);
}
}
}););

Collapsing Toolbar - disable scrolling by touch

I want to disable scrolling by touch behaviour for the collapsing toolbar. It should only be collapsing, if triggered by the RecyclerView (which is working). I thought why not just disable focus...
android:focusableInTouchMode="false"
but it is not working. I could change the layout_scrollFlags but then...
My question therefore, is there a simple solution for this?
XML:
<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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/mCollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/header_size"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
...
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/mToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
...
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Found a working solution here: https://stackoverflow.com/a/35465719/2033223.
So now it is only scrollable, if there are enough elements in the recyclerView.
XML:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/mCollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/header_size"
android:fitsSystemWindows="true"
app:scrimAnimationDuration="300"
app:contentScrim="?attr/colorPrimary">
Activity:
public class MainActivity extends AppCompatActivity {
private CollapsingToolbarLayout collapsingToolbarLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
collapsingToolbarLayout =
(CollapsingToolbarLayout) findViewById(R.id.mCollapsingToolbar);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
if (rv.canScrollVertically(DOWN) || rv.canScrollVertically(UP)) {
controller.enableScroll();
} else {
controller.disableScroll();
}
}
}, 100);
}
private void enableScroll() {
final AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams)
collapsingToolbarLayout.getLayoutParams();
params.setScrollFlags(
AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
| AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
);
collapsingToolbarLayout.setLayoutParams(params);
}
private void disableScroll() {
final AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams)
collapsingToolbarLayout.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_NO_SCROLL);
collapsingToolbarLayout.setLayoutParams(params);
}
}
PS:
findLastCompletelyVisibleItemPosition() wasn't enough for my case. But I use it too. (check out link below)
https://stackoverflow.com/a/31460285/2033223
EDIT:
If you want to make sure, that the correct scroll status is set, use notifications/events (not timed update), after the list is initialized (view is updated). Otherwise it can set the scroll flags incorrectly.

Android design Library AppBar scrolling behavior enterAlways

I am using the latest version of the design support library (23.1.1) and I am facing an issue when I use the CollapsingToolbarLayout with the enterAlways scroll flag. Basically, when you scroll back up, the view appears but if also leaves a empty white space at top.
Normal View:
After scrolling down and then back up (notice the whitespace below status bar):
MainActivity.java
public class MainActivity extends AppCompatActivity {
AppBarLayout appBar;
View expandedView;
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("");
initViews();
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
private void initViews() {
appBar = (AppBarLayout) findViewById(R.id.appBar);
appBar.addOnOffsetChangedListener(appBarOffsetChangedListener);
expandedView = findViewById(R.id.expandedView);
RecyclerView rv = (RecyclerView) findViewById(R.id.rv);
rv.setLayoutManager(new LinearLayoutManager(this));
rv.setAdapter(new DummyAdapter());
}
private AppBarLayout.OnOffsetChangedListener appBarOffsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
int maxOffset = appBar.getTotalScrollRange();
verticalOffset = Math.abs(verticalOffset);
if(verticalOffset > maxOffset)
return;
float percentage = verticalOffset / (float) maxOffset;
if(expandedView!=null)
expandedView.setAlpha(1 - percentage);
}
};
}
activity_main.xml
<?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="com.media2359.fragmenttoolbarchange.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:id="#+id/expandedView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:paddingLeft="#dimen/toolbar_text_margin_left"
android:paddingTop="#dimen/toolbar_text_margin_top"
tools:background="#color/colorPrimaryDark">
<TextView
android:id="#+id/tvName"
style="#style/TextAppearance.AppCompat.Headline"
android:layout_width="#dimen/toolbar_text_width"
android:layout_height="wrap_content"
android:text="Hello" />
<TextView
android:id="#+id/tvTime"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="#dimen/toolbar_text_width"
android:layout_height="wrap_content"
android:layout_below="#id/tvName"
android:layout_marginTop="7dp"
android:text="04 Feb, Tuesday evening" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/item_dummy" />
</android.support.design.widget.CoordinatorLayout>
Using enterAlwaysCollapsed along with enterAlways avoids this issue but I want the full view to come back because in the actual app, the expanded section is way smaller.
Another thing that I have noticed is that, the height of the whitespace is equal to the height to the toolbar.
EDIT 1
I replaced exitUntilCollapsed with snap and then there wasn't any white space but then the toolbar doesn't pin and scrolls away
EDIT 2
Looks like this is an issue with the Design Library: CollapsingToolbarLayout enterAlways not supported
Temporary Workaround: Cheesesquare: enterAlways produces wrong layout

Perhaps that's because of:
enterAlways
Which the codepath/android_guides says:
enterAlways: The view will become visible when scrolling up. This flag
is useful in cases when scrolling from the bottom of a list and
wanting to expose the Toolbar as soon as scrolling up takes place.
Maybe you wanna try this: (standard way)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Honestly, I didn't see somebody is using enterAlways in CollapsingToolbarLayout in my whole development life.Especially, with those two flags:
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
Otherwise, It could be a bug and needs the Google's staffs to answer about it.

Toolbar inside CollapsingToolbarLayout, Toolbar title not showing

I used CollapsingToolbarLayout as the parent of Toolbar, below it the layout
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/test_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="#drawable/abc_ic_ab_back_mtrl_am_alpha"
app:theme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Then I want to set the title of the Toolbar with the following code, but it didn't work. The title just didn't show.
Toolbar toolbar = (Toolbar) findViewById(R.id.test_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setTitle("ABC");
I also tried set the title in CollapsingToolbarLayout with the following code, it didn't work either.
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(true);
collapsingToolbarLayout.setTitle("ABC");
But if I removed CollapsingToolbarLayout from my layout and make AppBarLayout as the direct parent of Toolbar, the code above to set the title of Toolbar worked.
Did I missed something? This issue is so weird. Is it a bug in design support library? How can I solve it without changing my layout?

This is a temporary solution. I didn't investigate the code deeply, but by disabling the refresh of Toolbar in CollapsingToolbarLayout, it worked.
Here is what I did:
public static void setRefreshToolbarEnable(CollapsingToolbarLayout collapsingToolbarLayout,
boolean refreshToolbarEnable) {
try {
Field field = CollapsingToolbarLayout.class.getDeclaredField("mRefreshToolbar");
field.setAccessible(true);
field.setBoolean(collapsingToolbarLayout, refreshToolbarEnable);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}

Simply set Collapsing toolbar 'titleEnabled=false' in xml Then Toolbar title will show up.
app:titleEnabled="false"

try this :
collapsingToolbarLayout.setTitleEnabled(false);
toolbar.setTitle("ABC");

Move
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(true);
collapsingToolbarLayout.setTitle("ABC");
from onCreate to onCreateView inside if

how to pin title in Toolbar inside CollapsingToolbarLayout

Here is my layout:
<android.support.design.widget.AppBarLayout
<android.support.design.widget.CollapsingToolbarLayout
...
<android.support.v7.widget.Toolbar
...
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I want title stays in Toolbar, not in CollapsingToolbarLayout. So I changed my code from:
mCollapsingToolbar = ...
mCollapsingToolbar.setTitle(title);
to:
mTitleBar = ...
setSupportActionBar(mTitleBar);
getSupportActionBar().setTitle(title);
But the title is not visible. My device is Nexus 6 5.1.0
Thanks in advance.
Update 1: I have changed code to this, still not work :(
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Update 2: Here is code snippet for those three views:
private void setUpAppBarLayout() {
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
appBarLayout.setBackgroundColor(extractBackgroundColor());
}
private void setUpCollapsingToolbarLayout() {
if (null == mCollapsingToolbar) {
mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
}
}
private void setUpToolbar(String title) {
mToolbar = (Toolbar) findViewById(R.id.tb_main);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
supportFinishAfterTransition();
}
});
mToolbar.inflateMenu(R.menu.menu_group_activity);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
if (R.id.action_settings == item.getItemId()) {
...
return true;
} else {
return false;
}
}
});
mToolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mRecyclerView.smoothScrollToPosition(0);
}
});
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle(title);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
After called setSupportActionBar(mToolbar), both title and menu are invisible.

In order for the Toolbar title to work with the CollapsingToolbarLayout you need to set the ctl's title enabled to false
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);

The solution is easy. As Daniel Persson said, you just set collapsingToolbarLayout.setTitleEnabled(false);
or use the XML attribute app:titleEnabled="false"
and set the title with the inner Toolbar instead of the CollapsingToolbarLayout, i.e.: toolbar.setTitle(title);
It is very simple and it not required workarounds.

It actually looks like the title from the Toolbar is gone when you wrap it inside a CollapsingToolBarLayout, so the only solution I got for this issue is to create a new TextView and add it to the ToolBar, remember that Toolbar is a ViewGroup, so you can add widgets to it. It's not as clean as I would like, but it works for now.
TextView text = new TextView(this);
text.setText(title);
text.setTextAppearance(this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse);
toolbar.addView(text);
Hope I can find an xml-friendly solution for this soon, too.

The trick here is to set the titleEnabled = false of CollapsingToolbarLayout
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Message"
app:titleMarginTop="13dp"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
Or through code:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
collapsingToolbarLayout.setTitleEnabled(false);

You need to enable actionBar.setDisplayHomeAsUpEnabled(true); in your code

Maybe this? Just add android:fitsSystemWindows="true" to AppBarLayout
<android.support.design.widget.CoordinatorLayout
...
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
...
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My Title"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
This is what you get