CODEWITHSUNDEEP
androidandroid-layout
schott12521
schott12521

Reputation: 241

Android Collapsing Toolbar remove elevation and shadow

I am trying to make a layout that has a gradient into the collapsing app bar which is a solid color. This should be accomplishable through app:elevation="0dp" but that has not worked. However, when I run 'Instant Run' on my app, instead of running a full build, I get the desired result. Let me include pictures:

Here is the current look: UI with the drop shadow, undesired result

enter image description here

Here is the desired look/what appears when I run instant run: UI without drop shadow, desired result

enter image description here

Here is my layout file:

<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:windowActionBar="false"
android:id="@+id/main_background">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme"
    android:elevation="0dp"
    app:elevation="0dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:toolbarId="@+id/toolbar"
        android:elevation="0dp"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

</recycler>

In case this is unclear, I am referring to the drop shadow underneath the app_bar that is labeled "Reee". In the first picture, there is a shadow, in the second picture there is not a shadow. I do not want to have the shadow. However, I can only achieve this look when I run instant run, then it goes away on next run / full compilation.

I'm still looking for a fix for this issues and am quite frustrated that I have not found anything yet. I have tried examples for setting stateListAnimator=@null to no avail.

Alright doing some further research, I have a SwipeRefreshLayout with a Recyclerview underneath this appbar. When I remove the RecyclerView, I get the intended affect. What could my RecyclerView be doing, and how can I fix it?

Upvotes: 12

Views: 7483

Answers (6)

Vladislav Shcherbakov
Vladislav Shcherbakov

Reputation: 796

Just set

android:stateListAnimator="@null"

or

app:elevation="0dp"

NOTE: you should use app: namespace NOT android:

to your AppBarLayout

Upvotes: 33

qianlv
qianlv

Reputation: 550

set your AppBarLayout`s elevation and translationZ to zero

appBarLayout.translationZ = 0f
appBarLayout.elevation = 0f

Upvotes: 0

schott12521
schott12521

Reputation: 241

I neglected to originally provide the RecyclerView that I have under my AppBar in the question, thinking that the problem was solely the AppBarLayout. But I have since fixed the issue. My RecyclerView looked like this: 

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="0dp"
    android:background="@drawable/gradient_blue_4"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/transactions"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:clipToPadding="false"
        android:fadeScrollbars="true"
        android:overScrollMode="always"
        android:paddingBottom="48dp"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="?selectableItemBackground" />

</android.support.v4.widget.SwipeRefreshLayout>

Underneath my AppBarLayout. Not exactly sure why this fixes the issue, but removing ?selectableItemBackground as the background for the RecyclerView fixes the issue and leaves me with the desired result.

Thanks to all provided answers, I was originally much more intrigued because I was getting my desired result by running instant run. Unfortunately, this insight provided no additional help.

Upvotes: 1

Vipul Asri
Vipul Asri

Reputation: 9223

You can do this by setting a custom stateListAnimator:

create a new animator "appbar_not_elevated.xml" in animator under res. 

<item app:state_collapsible="true" app:state_collapsed="true">
    <objectAnimator android:propertyName="elevation"
                    android:valueTo="0"
                    android:valueType="floatType"
                    android:duration="1"/>
</item>

<item>
    <objectAnimator android:propertyName="elevation"
                    android:valueTo="0"
                    android:valueType="floatType"
                    android:duration="1"/>
</item>

This will set the elevation of collapsed as well as expanded state elevation to zero.

Then set the stateListAnimator to AppBarLayout:

android:stateListAnimator="@animator/appbar_not_elevated"

Upvotes: 10

Alessio
Alessio

Reputation: 3173

Depending on the support library used, if you read the source code to set app bar elevation, you'll read:

/**
 * @deprecated target elevation is now deprecated. AppBarLayout's elevation is now
 * controlled via a {@link android.animation.StateListAnimator}. If a target
 * elevation is set, either by this method or the {@code app:elevation} attribute,
 * a new state list animator is created which uses the given {@code elevation} value.
 *
 * @attr ref android.support.design.R.styleable#AppBarLayout_elevation
 */

which tells you, either you use app:elevation or a state list animator. For the second option, add an xml selector into the folder animator-v21, and then set it to something like this:

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

then refer it from your app bar in xml:

android:stateListAnimator="@animator/my_appbar_state_list_animator"

Upvotes: 3

Harsh Jha
Harsh Jha

Reputation: 1

In your java file ..

Set A Variable for your app bar and pass in the set id using findViewById(R.id.whatever)

and then use

void setShadowEnabled (boolean enabled)

to disable the shadow.

Hope this helps...

Upvotes: -3

Related Questions