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.

enter image description here

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

enter image description here

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>

I didn't show all the xml but you can find it here: https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/activity_detail.xml — Ultimo_m, May 29 '15 at 23:51
[CoordinatorLayout#setStatusBarBackgroundColor(int)](http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html#setStatusBarBackgroundColor(int)) — Eugen Pechanec, May 29 '15 at 23:54
I don't want to change status bar color, I want it to look like this: https://youtu.be/32i7ot0y78U?t=4m13s — Ultimo_m, May 30 '15 at 08:54
I see. `android:fitsSystemWindows="true"` on `AppBarLayout` because you want it behind status bar and `android:fitsSystemWindows="false"` on `Toolbar` because you don't. — Eugen Pechanec, May 30 '15 at 09:15
@EugenPechanec it doesn't work, i have tried that already, and i have also noticed that if you put the same exact layout inside of viewpager, the nestedScrollView will always has some sort of paddingTop unless if you touch it, then it will remove that, i tried requestLayout, buildLayer, invalidate and nothing worked. — Kosh, May 30 '15 at 19:35

score 18 · Accepted Answer · edited Mar 21 '16 at 08:45

18

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:

enter image description here

It will helps you.

Thanks :)

edited Mar 21 '16 at 08:45

SMR

6,628
2
35
56

answered Jul 18 '15 at 07:00

Pratik Butani

60,504
58
273
437

I haven't test it but that must be the solution :) – Ultimo_m Jul 18 '15 at 18:22
The android support design library version 22.2.1 did not solve the issue for me. I had troubles again on devices running Android 5.0. I had to update to 23.1.0. It works now – Sandra Feb 17 '16 at 14:40

score 8 · Answer 2 · answered Jun 01 '15 at 13:32

8

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

answered Jun 01 '15 at 13:32

Zokran

81
3

1

Lets hope they fix it quickly :) – Ultimo_m Jun 01 '15 at 19:06
@Ultimo_m Any Updates? – Pratik Butani Jul 17 '15 at 10:50
@PratikButani They have made an update according to this post https://plus.google.com/+AndroidDevelopers/posts/XTtNCPviwpj I havent checked yet if it fixes this problem – Ultimo_m Jul 17 '15 at 20:50

score 1 · Answer 3 · answered Jun 26 '15 at 00:53

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>

score 0 · Answer 4 · answered Jul 10 '15 at 09:25

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);}

Đorđe Trbović · Answer 5 · 2016-01-28T14:51:07.013

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

New Android Design Library bug with AppBarLayout and Toolbar

5 Answers5

Linked