Translucent Status bar makes the layout out of bounds(showing view behind)

Question

I want to achieve a translucent status bar, and I found this,

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

yes it made my status bar translucent when my collapsing toolbar/appbar is expanded

but the problem is the one of the views(imageView) became behind on one of the other views(seems like its parent layout went out of bounds, please see the attach image)

opaque status bar, please see the image at the bottom

before that I didnt have any issues at all like this

non-translucent status bar

this is my xml , i tried to remove as much as possible, please bear with me,

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light">

<android.support.design.widget.AppBarLayout
    android:id="@+id/mHomeAppBar"
    android:layout_width="match_parent"
    android:layout_height="430dp"
    android:background="@color/colorPrimaryDark"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main.collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
        app:title="">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:paddingTop="15dp"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/image_view_on_bottom"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:srcCompat="@drawable/ic_near_me_white_18dp"/>

        </android.support.constraint.ConstraintLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/mHomeToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:navigationIcon="?attr/homeAsUpIndicator"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/mHomeScrollView"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/mLayoutTabComponents"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:visibility="visible">

            <android.support.design.widget.TabLayout
                android:id="@+id/mHomeTabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="fixed" />

            <android.support.v4.view.ViewPager
                android:id="@+id/mHomeViewPager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"

                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </LinearLayout>


    </android.support.constraint.ConstraintLayout>

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

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

and this is the style

<style name = "AppThemeNoActionBar" parent = 
"Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimaryDark</item>
    <item name="android:subtitle">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:background">@null</item>
    <!-- Support library compatibility -->
    <item name="background">@null</item>
</style>

Im trying everything around, I tried to put app:layout_behavior="@string/appbar_scrolling_view_behavior" in every parent container and layout, and I tried to remove the TabLayout's tabGravity from fill to nothing, but still no luck :(, can anyone help me figure whats wrong, I know Im missing something on the style, but please put me in the right direction, again, I apologise if the xml code is a bit long, thanks in advance!

Update: I removed all the unnecessary view contents on the layout xml. anyone? :(

Answer 1

I manage to solve my problem by setting

fitSystemWindows 

to false

that resulted the status bar to remove the padding it generates, then I add a 25dp top padding on the next layout which is the AppBarLayout that contains all the child views, now it works perfectly as I wanted.

thanks to these posts, if everyone encounters the same, or related issue with translucent status bar, please have a look here

Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment

Using windowTranslucentStatus with CollapsingToolbarLayout