Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 852
schott12521 Avatar asked Apr 05 '18 03:04

schott12521


2 Answers

Just set

android:stateListAnimator="@null"

or

app:elevation="0dp"

NOTE: you should use app: namespace NOT android:

to your AppBarLayout

like image 134
Vladislav Shcherbakov Avatar answered Sep 24 '22 02:09

Vladislav Shcherbakov


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"
like image 29
Vipul Asri Avatar answered Sep 25 '22 02:09

Vipul Asri