Toolbar overlapping below status bar

Question

I want to have appcompat v21 toolbar in my activity. But the toolbar I'm implementing is overlapping below status bar. How can I fix it?

Here is the activity layout xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

Toolbar view:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

Theme style:

<style name="AppTheme" parent="MaterialNavigationDrawerTheme.Light.DarkActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
</style>

Ghiselin

How did you customize your Theme of your applicaiton? post them. – Superficial

in CoordinatorLayout you can try this: https://mcmap.net/q/137223/-translucent-transparent-status-bar-coordinatorlayout-toolbar-fragment – Shumaker

for those who are facing the issue with androidx.coordinatorlayout.widget.CoordinatorLayout as root view should set android:fitsSystemWindows="false" .this worked for me... as suggested by one of SO user below.. – Hohenzollern

Answer 1

Use android:fitsSystemWindows="true" in the root view of your layout (LinearLayout in your case).

Brancusi

Thanks. This works. But I was wondering if there is a way to do this globally? – Ghiselin

@AimanB you can set it globally by setting in the theme as <item name="android:fitsSystemWindows">true</item> – Homocyclic

@Homocyclic this has a side-effect as reported in this comment – Mandrel

By default, your application should respect the system windows. You might open your activity with some flags perhaps ? – Madian

This issue will come even after we added android:fitsSystemWindows="true" to root layout, If your style contains <item name="android:statusBarColor">@android:color/transparent</item> this. Just mentioned for those who are reading this question. – Leister

I'm having same issue and the android:fitsSystemWindows="true" not worked for me. Any one has solutions this please post. – Tented

@Tented using android:fitsSystemWindows="true" in those layouts where you are facing this issue should solve it just solve mine. – Bernardo

@MFaisalHyder I've navigation drawer and added to there and also in my header layout too.. still issue not solving. – Tented

@Tented add this property in only that layout in which toolbar is overlapping status bar and specific values-v1X folder like if you're testing on 5.0 then add this in styles of values-v1X accordingly <item name="android:statusBarColor">@color/ColorPrimaryToolBar</item> <item name="android:windowTranslucentStatus">true</item> – Bernardo

This answer fixed my problem. But now I find all android toasts with 0 padding! – Hardfavored

I can confirm that in activity_main.xml inside android.support.v4.widget.DrawerLayout you shoud write android:fitsSystemWindows="true". – Sverre

Not working in root layout but worked in app style. android:fitsSystemWindows="true" – Natalee

Not working at all. This is the worst nightmare ever. Cmon Android there's only two properties to handle: background color and height of the statusbar and navigation bar. Is that really that hard ? – Mama

This worked like a charm but I had to remove android:fitsSystemWindows in toolbar itself. – Abort

android:fitsSystemWindows="true" ignores padding in root layout so views inside it hit display edges. Margins in root are honoured but grey borders appear. It is material_grey_850 which I believe appears because of using Theme.AppCompat. Annoying things also happen in one app with the normally hidden navigation bar. In emulator when navigation bar pops up it squashes the single view I have with layout weight while in one hardware bottom of root layout rests where nav bar will appear, regardless if nav bar is hidden. Just testing in old app but interesting to see issues arise which need fixing. – Myke

Answer 2

Just set this to v21/styles.xml file

 <item name="android:windowDrawsSystemBarBackgrounds">true</item>
 <item name="android:statusBarColor">@color/colorPrimaryDark</item>

and be sure

 <item name="android:windowTranslucentStatus">false</item>

Tetrabranchiate

if you have something like app:layout_behavior="@string/appbar_scrolling_view_behavior" ,remove it! @TheHunter – Tetrabranchiate

set <item name="android:windowTranslucentStatus">false</item> – Tetrabranchiate

Answer 3

None of the answers worked for me, but this is what finally worked after I set:

android:fitsSystemWindows="false"

In parent activity layout file it's not suggested at many places but it's work for me and saves my day

Lattermost

This worked for me also when my root view in the layout was an androidx.coordinatorlayout.widget.CoordinatorLayout type. – Astto

Answer 4

For me, the problem was that I copied something from an example and used

<item name="android:windowTranslucentStatus">true</item>

just removing this fixed my problem.

Olszewski

Answer 5

None of the answers worked for me, but this is what finally worked after i set android:fitSystemWindows on the root view(I set these in styles v21):

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">false</item>

Make sure you don't have the following line as AS puts it by default:

<item name="android:statusBarColor">@android:color/transparent</item>

Riggins

Answer 6

I removed all lines mentioned below from /res/values-v21/styles.xml and now it is working fine.

 <item name="android:windowDrawsSystemBarBackgrounds">true</item>
 <item name="android:statusBarColor">@android:color/transparent</item>


 <item name="windowActionBar">false</item>
 <item name="android:windowDisablePreview">true</item>

 <item name="windowNoTitle">true</item>

 <item name="android:fitsSystemWindows">true</item>

Plenipotent

Answer 7

According google docs ,we should not use fitsSystemWindows attribute in app theme, it is intended to use in layout files. Using in themes can causes problem in toast messages .

Check Issue here & example of problem caused here

<item name="android:fitsSystemWindows">true</item>

Example of using correct way and which works fine with windowTranslucentStatus as well.

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"

android:layout_width="match_parent"
android:layout_height="match_parent"
> 


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

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    android:background="@color/white"
    android:animateLayoutChanges="true"
    app:headerLayout="@layout/navigation_drawer_header"
    app:menu="@menu/navigation_drawer_menu" />

</android.support.v4.widget.DrawerLayout>

Allimportant

Answer 8

Remove below lines from style or style(21)

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@color/colorPrimaryDark</item>
<item name="android:windowTranslucentStatus">false</item>

Scalpel

Answer 9

To prevent the Toolbar from overlapping the status bar, add these lines to your theme

<item name="android:fitsSystemWindows">true</item>
<item name="android:windowTranslucentStatus">true</item>

it worked for me

Wickman

Answer 10

There are so many reason to happen this.. firstly you must check your them how it was going on..

<style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowBackground">@android:color/white</item>
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="android:textColorHint">@color/secondary_text</item>
    </style>

if you use <item name="android:windowTranslucentStatus">true</item> this code in your theme it should be overlap your action bar. you can use it false for solving this problem.
<item name="android:windowTranslucentStatus">false</item>.

or if you want to keep it as true please use

<item name="android:fitsSystemWindows">true</item> as true. You have another option to use this. you can use android:fitsSystemWindows="true"

this inside the root view of particular xml file.

Debark