Multiline Text view in CollapsingToolbarLayout instead of Title

Question

I want to display some text in Collapsing toolbar instead of title. Problem is that text may contain more than 1 line. So I need to use custom view, but can't understand how to implement it in proper way.

Also, how to set minimal CollapsingToolbar height, to always show all text lines, not collapse them to one?

Totally, I need something like this:

Where 1 - start position and 3 - ends position (no more collapse after reaching this toolbar height).

Answer 1

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.