user27799 user27799 - 3 months ago 36
Android Question

CollapsingToolbarLayout without shadow in expanded state

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
Collapsed state

Expanded
Expanded state

Answer

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>