how to pin title in Toolbar inside CollapsingToolbarLayout

Question

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.

http://stackoverflow.com/questions/30682548/collapsingtoolbarlayout-settitle-does-not-update-unless-collapsed — ask4solutions, Jul 14 '15 at 10:02
Hi, @ask4solutions What I need is show and keep title in Toolbar. Not update it. — Alex.Li, Jul 14 '15 at 10:09
Check this link it may help you... [enter link description here][1] [1]: http://stackoverflow.com/a/28265266/2169192 — Bala Saikrupa Puram, Jul 14 '15 at 10:13

score 66 · Accepted Answer · answered Nov 16 '15 at 23:55

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);

score 16 · Answer 2 · answered Jan 20 '16 at 13:33

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.

score 10 · Answer 3 · answered Aug 03 '15 at 08:08

10

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.

answered Aug 03 '15 at 08:08

kerpie

109
3

for making text appear in the normal place add text.setPadding(16,0,0,0); – luca992 Aug 10 '15 at 19:39
This solution is not the best. You can read my solution in the post below – Francesco Florio Jan 20 '16 at 13:43

score 7 · Answer 4 · answered Apr 26 '16 at 07:00

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);

cont use the setTitleEnabled – yubaraj poudel Jun 17 '16 at 11:52 — yubaraj poudel, Jun 17 '16 at 11:52

score 0 · Answer 5 · answered Jul 14 '15 at 10:18

0

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

answered Jul 14 '15 at 10:18

Bala Saikrupa Puram

721
1
7
28

Can you post your code here. So that we can check where is the problem exist – Bala Saikrupa Puram Jul 14 '15 at 10:47
Thanks saikrupa. How to pin title? – Alex.Li Jul 14 '15 at 15:18
I dont want CollapsingToolbarLayout collapsing title, I want the title text stays in Toolbar like title in Actionbar; – Alex.Li Jul 17 '15 at 03:17
He wants to have the title stay in the toolbar when the collapsible toolbar expands. Instead of move with the collapsing toolbar. If I understand correctly...I'm also trying to figure this out – luca992 Jul 28 '15 at 21:52

score 0 · Answer 6 · answered Apr 11 '17 at 04:49

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

how to pin title in Toolbar inside CollapsingToolbarLayout

6 Answers6

Linked