CollapsingToolbarLayout setTitle() does not update unless collapsed

Question

With the new Design Library, we\'re supposed to set the toolbar title on the CollapsingToolbarLayout, not the Toolbar itself(at least when using th

Answer 1

Okay I have a workaround while we wait for Google:

1. Grab the gist from https://gist.githubusercontent.com/blipinsk/3f8fb37209de6d3eea99/raw/b13bd20ebb319d94399f0e2a0bedbff4c044356a/ControllableAppBarLayout.java (I'm not the original creator but kudos to original author). This adds a few methods to the AppBarLayout, namely expand and collapse

2. In your method that calls setTitle():

collapsingToolbar.setTitle("All Recent");
getSupportActionBar().setTitle("All Recent");
collapseThenExpand();

3. Now create a collapseThenExpand() method:

private void collapseThenExpand() {
  appbar.collapseToolbar();

  Handler h = new Handler();
  h.postDelayed(new Runnable() {
    @Override
    public void run() {
      appbar.expandToolbar(true);
    }
  }, 800);
}

Note you can turn off the expand animation by setting it to false.

Answer 2

In my solution I had to set the title for both the toolbar and the collapsing toolbar for it to work.

So in OnCreate:

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);

And then further down when I switch fragments I set the title for both when a tab is selected:

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

                //TAB1 - THE DEFAULT TAB
                switch (item.getItemId()) {

                        case R.id.tab_rooms:
                            toolbar.setTitle("My Title");
                            collapsingToolbar.setTitle("My Title");
                            fm.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE);
                            fragment = new RoomsFragment();
                            transaction.replace(R.id.fragment_container, fragment);
                            transaction.addToBackStack(null);
                            transaction.commit();

                            return true;

                        case R.id.tab_shisha:
                            toolbar.setTitle("My Title2");
                            collapsingToolbar.setTitle("My Title2");
                            fm.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE);
                            fragment = new ShishaFragment();
                            transaction.replace(R.id.fragment_container, fragment);
                            transaction.addToBackStack(null);
                            transaction.commit();
                            return true;
                          }

                    return false;
                }

Hope that helps someone!

Answer 3

EDIT: This solution is no longer needed. bug fixed in v22.2.1

I didnt want to just leave links so here is the full solution.

The bug occurs because the code to handle the collapsable title only updates the actual title if the current title is null or the text size has changed. The workaround is to change the title text size and then change it back. I used 0.5 sp so there was not too much of a jump. Changing the text size forces the text to be updated and there is no flicker. just a slight text size change.

This is what I have

private void setCollapsingToolbarLayoutTitle(String title) {
    mCollapsingToolbarLayout.setTitle(title);
    mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
    mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
    mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBarPlus1);
    mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBarPlus1);
}

in styles.xml I have

<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="ExpandedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">28.5sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CollapsedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">24.5sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

Happy Coding.