Toolbar with a wrong height and shadow

Question

I am trying to add shadow to a toolbar using elevation and the Design Library. The layout code is something like:

<android.support.design.widget.CoordinatorLayout ... >
  <android.support.design.widget.AppBarLayout ... >
    <android.support.design.widget.CollapsingToolbarLayout ... >
       <android.support.v7.widget.Toolbar
           android:id="@+id/app_bar"
           android:layout_width="match_parent"
           android:layout_height="?actionBarSize"
           app:contentInsetStart="16dp"
           android:background="@color/colorPrimary"
           android:elevation="16dp"
        />
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>

The complete application source code it is available on github.

The problem is that the toolbar height or the shadow are not behaving as I expect. If you watch the screen capture below, you can notice the problem.

What I need to do is to display the shadow below of the blue area.

Any hint is very appreciated.

The drop shadow may be coming from your elevation. Beyond that, I have never used `CollapsingToolbarLayout`, nor `AppBarLayout`, and so I do not even really know what you mean about your height not working as expected. — CommonsWare, Jan 26 '16 at 09:13

score 6 · Accepted Answer · edited May 23 '17 at 11:51

As mentioned there, it's by implementation of CollapsingToolbarLayout - elevation is removed if CollapsingToolbarLayout shows non-pinned elements:

if (Math.abs(verticalOffset) == scrollRange) {
  // If we have some pinned children, and we're offset to only show those views,
  // we want to be elevate
  ViewCompat.setElevation(layout, layout.getTargetElevation());
} else {
  // Otherwise, we're inline with the content
  ViewCompat.setElevation(layout, 0f);
}

So, all I can suggest is to make your own CollapsingToolbarLayout by copying original CollapsingToolbarLayout from Google, and make changes in this condition.

score 4 · Answer 2 · answered Jan 24 '16 at 00:00

Move the elevation to the AppBarLayout. CollapsingToolbarLayout changes in size, so setting it on the AppBarLayout creates the shadow at the right position.

<android.support.design.widget.CoordinatorLayout ... >
<android.support.design.widget.AppBarLayout
      android:elevation="16dp">
  <android.support.design.widget.CollapsingToolbarLayout ... >
     <android.support.v7.widget.Toolbar ... />
  </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Thank you very much for your prompt answer. I already tried that, so adding the background color to the AppBarLayout and it doesn't work. — RobertoAllende, Jan 24 '16 at 00:03

Toolbar with a wrong height and shadow

2 Answers2