FlexibleToolbarLayout

This wiki highlights the setup needed for the FlexibleToolbarLayout and the customization options available. Here are a few advantages of using this component instead of the official CollapsingToolbarLayout from which this one is derived:

• Collapses more than just a title! You can display a title, a subtitle and even an image which will all be scaled and animated while scrolling and you can style them to fit your personal needs.
• Introduces more advanced elevation handling. The elevation you specified will no longer disappear when you have a solid background, but it still will if you have an immersive image.

1. Setup your layout

All you need to do for unlocking this awesome component is include it in your layout file. Just like the CollapsingToolbarLayout it is designed to be used as a child of the AppBarLayout which in turn should be a child of the CoordinatorLayout. So your layout structure might look similiar to this:

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.tr4android.support.extension.widget.FlexibleToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:title="My title"
            app:subtitle="My subtitle"
            app:icon="@drawable/ic_my_icon"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </com.tr4android.support.extension.widget.FlexibleToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

This is also the place where you should apply all of customization options available. The following is a (logically) sorted list of the options along with a short explanation:

The following attributes are available to customize the layout and spacing of the components contents:

• app:expandedMargin: The margin to apply to the content in expanded state. Defaults to 16dp.
• app:expandedMargin...: The margin to apply to the content ... when in expanded state, where ... is one of either Start, Top, End or Bottom.
• app:expandedGravity: The gravity to apply to the content when in expanded state. Must be one of either top, center_vertical or bottom. Defaults to center_vertical.
• app:spaceIconTitles: The space between the icon and the titles (title and subtitle). Defaults to 16dp.
• app:spaceTitleSubtitle: The space between the bottom of the title and the top of the subtitle. Defaults to 4dp.

The following attributes are available to customize the look and feel of the components contents (since these attributes are available for all types they are listed in a more declerative manner to keep everything organized.):

• app:flexibleTitleEnabled, app:flexibleSubtitleEnabled and app:flexibleIconEnabled: Whether or not the flexible title, subtitle or icon should be enabled. Defaults to true.
• app:title, app:subtitle and app:icon: The title text, subtitle text or icon to use.
• app:titleCollapsedTextAppearance, app:subtitleCollapsedTextAppearance and app:iconCollapsedSize: The appearance when in collapsed state. The text appearance customization can be done via a custom TextAppearance while the icon customization is limited to its size.
  Defaults to TextAppearance.Design.FlexibleToolbarLayout.CollapsedTitle (see here) for the title, TextAppearance.Design.FlexibleToolbarLayout.Subtitle (see here) for the subtitle and 40dp for the (square) icon.
• app:titleExpandedTextAppearance, app:subtitleExpandedTextAppearance and app:iconExpandedSize: The appearance when in expanded state. The text appearance customization can be done via a custom TextAppearance while the icon customization is limited to its size.
  Defaults to TextAppearance.Design.FlexibleToolbarLayout.ExpandedTitle (see here) for the title, TextAppearance.Design.FlexibleToolbarLayout.Subtitle (see here) for the subtitle and 56dp for the (square) icon.

The following attributes are available to customize the scrim colors of the component:

• app:contentScrimColor: The color used for scrimming the content itself.
• app:statusBarScrimColor: The color used for scrimming the statusbar. Defaults to ?attr/colorPrimaryDark.

2. Setup during runtime

Naturally you can change most of the appearance in code also. The following methods are probably the ones used the most often (since these methods are available for all types they are listed in a more declerative manner to keep everything organized. Please replace ... by either Title, Subtitle or Icon):

• set...(): Set the title, subtitle or icon to display.
• get... Get the title, subtitle or icon currently displayed.
• set...Enabled(boolean enabled) Enable the title, subtitle or icon.
• is...Enabled(): Check wether the title, subtitle or icon is enabled.

You can also collapse and expand the FlexibleToolbarLayout by calling the convenience methods which use the parent AppBarLayout to actually collapse or expand the layout:

• collapse() or collapse(boolean animate): Collapses the FlexibleToolbarLayout.
• expand() or expand(boolean animate): Expands the FlexibleToolbarLayout.

For the long and complete list of methods check out the Javadocs which will be coming soon or look at the FlexibleToolbarLayout.java source code.

3. Enjoy

Congrats! You've made it through the setup. If you have any issues, bugs or feature requests please open a new issue.