Show CollapsingToolbarLayout title only when collapsed

Question

I've tried setExpandedTitleColor and setCollapsedTitleColor (switching to and from transparent) with no luck. I can't see any built in methods that'll do what I'm looking for, either.

I only want to show the title when the CollapsingToolbarLayout is fully collapsed, otherwise, I need it hidden.

Any hints?

score 322 · Accepted Answer · edited Jan 21 '20 at 05:42

322

You can add OnOffsetChangedListener to AppBarLayout to determine when CollapsingToolbarLayout is collapsed or expanded and set it's title.

Java

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isShow = true;
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
            collapsingToolbarLayout.setTitle("Title");
            isShow = true;
        } else if(isShow) {
            collapsingToolbarLayout.setTitle(" ");//careful there should a space between double quote otherwise it wont work 
            isShow = false;
        }
    }
});

Kotlin

var isShow = true
var scrollRange = -1
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { barLayout, verticalOffset ->
    if (scrollRange == -1){
        scrollRange = barLayout?.totalScrollRange!!
    }
    if (scrollRange + verticalOffset == 0){
        collapsingToolbarLayout.title = "Title Collapse"
        isShow = true
    } else if (isShow){
        collapsingToolbarLayout.title = " " //careful there should a space between double quote otherwise it wont work
        isShow = false
    }
})

edited Jan 21 '20 at 05:42

Kiran Maniya

8,453
9
58
81

answered Sep 22 '15 at 18:37

steven274

3,321
2
10
11

1

This solution works for api 23 and above. This is the most correct solution. – Simon Oct 27 '15 at 14:18
Please mark this as the correct answer. The answer from @dlohani that is currently marked as correct does not hide the text because you can see it transition. – themichaelscott Mar 02 '16 at 21:17
this works for me, BUT I had to reset isShow and scrollRange whenever I update the contents of my layout – SteelBytes May 17 '16 at 06:46
byDefault app is coming in Collapsingbar, after collapsing and expanding this solutions works. but what to do if I don't want to get app name while activity starts? – Tara Jul 29 '16 at 11:24
9

It worked for me, but had to change "boolean isShow = false" to true to remove app name in expanded toolbar at activity start. – DH28 Aug 23 '16 at 15:13
what is the solution for api below 23 ? – Giuseppe Aug 29 '16 at 19:35
3

@Giuseppe: it's the same. Tested on API 16 --> working – luckyhandler Aug 30 '16 at 11:34
1

This didn't work for me, sometimes the title doesn't show up at all even when my logs clearly state that setTitle was called with "Title" – user1354603 Dec 15 '16 at 12:35
1

Thanks, this works. But I get a better effect by `if (scrollRange + verticalOffset <120)`. This will always have some text on the appbar instead of a empty appbar. – Parag Kadam Oct 25 '17 at 07:52
1

Thanks for your solution. I write in Kotlin this code `collapsingToolbar.title = if (abs(verticalOffset) != appBarLayout.totalScrollRange) " " else "Title Collapse"` – Black_Zerg Aug 20 '20 at 20:19
How to achieve the same same functionality using Jetpack Compose? Any help will be appreciated – prat Aug 12 '22 at 06:21

Rúben Sousa · Answer 2 · 2015-09-11T18:22:05.523

50

I tried dlohani's solution, but didn't like it because of the fading out. With this solution, you remove the fading completely.

The trick is to create a new style with textSize equal to 0.1sp or 0sp (this one crashes on SDK < 19) and textColor transparent:

For SDK < 19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0.1sp</item>
</style>

For SDK >= 19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0sp</item>
</style>

Then apply it to the CollapsingToolbarLayout in your layout:

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

edited Sep 11 '15 at 18:22

answered Sep 11 '15 at 17:26

Rúben Sousa

1,389
10
8

Ok, like always, this is another solution that doesn't work the same for all devices. On Kitkat 0sp seems to work, but on Jellybean it makes the app crash. 0.1sp works on Jellybean but makes the text shaky on Kitkat :( – Rúben Sousa Sep 11 '15 at 18:12
How can we set that api level limit on the style? – Mahm00d Jan 16 '16 at 06:12
You need to use the values-v19 folder for SDK >= 19 and values folder for SDK < 19. Take a look at this for a reference: http://stackoverflow.com/questions/16624317/styles-and-themes-on-values-values-v11-and-values-v14-folders – Rúben Sousa Jan 17 '16 at 02:49
This seems to be the proper solution...the addOnOffsetChangedListener was added sometime later in the support library and also wasn't available on Xamarin :-P – kenyee May 23 '16 at 21:35
1

This works on N while the solution from @dlohani did not – Tyler Pfaff Sep 01 '16 at 06:01
I used the 2nd code snippet for JellyBean and Marshmellow.It worked fine for both.Thnx.. – SHB Mar 21 '17 at 19:05
This stops working after update to 'com.google.android.material:material:1.1.0' – Bruno Martins Apr 05 '20 at 16:33
2

The problem persists: the text still fades gradually (which means that it will cover any other text shown) when the collapsing toolbar is collapsed. – Richard May 25 '20 at 04:53
0sp does not work because of ```if (textAppearance.textSize != 0) { expandedTextSize = textAppearance.textSize; }``` in com.google.android.material.internal.CollapsingTextHelper#setExpandedTextAppearance, also small size like 5sp makes nice disappear animation – MainActivity Aug 07 '21 at 07:47

score 41 · Answer 3 · answered Jul 28 '15 at 07:21

41

I was able to get the desired effect by adding following property to the xml layout:

app:expandedTitleTextAppearance="@android:color/transparent"

so my CollapsingToolbarLayout looks like this

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

answered Jul 28 '15 at 07:21

dlohani

2,511
16
21

this is awsome :) is there any wey for title to come up with some animation ? – Lubos Mudrak Aug 01 '15 at 17:39
sorry, i have no idea yet for animating, if we do not hide the expanded title by changing appearance, it will be animated (size decreasing) by default – dlohani Aug 02 '15 at 15:40
9

This is horrible, you see it fading in as its collapsing. Rather it just fade in in its final position. – CaptRisky Aug 16 '15 at 06:08
wirking fab but getting erroe in 4.2.2 `width and height must be > 0` – Akshay Aug 20 '15 at 11:17
1

Ditto what CaptRisky said. Unfortunately, I don't think there's an alternative :-( – kenyee Aug 24 '15 at 17:17
10

Thiswill only work if you are using the android api 22 or below. For 23 or above, the solution does not work. You will have to use the solution from @steven274. – Simon Oct 27 '15 at 14:18
1

It's working even better while on android api 23 when I tried – dlohani Oct 30 '15 at 08:48
I tried this, but the title still displayed though. – Dark Leonhart Jan 07 '16 at 06:28
worked only below api22, worked when created styles.xml as ruben suggested in api23 – pavan Jan 08 '16 at 07:04

score 25 · Answer 4 · edited Apr 03 '16 at 16:41

25

I have a more simple answer:

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);

collapsingToolbarLayout.setTitle("Your Title");
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.transperent)); // transperent color = #00000000
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.rgb(0, 0, 0)); //Color of your title

Happy Coding!

edited Apr 03 '16 at 16:41

Stefan Wanitzek

2,059
1
15
29

answered Feb 11 '16 at 11:52

Shrini Jaiswal

1,090
12
12

5

This causes the same fade in issue as referenced in other answers. – themichaelscott Mar 02 '16 at 07:57
I only wanted to change the Toolbar title color and it worked for me with `mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))` – kosiara - Bartosz Kosarzycki Mar 17 '16 at 13:45
@Bartosz Kosarzycki , I was unlucky with mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0) ); but mCollapsingToolbarLayout.setExpandedTitleColor( context.getResources().getColor( android.R.color.transparent ) ); did the job, but certainly derives from your solution :) – ShayHaned Jun 03 '18 at 00:39

Hardik Dudhaiya · Answer 5 · 2017-07-15T07:10:37.377

24

This code works for me: Use color.parse color because if your background color is different then replace with white and your title not display

collapsingToolbarLayout.setExpandedTitleColor(Color.parseColor("#00FFFFFF"));

Or you can use for transparent collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

edited Jul 15 '17 at 07:10

answered Mar 13 '17 at 14:01

Hardik Dudhaiya

249
3
9

Vishal · Answer 6 · 2020-01-05T19:19:46.037

21

I successfully added a fading textview, simply add a text view in toolbar, and setting it's alpha based on the verticalOffset in appbar callback

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
                    appBarLayout.getTotalScrollRange()));
        }
    });

edited Jan 05 '20 at 19:19

answered Aug 05 '16 at 20:44

Vishal

377
3
10

float range = appBarLayout.getTotalScrollRange(); float alpha = Math.abs(verticalOffset / range); if(alpha > 0.8) { mToolbar.setAlpha(alpha); } else { mToolbar.setAlpha(.0f); } – qinmiao Oct 16 '17 at 07:41

score 14 · Answer 7 · answered Jun 30 '16 at 22:49

Here the simplest and working solution also with api 23:

app:expandedTitleTextAppearance has to inherit TextAppearance.

So, in your styles.xml add this rows:

<style name="TransparentText" parent="@android:style/TextAppearance">
   <item name="android:textColor">#00000000</item>
</style>

Then, in your CollapsingToolbarLayout, add this row.

app:expandedTitleTextAppearance="@style/TransparentText"

That's all folks!

score 8 · Answer 8 · answered Apr 12 '18 at 06:36

The below solution works perfectly.

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                    if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
                    {
                        // Collapsed
                        setTitle("Title To Show");
                    }
                    else
                    {
                        // Expanded
                        setTitle("");
                    }
                }
            });

score 4 · Answer 9 · answered Jul 23 '16 at 06:54

Here is my solution:

collapsingToolbar.setCollapsedTitleTextAppearance(R.style.personal_collapsed_title);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.personal_expanded_title);

<style name="personal_collapsed_title">
     <item name="android:textSize">18sp</item>
     <item name="android:textColor">@color/black</item>
</style>

<style name="personal_expanded_title">
     <item name="android:textSize">0sp</item>
</style>

AlimItTech · Answer 10 · 2020-05-21T14:55:35.507

4

just add this code :

     CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collaps_main);

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));

edited May 21 '20 at 14:55

answered May 21 '20 at 14:50

AlimItTech

172
1
9

score 3 · Answer 11 · edited Feb 08 '18 at 11:38

This works for me.

final Toolbar tool = (Toolbar)findViewById(R.id.toolbar);
CollapsingToolbarLayout c = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
AppBarLayout appbar = (AppBarLayout)findViewById(R.id.app_bar_layout);
tool.setTitle("");
setSupportActionBar(tool);
c.setTitleEnabled(false);

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isVisible = true;
    int scrollRange = -1;
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
           tool.setTitle("Title");
            isVisible = true;
        } else if(isVisible) {
            tool.setTitle("");
            isVisible = false;
        }
    }
});

score 2 · Answer 12 · answered Jan 25 '17 at 15:15

In my oppinion a bit more elegant solution would be something like this.

public class MyCollapsingToolbarLayout extends CollapsingToolbarLayout {

    private final int toolbarId;
    @Nullable private Toolbar toolbar;

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        setTitleEnabled(false);

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.CollapsingToolbarLayout, 0,
                R.style.Widget_Design_CollapsingToolbar);

        toolbarId = a.getResourceId(android.support.design.R.styleable.CollapsingToolbarLayout_toolbarId, -1);

        a.recycle();

    }

    @Override public void setScrimsShown(boolean shown, boolean animate) {
        super.setScrimsShown(shown, animate);

        findToolbar();
        if (toolbar != null) {
            toolbar.setTitleTextColor(shown ? Color.WHITE : Color.TRANSPARENT);
        }
    }

    private void findToolbar() {
        if (toolbar == null) {
            toolbar = (Toolbar) findViewById(toolbarId);
        }
    }

}

And usage would look something like this

<butter.droid.widget.BurtterCollapsingToolbarLayout
        app:toolbarId="@+id/toolbar"
        ...>

There is also a possibility to fade out/in text instead of just showing or hiding it.

score 1 · Answer 13 · answered Jan 02 '20 at 03:22

This is kotlin version which works for me :

appbar.addOnOffsetChangedListener(object : OnOffsetChangedListener {
                var isShow = true
                var scrollRange = -1
                override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
                    if (scrollRange == -1) scrollRange = appBarLayout.totalScrollRange

                    if (scrollRange + verticalOffset == 0) {
                        toolbarLayout.title = "Title"
                        isShow = true
                    } else if (isShow) {
                        toolbarLayout.title = " " //These quote " " with _ space is intended 
                        isShow = false
                    }
                }
            })

score 0 · Answer 14 · answered Feb 17 '22 at 15:56

Kotlin extension:

fun AppBarLayout.onAppBarLayoutCollapsed(
  isShowing: (isShow: Boolean) -> Unit
) {
  var isShow: false
  var scrollRange = -1
  this.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { barLayout, verticalOffset ->
    if (scrollRange == -1) {
      scrollRange = barLayout?.totalScrollRange!!
    }
    isShow = scrollRange + verticalOffset == 0
    isShowing.invoke(isShow)
  })

and after that:

appBarLayout.onAppBarLayoutCollapsed({
   if(it){
     ///set text
   }else{
     ///remove text
   }
})

jsHate · Answer 15 · 2023-06-14T19:30:57.713

Here the easiest and performant way to hide title in appbar when your CollapsingToolbarLayout is expanded

First method

First add app:expandedTitleTextColor="@android:color/transparent" to collapssingToolbar, so our title won't show until collapsed

<com.google.android.material.appbar.CollapsingToolbarLayout
...
app:expandedTitleTextColor="@android:color/transparent"
/>

Second add java code, so we will show this title in appbar

mCollapsingToolbarLayout.setTitleEnabled(true);

You are done.

And don't ever use addOnOffsetChangedListener to setTitle to empty string and title, because you will be flooded with

requestLayout() improperly called by androidx.appcompat.widget.AppCompatTextView{d67976 V.ED..... ........ 252,51-936,144} during second layout pass: posting in next frame

First method can show slightly seen transparent text, so we can make size of text 0.1 to make it hidden

Second method

add style

<style name="CollapsingToolbarLayoutExpandedTextStyle">
        <item name="android:textColor">@android:color/transparent</item>
        <item name="android:textSize">0.1sp</item>
</style>

add property to xml

<com.google.android.material.appbar.CollapsingToolbarLayout
...
app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
/>

mCollapsingToolbarLayout.setTitleEnabled(true);

score 0 · Answer 16 · answered Jun 27 '23 at 10:55

The only valid solution for me right now (min SDK 23), using Material3 as base app theme is similar to this answer, but instead of using expandedTitleTextAppearance, using:

app:expandedTitleTextColor="@android:color/transparent"

So that the CollapsingToolbarLayout remains like this:

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        app:expandedTitleTextColor="@android:color/transparent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        style="@style/Widget.Material3.CollapsingToolbar.Large" >

When collapsed, the title color will be the one defined by default in the Material3 base theme

Show CollapsingToolbarLayout title only when collapsed

16 Answers16

Java

Kotlin

First method

Second method

Linked