AppBarLayout elevation change is delayed on appCompat v24.0.0

Question

In Appcompat v24.0.0 causes rendering of shadow/elevation to AppbarLayout after Activity is visible. And a lag can easily be seen in shadow drawing to AppbarLayout.

And this lag was not there in previous Appcompat library version.

Tested using both Appcompat v24.0.0 and Appcompat v23.4.0, shadow drawing clearly seen in the new version.

Lalo

And what is your question for the StackOverflow community? Maybe you should file a bug report for the appcompat team. – Quiles

Answer 1

This is a bug in Appcompat v24.0.0.

References: https://code.google.com/p/android/issues/detail?id=213895

In order to minimize the delay in elevation drawing, set the duration to 1ms in your own StateListAnimator and apply it to AppbarLayout.

appbar_always_elevated.xml in animator-v21 folder under 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>

In AppbarLayout :

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

Lalo

@JoaoSousa answer updated with your suggestion. I too got the same error while placing state list animator, so I placed in "animator-v21" and that worked like a charm removing that error. – Lalo

@Vipul Asri So if the correct folder to place the state list animator is "anim-v21" why is it showing an error? where should I put it? – Archy

@ItielMaimon If its showing error it will still work fine during runtime. But if you want to remove this error just refactor your anim-v21 to animator-v21. As selector tag is not recognizable in anim-v21 as of now. – Lalo

I removed my previous comment because it was plain wrong. After reading through the officials docs I stand corrected. The correct folder name should be animator-v21. – Stiletto

Answer 2

Chris Banes said here:

The StateListAnimator owns all elevation handling now. If you want to do it yourself, set a null StateListAnimator and call setElevation() as you please.

So if your AppBarLayout is not collapsible you can use this:

<android.support.design.widget.AppBarLayout
    android:stateListAnimator="@null"
    android:elevation="@dimen/design_appbar_elevation">

Boleyn

This should be the accepted answer. It makes design 24.0.0 behave like its older version. – Spermatozoid

@MarcelWesołowski Only if you don't use CollapsibleToolbarLayout. – Boleyn

@EugenPechanec I'm using CollapsibleToolbarLayout and it works fine. This should be accepted answer. – Kendy

@Sandak The AppBarLayout should not have a shadow when it's expanded. Enforcing a shadow (what this post suggests) may be fine for you but it overrides intended and expected behavior. – Boleyn

Answer 3

I guess it is not a bug, a feature.

AppBarLayout's elevation animation duration is controlled by R.integer.app_bar_elevation_anim_duration which by default is 150.

To remove the animation, just do the following and that's it:

<integer name="app_bar_elevation_anim_duration" tools:override="true">0</integer>

Reactor

Agree, if it is a bug, they should fixed this when newer version of appcompat lib release, I am using 25.1.1 and still have the slow issue. lol – Lodhia

This definitely should be accepted as a right answer – Bodrogi

Answer 4

@Vipul Asri given us a good answer, but the appbar_always_elevated.xml should be into animator-v11 instead of animator-v21 folder. The layout that has the AppbarLayout is that should be into a v21 folder.

Summarising, the structure is like this:

-res
   -animator-v11
      -appbar_always_elevated.xml
   -layout
      -a_layout_wich_has_the_appbarlayout.xml
   -layout-v21
      -a_layout_wich_has_the_appbarlayout.xml

Note that there are two a_layout_wich_has_the_appbarlayout.xml files (AppbarLayout in v21 folder with android:stateListAnimator property and in a non v21 folder without this property).

Take a look:

In a non v21 layout folder:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

And, in v21 layout folder:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stateListAnimator="@animator/appbar_always_elevated">

EDIT

Curiously, if you are using the AppbarLayout with a TabLayout, the shadow is drawn instantly, but notice that if you are using with the android:stateListAnimator property this case, the shadow view is a bit different.

Brusquerie