Show CollapsingToolbarLayout title only when collapsed
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
}
})
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">
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">
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!