New Android Design Library bug with AppBarLayout and Toolbar

Question

I am using the new Android Design Library based on this example chrisbanes/cheesesquare in github and here

I have run the example and I am having problems with Toolbar inside CheeseDetailActivity. The toolbar isnt shown as it should. Have a look at the images below:

At first image you can see the toolbar isn't shown correctly.

At the second image you can see that the toolbar is shown correctly but the notification bar is white. This happens because I removed from actiivty_detail.xml android:fitsSystemWindows="true" from android.support.design.widget.CoordinatorLayout

I think that fitsSystemWindows should be true and the problem is related with android.support.design.widget.AppBarLayout but I don't have any idea how I can fix this problem. I tried with marginTop with the same height as notificationBar but it didn't work.

Any suggestion is appreciated :)

This is a part of the activity_detail.xml:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

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

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

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

Answer 1

Change your Design Library with New Version build.gradle file in app folder like:

compile 'com.android.support:design:22.2.1'

As Updated in +AndroidDevelopers

I got output like:

It will helps you.

Thanks :)

Answer 2

Looks like this is a bug in com.android.support:design:22.2.0. It will be fixed, it's marked as future release. So lets hope it will be soon. Links with issues: https://code.google.com/p/android/issues/detail?id=175240 and https://code.google.com/p/android/issues/detail?id=175069

Answer 3

had the same problem put in style with windowActionBar and windowNoTitle and decided my problem.

<style name="AppTheme.base" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
       <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

Answer 4

Here is some working workaround for API 21:

 if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
    marginResult = 0;
    int resourceId = getResources().getIdentifier(getString(R.string.identifier_status_bar_height), getString(R.string.identifier_dimen), getString(R.string.identifier_android));    
    if (resourceId > 0) {
        marginResult = getResources().getDimensionPixelSize(resourceId)*2;
     }
    CollapsingToolbarLayout.LayoutParams params = (CollapsingToolbarLayout.LayoutParams) mToolbar.getLayoutParams();
    params.topMargin -= marginResult;
    mToolbar.setLayoutParams(params);}

Answer 5

I had same problem, my toolbar was displaying wrong on API level greater than 21. I was using android.support.v7.widget.Toolbar as supportActionBar() and below content is in fragment, see pictures: on aplication start, toolbar is displaying wrong and when i colapse android.support.design.widget.CollapsingToolbarLayout, the picture is not hidden completely

I resolved this when i added android:fitsSystemWindows="true" attribute to the root element of view where Toolbar is located.

Now: toolbar is displaying normal and picture is hidden completely