CODEWITHSUNDEEP
androidmaterial-designandroid-design-library
RobertoAllende
RobertoAllende

Reputation: 9548

Toolbar with a wrong height and shadow

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.

Current Toolbar

Any hint is very appreciated.

Upvotes: 9

Views: 1137

Answers (2)

romtsn
romtsn

Reputation: 12002

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.

Upvotes: 6

patloew
patloew

Reputation: 1090

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>

Upvotes: 4

Related Questions