How to draw over the status bar in navigation drawer window?

Question

I am working on a project and want a navigation drawer to display a some menu items. I want my navigation drawer to draw over the status bar and not under the status bar with a transparent status bar.

This is my main activity layout

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_home"
    app:itemTextAppearance="@style/AppTheme.TextItem"
    app:itemTextColor="#757575"
    app:menu="@menu/activity_home_drawer" />

This is my app_bar_home layout

<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=".HomeActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/container_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:expandedTitleMarginStart="32dp"
        app:collapsedTitleGravity="start"
        app:title="Home"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:theme="@style/AppTheme.NoActionBar">

    <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.CollapsingToolbarLayout>

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

This is my styles xml file

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="AppTheme.TextItem" >
    <item name="android:textColor">#000000</item>
    <item name="android:textSize">16sp</item>
</style>

This is my styles-v21 xml file

<resources>
<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

I want to achieve [this][1]

But am able to get below this with the above code

After adding the code i got this

doesn't look like it's possible, unfortuntely: https://stackoverflow.com/questions/45995322/oreo-api-26-drawoverlay-draw-over-status-bar — Nerdy Bunz, Apr 06 '18 at 10:38
Looks like there's no straight forward way of doing it. But there might be any trick so that when the drawer is opened the status bar color became white up to the width of the drawer. — Ashutosh Patoa, Apr 06 '18 at 12:21

Abhi · Accepted Answer · 2018-04-06T15:43:47.157

2

To achieve completely transparent status bar and navigation bar for lollipop and above, set this flag on the window:

 if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
        Window w = getWindow(); // in Activity's onCreate() for instance
         w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }

edited Apr 06 '18 at 15:43

answered Apr 06 '18 at 10:51

Abhi

3,431
1
17
35

I don't need a complete transparent status bar i want my drawer layout (see ss) to overlap my status bar. But will try your solution soon – Ashutosh Patoa Apr 06 '18 at 12:24
You want the drawer layout to overlap the status bar, which is possible by a transparent status bar(see the output image in the edited answer). The status bar by default overlaps any UI element in the app. – Abhi Apr 06 '18 at 15:45
Great! Happy coding! – Abhi Apr 09 '18 at 11:10
Is your question regarding collapsingtoolbar related to your original question? If not, then post it as a new question. This is because it adds _noise_ to this question and might confuse users who refer this question in future. – Abhi Apr 09 '18 at 11:20
If you have to use adjustSize or adjustPan this solution does not work – AndroidRuntimeException May 04 '19 at 03:05
@AndroidRuntimeException Please explain the issue further. – Abhi May 05 '19 at 13:40
Add two input text with a button (like a login screen) inside a scroll view, open the keyboard you will notice the screen is locked. You are not able to scroll up when you set this flags. In my case I have to use FLAG_LAYOUT_FULLSCREEN – AndroidRuntimeException May 05 '19 at 18:16

How to draw over the status bar in navigation drawer window?

1 Answers1