Multiline Text view in CollapsingToolbarLayout instead of Title
When you want to do customization in CollapsingToolbarLayout then you need to know about that. It's easy to add CollapsingToolbarLayout
in Android projects. If you are using Android Studio then it's easy to add.
Just right-click on your package like com.project
, select New->Activity->ScrollingActivity and Add
it in your project. Now you just need to do some customization with your code.
Go to your styles.xml
file and add these 2 styles:
<style name="TextAppearance.MyApp.Title.Collapsed" parent="android:TextAppearance">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">11sp</item>
</style>
<style name="TextAppearance.MyApp.Title.Expanded" parent="android:TextAppearance">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">14sp</item>
</style>
Go to your activity_scrolling.xml file and set those 2 styles in your CollapsingToolbarLayout
. Other is add TextView
as your requirement in CollapsingToolbarLayout
. Like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.mailcollection.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:collapsedTitleTextAppearance="@style/TextAppearance.MyApp.Title.Collapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="@style/TextAppearance.MyApp.Title.Expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left|bottom"
android:orientation="vertical"
android:padding="10dp"
android:layout_marginBottom="20dp"
app:layout_collapseMode="parallax">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="@string/app_name"
android:textSize="15sp"/>
<TextView
android:id="@+id/tv_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textSize="20sp"
android:text="@string/title_description"/>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
app:layout_anchor="@id/appBarLayout"
app:layout_anchorGravity="bottom|end"
app:srcCompat="@android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
When you do some customization with your CollapsingToolbarLayout
then you need to implement some custom code in your activity file also.
Go to your ScrollingActivity.java file :-
public class ScrollingActivity extends AppCompatActivity {
CollapsingToolbarLayout collapsingToolbar;
AppBarLayout appBarLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbar);
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.TextAppearance_MyApp_Title_Collapsed);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.TextAppearance_MyApp_Title_Expanded);
// This is the most important when you are putting custom TextView in CollapsingToolbar
collapsingToolbar.setTitle(" ");
appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = false;
int scrollRange = -1;
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
//when collapsingToolbar at that time display actionbar title
collapsingToolbar.setTitle(getResources().getString(R.string.app_name));
isShow = true;
} else if (isShow) {
//carefull there must a space between double quote otherwise it dose't work
collapsingToolbar.setTitle(" ");
isShow = false;
}
}
});
}
}
This is the complete code that if you want to add Multiline TextView
in CollapsingToolbarLayout
instead of Title. I hope you will get you solution.
When you implement code like this then no need to set minimal CollapsingToolbar height, It show all text lines always according to text length.