7

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

enter image description here

14
  • above or below? if above then its your colorPrimaryDark
    – Bhargav
    Feb 29, 2016 at 15:14
  • @Bhargav above the app bar, which is visible on the status bar.
    – brettbrdls
    Feb 29, 2016 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, 2016 at 15:16
  • @Bhargav yup, the reason why I wanted to add <item name="android:statusBarColor">@android:color/transparent</item> is because I'll implement a nav drawer next.
    – brettbrdls
    Feb 29, 2016 at 15:22
  • 1
    post code of that layout here please
    – Bhargav
    Feb 29, 2016 at 15:35

6 Answers 6

15
+50

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.

4
  • @brettbrdls, I don't think this solution works now in AppCompat v24.0.0
    – Vipul Asri
    Jun 20, 2016 at 9: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, 2016 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, 2016 at 4: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. Mar 23, 2017 at 23:37
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">
1
  • 6
    But is it possible to only remove the shadow above the app bar and not the below part?
    – brettbrdls
    Feb 29, 2016 at 15:19
5

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

1
  • 1
    Only answer that works. Other suggesting app:elevation="0dp" defeats the object. Thanks
    – Tony
    Feb 21, 2017 at 19:58
0
<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>
0

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.