Search code examples
androidandroiddesignsupportandroid-collapsingtoolbarlayout

CollapsingToolbarLayout in API 21

If you take a look at the CheeseDetailActivity in the cheesesquare app, the CollapsingToolbarLayout seems to cause the Toolbar to be misaligned on API 21:

misaligned

This also causes the Toolbar to be obscured after scrolling down:

enter image description here

Presumably, it should look like this (API 18 screenshot):

enter image description here

Has anyone encountered this or know of a solution to get the toolbar to align correctly?

Solution

  • Since the v21 theme changes to include:

    <item name="android:windowDrawsSystemBarBackgrounds">true</item>

    The margin needs to be modified on the toolbar for v21 to account for the space that the system bar takes.

    dimens.xml

    <dimen name="action_bar_margin_top">0dp</dimen>

    dimens.xml (v21)

    <dimen name="action_bar_margin_top">-24dp</dimen>

    Add margin and fitsSystemWindows to the Toolbar.

    <android.support.v7.widget.Toolbar
    android:layout_marginTop="@dimen/action_bar_margin_top"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:fitsSystemWindows="true"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_collapseMode="pin" />