CODEWITHSUNDEEP
androidandroid-layout
dtzkwa34
dtzkwa34

Reputation: 160

Fading the toolbar text color on collapse

I'm using the CollapsingToolbarLayout for creating a collapsable toolbar. The background picture is fading to the toolbar color as expected. Now, i want to also fade the text color of the toolbar title and subtitle while it gets collapsed (from black to white). Is there a possibility to do this without the OnOffsetChangedListener?

<android.support.design.widget.AppBarLayout
    android:id="@+id/layout_bar"
    android:layout_width="match_parent"
    android:layout_height="210dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="true">

        <ImageView
            android:id="@+id/fadingImage"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="pin"
            app:navigationIcon="@drawable/ic_arrow_back">

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

                <TextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Information"
                    android:textColor="@android:color/black"
                    android:textSize="24sp" />

                <TextView
                    android:id="@+id/subtitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/title"
                    android:fontFamily="sans-serif-light"
                    android:text="Message List"
                    android:textSize="17sp" />

            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Upvotes: 2

Views: 1637

Answers (1)

Theophrast
Theophrast

Reputation: 26

Set the titles expanded and collapsed style:

mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.AppBarExpanded);
mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.AppBarCollapsed);

The styles should look like this:

<style name="AppBarCollapsed" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">32sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="AppBarExpanded" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/black</item>
    <item name="android:textStyle">normal</item>
</style>

Upvotes: 1

Related Questions