Skip to content

FlexibleToolbarLayout

Jump to bottom
TR4Android edited this page Dec 1, 2015 · 3 revisions

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:

  • Includes more than just a title! You can display a title, a subtitle and even an image and you can style them all 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:

  • Attributes that define the expanded layout:

    • app:expandedMargin: The margin to apply to the content in expanded state. Defaults to 16dp.
    • app:expandedMarginStart: The margin to apply to the content start when in expanded state.
    • app:expandedMarginTop: The margin to apply to the content top when in expanded state.
    • app:expandedMarginEnd: The margin to apply to the content end when in expanded state.
    • app:expandedMarginBottom: The margin to apply to the content bottom when in expanded state.
    • 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.

  • Attributes that define content spacing:

    • 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.

  • Attributes that determine the title's look and feel:

    • app:flexibleTitleEnabled: Whether or not the flexible title should be enabled. Defaults to true.
    • app:title: The title text to use.
    • app:titleCollapsedTextAppearance: The title's TextAppearance when in collapsed state. Defaults to TextAppearance.Design.FlexibleToolbarLayout.CollapsedTitle (see here).
    • app:titleExpandedTextAppearance: The title's TextAppearance when in expanded state. Defaults to TextAppearance.Design.FlexibleToolbarLayout.ExpandedTitle (see here).

  • Attributes that define the subtitle's look and feel:

    • app:flexibleSubtitleEnabled: Whether or not the flexible subtitle should be enabled. Defaults to true.
    • app:subtitle: The subtitle text to use.
    • app:subtitleCollapsedTextAppearance: The subtitle's TextAppearance when in collapsed state. Defaults to TextAppearance.Design.FlexibleToolbarLayout.Subtitle (see here).
    • app:subtitleExpandedTextAppearance: The subtitle's TextAppearance when in expanded state. Defaults to TextAppearance.Design.FlexibleToolbarLayout.Subtitle (see here).

  • Attributes that define the icon's look and feel:

    • app:flexibleIconEnabled: Whether or not the flexible icon should be enabled. Defaults to true.
    • app:icon: The icon to use.
    • app:iconCollapsedSize: The (square) size of the icon when in collapsed state. Defaults to 40dp.
    • app:iconExpandedSize: The (square) size of the icon when in expanded state. Defaults to 56dp.

  • Attributes that define the scrim colors:

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

2. Enjoy

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

Clone this wiki locally