remove shadow below AppBarLayout widget android
AndroidAndroid LayoutAndroid Problem Overview
When using AppBarLayout
widget in design support library, a shadow appears on the bottom of the toolbar. How can I remove that shadow?
Android Solutions
Solution 1 - Android
Simply use app:elevation="0dp"
inside "AppBarLayout" to remove the shadow. It has always worked for me. Hope it works for you.
Solution 2 - Android
this problem only occurs when api version >= 21, try below codes:
appBar.setOutlineProvider(null);
remember to check api version
EDIT :
Below is the source code of setOutlineProvider
.
/**
* Sets the {@link ViewOutlineProvider} of the view, which generates the Outline that defines
* the shape of the shadow it casts, and enables outline clipping.
* <p>
* The default ViewOutlineProvider, {@link ViewOutlineProvider#BACKGROUND}, queries the Outline
* from the View's background drawable, via {@link Drawable#getOutline(Outline)}. Changing the
* outline provider with this method allows this behavior to be overridden.
* <p>
* If the ViewOutlineProvider is null, if querying it for an outline returns false,
* or if the produced Outline is {@link Outline#isEmpty()}, shadows will not be cast.
* <p>
* Only outlines that return true from {@link Outline#canClip()} may be used for clipping.
*
* @see #setClipToOutline(boolean)
* @see #getClipToOutline()
* @see #getOutlineProvider()
*/
public void setOutlineProvider(ViewOutlineProvider provider) {
mOutlineProvider = provider;
invalidateOutline();
}
It is said that If the ViewOutlineProvider is null, if querying it for an outline returns false, or if the produced Outline is {@link Outline#isEmpty()}, shadows will not be cast.
So, if you want to remove shadow, you'd better use this method instead of setting app:elevation
. It seems like that changing the elevation to remove shadow is a kind of side effect. And changing the elevation may cause some other problems in some cases.
Solution 3 - Android
For all those who do not want to use bringToFront()
and elevation="0dp"
makes the toolbar disappear:
app:elevation="0dp"
combinded with android:translationZ="0.1dp"
worked for me.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:translationZ="0.1dp"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@null"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
Solution 4 - Android
With latest appcompat versions, the trick setting app:elevation="0.1dp"
in xml doesn't work any more.
So far I have found two solutions.
-
Instead of setting
app:elevation
, try to use a stateListAnimator. For example, in code:if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { StateListAnimator stateListAnimator = new StateListAnimator(); stateListAnimator.addState(new int[0], ObjectAnimator.ofFloat(appBarLayout, "elevation", 0.1f)); appBarLayout.setStateListAnimator(stateListAnimator); }
-
An easier way is you still set
app:elevation="0dp"
in xml as normal, but in code:appBarLayout.bringToFront();
Credit goes to these two discussions:
Solution 5 - Android
Use android:stateListAnimator="@null"
. No side effect.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:stateListAnimator="@null"
>
Solution 6 - Android
I tried app:elevation="0dp"
but the toolbar desappear, but using app:elevation="0.1dp"
made the trick.
Hope this helps somebody else.
Solution 7 - Android
Add app:elevation="0dp" on your AppBarLayout. like this example
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
Solution 8 - Android
Programmatically you can use this : getSupportActionBar().setElevation(0.0f);
Solution 9 - Android
This is the way that I came up with app:elevation="0dp"
to remove the shadow.Perfectly works.
Solution 10 - Android
I am doing this on Kotlin minSdkVersion 21 with AppBarLayout & TabLayout so: app:elevation="0dp"
does indeed help me solve the shadow problem BUT using this solution make it so that I will not be able to press the button on the TabLayout.
so combine app:elevation="0.1dp"
& app:elevation="0dp"
i can fix the shadow and still be able to interact with my tab layout.