How to remove the shadow above the app bar?

Question

I'd like to make the status bar transparent by adding <item name="android:statusBarColor">@android:color/transparent</item> to v21/styles.xml on style name="AppTheme.NoActionBar" but I keep getting a shadow above the app bar, is it possible to remove it?

EDIT: Ok I think the solution is to move the app bar occupying the status bar space and extending the app bar of an additional dp to match it size so my question is, is it possible to move or extend the app bar height upwards?

activity_search.xml

<android.support.design.widget.AppBarLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:theme="@style/MyMaterialTheme.AppBarOverlay">

     <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="?attr/colorPrimary"
          app:popupTheme="@style/MyMaterialTheme.PopupOverlay"/>

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

<include layout="@layout/content_search"/>

@Bhargav above the app bar, which is visible on the status bar. — brettbrdls, Feb 29 '16 at 15:15
Yes that is your colorPrimaryDark attribute, but if you were to draw a navigation drawer under it, it would should the status bar as transparent — Bhargav, Feb 29 '16 at 15:16
@Bhargav yup, the reason why I wanted to add @android:color/transparent is because I'll implement a nav drawer next. — brettbrdls, Feb 29 '16 at 15:22
yes when the nav drawer goes under it, you will notice that status bar is still transparent, so don't worry about this and just continue coding — Bhargav, Feb 29 '16 at 15:24
@Bhargav but I feel like having a shadow above the app bar isn't visually correct :/ — brettbrdls, Feb 29 '16 at 15:26
I think that shadow is not the shadow of the app bar but of the status bar, even if you were to make elevation 0dp to the appbar there would still be that shadow there is my guess — Bhargav, Feb 29 '16 at 15:30
@Bhargav I believe it is the shadow of the app bar and I just tried to make its elevation=0dp, all of its shadow are gone but I'm thinking if it's possible to only remove the above part of its shadow and not the below one — brettbrdls, Feb 29 '16 at 15:33
Did you try to remove the _app:popupTheme="@style/MyMaterialTheme.PopupOverlay"_ ? Maybe the problem is coming from the style. — JJ86, Mar 09 '16 at 10:46
@JJ86 nope, I believe it's not coming from the style as this happens everytime I start a new default project in Android Studio. — brettbrdls, Mar 09 '16 at 13:44
@brettbrdls if you say so; can you show us your _MyMaterialTheme_ theme xml as well? — JJ86, Mar 09 '16 at 13:48
The shadow is coming from the AppBarLayout , specifically from the `app:elevation` attribute. It can be set to 0, but this obviously removes the bottom shadow too. — natario, Mar 10 '16 at 20:55

score 15 · Accepted Answer · edited May 23 '17 at 10:30

15

I believe this question is pointing to same problem Android appbarlayout elevation appears in status bar

Possible solutions:

Your root layout should have android:fitsSystemWindows="true" at all times, otherwise your UI will not draw behind status bar.

Now wrap the AppBarLayout inside another CoordinatorLayout which has

android:fitsSystemWindows="false".

This will prevent the shadow from overflowing into statusbar.

edited May 23 '17 at 10:30

Community

1
1

answered Mar 09 '16 at 10:38

Karol Żygłowicz

2,442
2
26
35

@brettbrdls, I don't think this solution works now in AppCompat v24.0.0 – Vipul Asri Jun 20 '16 at 09:15
What if my root layout is the CoordinatorLayout? I tried wrapping it in another layout but in that case the status bar is white while it should be red (colorPrimaryDark) – Chapz Sep 20 '16 at 12:45
Does not matter what your root layout is. Wrap your AppBarLayout in a CoordinatorLayout and set android:fitsSystemWindows="false". CoordinatorLayout is designed to have special interaction with appcompat elements, so it automagically takes care of many things – anandbibek Sep 23 '16 at 04:45
2

Problem is, wrapping your AppBarLayout in another CoordinatorLayout breaks ScrollingViewBehavior, so a RecyclerView now covers the appbar and everything. In my particular case, I'm trying to get a recyclerview to go behind a translucent navigation bar without the status bar looking like crap, without the status bar going over the top of the navigation drawer, etc. So far everything I've tried breaks at least one of those. – Jim Pekarek Mar 23 '17 at 23:37

score 5 · Answer 2 · answered Feb 29 '16 at 15:14

5

Add elevation 0dp to AppBarLayout

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">

answered Feb 29 '16 at 15:14

Malek Hijazi

4,112
1
26
31

6

But is it possible to only remove the shadow above the app bar and not the below part? – brettbrdls Feb 29 '16 at 15:19

Bharath Kumar · Answer 3 · 2016-03-15T09:57:27.867

Call below method in the onCreate of your activity with the desired status bar color.

public void changeStatusBarColor(String hexColor)
  {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        Window window = getWindow();
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.setStatusBarColor(Color.parseColor("#AD2525"));
    }
 }

XML

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.bharath.myapplication.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#AD2525"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <!--
    Other views
    -->

</RelativeLayout></android.support.design.widget.CoordinatorLayout>

Result

Only answer that works. Other suggesting app:elevation="0dp" defeats the object. Thanks — Tony, Feb 21 '17 at 19:58

score 0 · Answer 4 · answered Aug 26 '20 at 10:03

<com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp"
            android:theme="@style/AppTheme.AppBarOverlay">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimaryDark"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                 />

 </com.google.android.material.appbar.AppBarLayout>

score 0 · Answer 5 · answered Aug 04 '21 at 16:03

You could also add padding on app bar based on status bar height:

ViewCompat.setOnApplyWindowInsetsListener(binding.root) { _, insets ->
        val statusBarInsets = insets.getInsets(WindowInsetsCompat.Type.statusBars())
        val bottomBarInsets = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
        binding.appBarLayout.setPadding(0, statusBarInsets.top, 0, 0)
        binding.root.setPadding(0, 0, 0, bottomBarInsets.bottom)
        insets
    }

You can put this in your onCreateView() or onViewCreated() methods. Remember to remove android:fitsSystemWindows="true" from your layout, because you're manually setting the padding to the views, and the insets must remains like it's a full screen fragment.

score 0 · Answer 6 · edited Nov 23 '21 at 16:04

0

put this line in the oncreate() method of activity file of which activity you want to remove the elevation of the action bar

getSupportActionBar().setElevation(0);

edited Nov 23 '21 at 16:04

Suraj Rao

29,388
11
94
103

answered Nov 23 '21 at 15:54

Naveen Saini

21
2

How to remove the shadow above the app bar?

6 Answers6

Linked