Shadow

Question

Having tried the new Android design library, I found an error with a toolbar shadow. When using CollapsingToolbarLayout, the shadow under the toolbar only appears when the toolbar has crashed. When we expand it, the shadow disappears. My layout looks like

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" 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="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="@dimen/user_avatar_height" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:gravity="center_vertical" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" app:tabGravity="fill" app:tabIndicatorColor="@android:color/white" app:tabMaxWidth="0dp" app:tabMode="fixed" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

And the results When the toolbar crashes, a shadow appears.

But with the expansion, the shadows disappear.

Are there any solutions to solve this problem? Maybe there is a way to cope with the appearance / disappearance of the shadow? Thanks.

Answer 1

Update

It seems that the library support team from Google presented the behavior as part of 24.0.0, but that seemed like an error, so now there is a new workaround that you need to make.

1 - Create appbar_always_elevated.xml in the animator-v21 folder in the res directory.

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <objectAnimator android:propertyName="elevation" android:valueTo="8dp" android:valueType="floatType" android:duration="1"/> </item> </selector> 

2 - In the AppBarLayout application, use:

 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="300dp" android:fitsSystemWindows="true" android:stateListAnimator="@animator/appbar_always_elevated" android:theme="@style/AppTheme.AppBarOverlay"> </android.support.design.widget.AppBarLayout> 

---

Old answer

They fixed this as part of the new version of the support library (24), so you just need to update and use the correct property.

watch https://youtu.be/w45y_w4skKs?t=31m52s

---

Old answer

I solved this problem by having FrameLayout around the ViewPager and setting android:foreground .

Attached is the drawable that I use, and here is the link to gist

Answer 2

@ Amilcar-andrade's answer helped me find the right solution, as its link is incorrect.

You must apply stateListAnimator to your AppBarLayout:

Example:

 <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="320dp" android:stateListAnimator="@animator/appbar_always_elevated" android:fitsSystemWindows="true"> 

and use this xml as an animator:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <objectAnimator android:propertyName="elevation" android:valueTo="8dp" android:valueType="floatType" android:duration="1"/> </item> </selector> 

Answer 3

I just override the CollapsingToolbarLayout code like this

 public class ShadowCollapsingToolbarLayout extends CollapsingToolbarLayout { private AppBarLayout.OnOffsetChangedListener mOnOffsetChangedListener; //constructors @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); ViewParent parent = this.getParent(); if (parent instanceof AppBarLayout) { if (mOnOffsetChangedListener != null) ((AppBarLayout) parent).addOnOffsetChangedListener(mOnOffsetChangedListener); } } public void setOnOffsetChangeListener(AppBarLayout.OnOffsetChangedListener listener) { mOnOffsetChangedListener = listener; } } 

use it in xml instead of your own CollapsingToolbarLayout and set the listener this way

 mCollapsingLayout.setOnOffsetChangeListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int i) { ViewCompat.setElevation(appBarLayout, appBarLayout.getTargetElevation()); } }); 

Answer 4

In my case, this code worked for me!

 <android.support.design.widget.AppBarLayout android:id="@+id/appbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:stateListAnimator="@null" android:elevation="4dp">