AutoScroll Toolbar text when using CollapsingToolbarLayout

Question

I have CollapsingToolbarLayout with long title with Toolbar inside. Because of title is too long, its end is replaced by three dots. The problem is when CollapsingToolbarLayout is collapsed and Toolbar has CollapsingToolbarLayout's title, is still has three dots. I want to make title of Toolbar autoscroll if it's long.

My XML:

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/recyclerview_background"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="190dp"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorAppPrimary"
        app:expandedTitleMarginEnd="8dp"
        app:expandedTitleMarginStart="36dp"
        app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <RelativeLayout
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="190dp"
            android:fitsSystemWindows="true">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/material_bg_3"
                app:layout_collapseMode="parallax" />

            <ImageView
                android:id="@+id/imageViewPhoto"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_collapseMode="parallax" />

            <TextView
                android:id="@+id/textViewName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="false"
                android:layout_below="@+id/imageViewPhoto"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:text=""
                android:textColor="@color/white"
                android:textSize="16sp" />

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:ellipsize="marquee"
            android:fitsSystemWindows="true"
            android:gravity="top"
            app:layout_collapseMode="pin">

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="marquee"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="20dp"
                android:textStyle="bold"
                android:visibility="gone" />
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/AppTheme.TabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/white"
            app:tabIndicatorColor="@color/colorAppPrimary"
            app:tabMode="scrollable" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_alignParentBottom="true"
            android:layout_below="@id/tabs" />

    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

Expanded CollapsingToolbarLayout:

Toolbar:

have you tried to remove this line in your text title - android:ellipsize="marquee" — Inducesmile, Mar 02 '16 at 00:31

score 0 · Answer 1 · edited May 23 '17 at 12:25

I have tested it and it is working. Have a look and see if it suits your need.

Add this text in your Toolbar View

<TextView
        android:id="@+id/toolbar_title"
        android:text="This will run the marquee animation forever"
        android:textSize="@dimen/abc_text_size_title_material_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true" />

then in your activity class, add this line of code after

setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(null);

My Full code is below.

layout file

<?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.inducesmile.toolbartesting.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:scrollHorizontally="true"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

    <TextView
        android:id="@+id/toolbar_title"
        android:text="This will run the marquee animation forever"
        android:textSize="@dimen/abc_text_size_title_material_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

and the Activity class

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(null);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}
}

This solution was partly from here

Update

I have add addOnOffsetChangedListener to AppBarLayout to detect when the CollapsingToolbarLayout is expanded or collapsed.

First instantiate the AppBarLayout

private AppBarLayout mAppBarLayout;
private TextView toolBarText;

the inside onCreate method

toolBarText = (TextView)findViewById(R.id.toolbar_title);
    mAppBarLayout = (AppBarLayout)findViewById(R.id.app_bar);
    mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            Toast.makeText(MainActivity.this, "Vert " + verticalOffset, Toast.LENGTH_LONG).show();
            if(verticalOffset == 0){
                // Expanded
                toolBarText.setText("");                    
            }else{
                //collapsed
            }
        }
    });

Check if it works for you

It works, but there is a problem. I use `CollapsingToolbarLayout`. How can I remove title of `Toolbar` when `CollapsingToolbarLayout` is expanded? — Roman Svyatnenko, Mar 02 '16 at 01:18
check this fix - http://stackoverflow.com/questions/30682548/collapsingtoolbarlayout-settitle-does-not-update-unless-collapsed — Inducesmile, Mar 02 '16 at 01:50
it's not related to my problem. My code works fine, I just want to make `Toolbar` marquee — Roman Svyatnenko, Mar 02 '16 at 02:03
ok, i try a new code with CollapsingToolbarLayout and update my solution — Inducesmile, Mar 02 '16 at 02:15
It works, but now my `AppBarLayout` doesn't collapse and `CollapsingToolbarLayout` very-very quickly — Roman Svyatnenko, Mar 02 '16 at 22:43

score -1 · Answer 2 · answered Mar 11 '17 at 17:44

to remove the title of Toolbar when CollapsingToolbarLayout expanded add this snippet:

final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout)
            findViewById(R.id.collapsing_toolbar_layout);

mAppBar.addOnOffsetChangedListener(new OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            if (collapsingToolbar.getHeight() + verticalOffset <
                    2 * ViewCompat.getMinimumHeight(collapsingToolbar)) {
                mTitleTV.setVisibility(View.VISIBLE);
                mTitleTV.animate().alpha(1).setDuration(600);
            } else {
                mTitleTV.animate().alpha(0).setDuration(600);
            }
        }
    });

AutoScroll Toolbar text when using CollapsingToolbarLayout

2 Answers2