CODEWITHSUNDEEP
androidandroid-collapsingtoolbarlayout
Psest328
Psest328

Reputation: 6675

Show CollapsingToolbarLayout title only when collapsed

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?

Upvotes: 168

Views: 102839

Answers (16)

BamsBamx
BamsBamx

Reputation: 4256

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

Upvotes: 1

jsHate
jsHate

Reputation: 599

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

Upvotes: 1

Moises Portillo
Moises Portillo

Reputation: 838

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

Upvotes: 0

AlimItTech
AlimItTech

Reputation: 182

just add this code : 

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

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

Upvotes: 4

steven274
steven274

Reputation: 3321

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

Upvotes: 322

Vishal
Vishal

Reputation: 377

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

Upvotes: 21

Pranav P
Pranav P

Reputation: 1825

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

Upvotes: 1

Parth Patel
Parth Patel

Reputation: 6788

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("");
                    }
                }
            });

Upvotes: 8

Aistis
Aistis

Reputation: 31

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

Upvotes: 3

Hardik Dudhaiya
Hardik Dudhaiya

Reputation: 249

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

Upvotes: 24

Blaz
Blaz

Reputation: 2075

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.

Upvotes: 2

Shaun
Shaun

Reputation: 173

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>

Upvotes: 4

Alecs
Alecs

Reputation: 2940

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!

Upvotes: 14

Shrini Jaiswal
Shrini Jaiswal

Reputation: 1090

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!

Upvotes: 25

R&#250;ben Sousa
R&#250;ben Sousa

Reputation: 1409

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">

Upvotes: 50

dlohani
dlohani

Reputation: 2591

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">

Upvotes: 41

Related Questions