Nested co-ordinate layout and fitsSystemWindows overlaps status bar

Question

Following is xml for my Main activity

<?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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/bottom_nav_view_color"
        app:itemIconTint="@color/bottom_nav_view_icon_tint_selector"
        app:itemTextColor="@color/bottom_nav_view_text_color"
        app:menu="@menu/navigation" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        app:srcCompat="@drawable/ic_assist_icon" />
</android.support.design.widget.CoordinatorLayout>


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

Following is xml code for Home fragment

<?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:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="245dp"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/card_dark_text"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false">


        <ImageView
            android:id="@+id/imgAirportBg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/screen_bg"
            android:tint="#8a000000"
            android:visibility="visible"
            app:layout_collapseMode="parallax" />


        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:elevation="2dp"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:title="@string/empty"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
            app:layout_collapseMode="pin"
            app:logo="@drawable/toolbar_logo"
            app:navigationIcon="?attr/homeAsUpIndicator"
            app:theme="@style/TransperantToolbar" />

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


<android.support.v7.widget.RecyclerView
    android:id="@+id/home_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:descendantFocusability="beforeDescendants"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:layoutAnimation="@anim/layout_animation_recycler_slide_in"
    android:paddingBottom="?attr/actionBarSize"
    app:behavior_overlapTop="40dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Following is xml code for Detail fragment

<?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:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="245dp"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    app:layout_behavior="com.gmr.android.FixAppBarLayoutBehavior">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="@color/card_dark_text"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false">


        <ImageView
            android:id="@+id/imgStoreBg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/screen_bg"
            android:tint="#8a000000"
            android:visibility="visible"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:elevation="2dp"
            app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"
            app:layout_collapseMode="pin"
            app:navigationIcon="?attr/homeAsUpIndicator"
            app:theme="@style/TransperantToolbar" />

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


<android.support.v7.widget.RecyclerView
    android:id="@+id/home_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:descendantFocusability="beforeDescendants"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:layoutAnimation="@anim/layout_animation_recycler_slide_in"
    android:paddingBottom="?attr/actionBarSize"
    app:behavior_overlapTop="30dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Now when I am calling Detail Fragement from Home Fragment my toolbar overlaps with status bar. If I call Detail fragment from any other fragment it is looking fine. Also toolbar in Home fragment does not overlap with status bar although xml for Home fragment and Detail fragment is nearly the same.

Picture one shows when detail fragment is opened normally

Picture two when detail fragment is opened from home page

Latest update: This solution is helping me https://medium.com/google-developers/windows-insets-fragment-transitions-9024b239a436 but there are lots of changes involved any other short way to do it?

Modulation

Can you post screenshots of the behavior? – Runofthemill

added screenshot plz check – Modulation

Your activities should deal with the appbarlayout/coordinator layout. As for changing the toolbar from your fragment, you can simply do that by inflating a different menu.xml in onCreateOptionsMenu() and updating them in prepareOptionsMenu(). You have the same code in two different xmls which you can just put in your activity's xml. – Extraneous

I want to keep toolbar in fragment as every fragment in my app has different toolbar layout so keeping it in fragment – Modulation

You should include how you are opening your fragments. I would recommend you to add a fragment container inside your main_content layout and then load your fragments into that container using replace. Both of them should look the same if you are loading them into the same container. – Godhood

make fitWindowsSystem="false" for everything but AppBarLayout and Toolbar. \n Also, – Distraction

make layout_height="match_parent" for everything but AppBarLayout and Toobar where it is "wrap_content". this should work. – Distraction

Answer 1

The symptoms you mention are very similar to the ones, mentioned in this question. To recap from the answer that I have provided there, the issue is, that window insets are being dispatched the first time fragment is being shown, but they are not being next time you are making a fragment transaction.

You have to manually ask for the window insets to be dispatched in order to receive correct system bar paddings:

    private void replaceFragment() {
      getSupportFragmentManager().beginTransaction()
          .replace(R.id.content, new DetailFragment())
          // NOTE, we are performing `commitNow()` instead of ordinary `commit()`,
          // Because we want this commit to happen sychronously/immediately
          .commitNow();

      // Ask the framework to dispatch window insets once more to the root of your view hierarchy
      ViewCompat.requestApplyInsets(findViewById(R.id.root));
    }

Runofthemill

This solution is helping me medium.com/google-developers/… but there are lots of changes involved any other short way to do it? – Modulation

Answer 2

Design XML like this,

<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:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/home_bg"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@color/gray">

             <ImageView
                android:id="@+id/imgStoreBg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/screen_bg"
                android:tint="#8a000000"
                android:visibility="visible"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:background="@android:color/transparent"
                app:layout_collapseMode="pin"
                app:theme="@style/AppTheme"
                app:title="@string/app_name">

                <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="@dimen/_45sdp"
                    android:gravity="center"
                    android:singleLine="true"
                    android:textColor="@color/black"
                    android:textSize="14dp"/>

            </android.support.v7.widget.Toolbar>

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

    <android.support.v7.widget.RecyclerView
    android:id="@+id/home_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:descendantFocusability="beforeDescendants"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:layoutAnimation="@anim/layout_animation_recycler_slide_in"
    android:paddingBottom="?attr/actionBarSize"
    app:behavior_overlapTop="40dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

In your JAVA file,

onCreate :

Window window = getWindow();
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            }

Cecilececiley

Answer 3

I think you should add this in you detail fragment (just give it a try):

            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:title="@string/empty"

            app:logo="@drawable/customimage"

and make one image as transparent add it as customimage for detail, this would be probably a trick. Thank you.

Chibchan