CollapsingToolbarLayout without shadow in expanded state

Question

CollapsingToolbarLayout from appcompat shows shadow in collapsed state, but when expanded (or expanding in process) shadow dissapear

My example code https://github.com/NaikSoftware/CollapsingToolbarWithImageAndTabs/tree/master/app

Layout

<?xml version="1.0" encoding="utf-8"?>  <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="ua.naiksoftware.hidetabs.MainActivity">  <android.support.design.widget.AppBarLayout     android:id="@+id/appbar"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:theme="@style/AppTheme.AppBarOverlay">      <android.support.design.widget.CollapsingToolbarLayout         android:layout_width="match_parent"         android:layout_height="@dimen/toolbar_plus_tabs"         app:contentScrim="@android:color/transparent"         app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|enterAlways"         app:titleEnabled="false"         app:toolbarId="@+id/toolbar_wrapper">          <ImageView             android:id="@+id/appbar_background"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:scaleType="centerCrop"             android:src="@drawable/header_back"             app:layout_collapseMode="parallax"/>          <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_gravity="top"             android:background="@android:color/transparent"             app:popupTheme="@style/AppTheme.PopupOverlay" />          <android.support.v7.widget.Toolbar             android:id="@+id/toolbar_wrapper"             android:layout_width="match_parent"             android:layout_gravity="bottom"             android:background="@android:color/transparent"             android:layout_height="wrap_content"             android:minHeight="@dimen/tab_layout_height">              <android.support.design.widget.TabLayout                 android:id="@+id/tabs"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:background="@android:color/transparent"                 app:tabGravity="fill"                 app:tabIndicatorColor="@android:color/white"                 app:tabMode="scrollable"                 app:tabSelectedTextColor="@android:color/white" />         </android.support.v7.widget.Toolbar>      </android.support.design.widget.CollapsingToolbarLayout>  </android.support.design.widget.AppBarLayout>  <android.support.v4.view.ViewPager     android:id="@+id/container"     android:layout_width="match_parent"     android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior" />  <android.support.design.widget.FloatingActionButton     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:src="@drawable/ic_add_black_24dp"     android:layout_margin="@dimen/fab_margin"     android:tint="@android:color/white"     android:layout_gravity="bottom|end"     app:elevation="@dimen/fab_elevation"     app:layout_behavior="ua.naiksoftware.hidetabs.FabSlidingBehavior"/> 

Collapsed

Expanded

Answer 1

I had the same issue and found a solution:

First you have to update to the latest Support Library (I use 24.1.0)

Then apply the 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="@drawable/appbar_always_elevated"     android:fitsSystemWindows="true"> 

and use this xml as 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 2

You can find official stateListAnimator for AppBarLayout here

1. Put this appbar_elevation.xml into resources directory named animator-v21

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:tools="http://schemas.android.com/tools"     xmlns:android="http://schemas.android.com/apk/res/android"     tools:ignore="PrivateResource">     <item>         <objectAnimator             android:propertyName="elevation"             android:valueTo="@dimen/design_appbar_elevation"             android:valueType="floatType" />     </item> </selector> 

2. On AppBarLayout set android:stateListAnimator="@animator/appbar_elevation"