CoordinatorLayout children are not fullscreen

Question

I have an Activity which is displayed fullscreen. This works perfectly with many layouts I have tried, except for when the CoordinatorLayout is the root ViewGroup. The CoordinatorLayout itself has both width and height set to match_parent and it takes the whole screen as it should. But the child views that should have the same size as the CoordinatorLayout are laid as if the navigation bar was still visible.

Is there a way to make the child views resize with the CoordinatorLayout? Obviously fitSystemWindows does not change a thing as this is probably caused by the CoordinatorLayout implementation, other ViewGroups work well. I have tried to create custom Behavior class but I was not successful with that.

I use this code to make my Activity fullscreen:

@Override
protected void onResume() {
    super.onResume();
    int uiOptions = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
    getWindow().getDecorView().setSystemUiVisibility(uiOptions);
}

This is a simple layout used to generate the image:

<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:fitsSystemWindows="true"
    android:background="#F00">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:scaleType="centerCrop"
        android:src="@drawable/background_sky_light" />

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

Answer 1

You may try removing android:fitsSystemWindows="true" from ImageView, and change onResume() like this:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ....
    mRootView = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
    ....
}

public void hideBars() {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
    mRootView.setFitsSystemWindows(false);
}

The mRootView.setFitsSystemWindows(false); is important for fitting child views into full screen.

Without this call, the layout would appear as if the status bar and navigation bar still exists. As shown in the picture below:

Screenshot without setFitsSystemWindows(false)

And with this call:

Screenshot with setFitsSystemWindows(false)

The reason, I think, is that when fitsSystemWindows is true, the CoordinatorLayout will reserve space for status bar and navigation bar in order to work with other widgets which draw background of bars themselves. But when we hide the System UI bars, there is no need to reserve space, and thus we need to tell CoordinatorLayout to release the spaces for other child views.

Following is the layouts in the screenshot

Layout for the activity:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/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:background="@android:color/black"
    android:fitsSystemWindows="true"
    tools:context="org.hamster.carz.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>

    <include layout="@layout/frag_container"/>
    <!-- Just a empty FrameLayout -->

    <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_margin="@dimen/fab_margin"
        android:src="@mipmap/car_add" />

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

The fragment in the screenshots above:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="2dp"
            android:layout_weight="1"
            android:background="@drawable/controller_button"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:background="@drawable/controller_button"/>
    </LinearLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:layout_weight="1">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_disconnect"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="@dimen/fab_margin"
            android:src="@mipmap/ic_clear"
            app:backgroundTint="@color/colorAccentDark"/>
    </FrameLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="2dp"
            android:layout_weight="1"
            android:background="@drawable/controller_button"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:background="@drawable/controller_button"/>
    </LinearLayout>

</LinearLayout>

Hope this helps.

Answer 2

I had a similar issue and had to hack a bit of a solution. Instead of an ImageView, my CoordinatorLayout child view is for streaming a video. Since I am streaming a video during rotation, I need to to watch for configChanges and override onConfigurationChanged. This may not work for you if you do not want to override onConfigurationChanged, but it may work out. Like I said, it's a bit of a hack, but works for me.

I end up fully expanding the Toolbar, storing the offset, then hiding it (treating it as a standard view). Then when I rotate back, I am resizing it to whatever the offset was when the user rotated the device.

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {
        showToolbar();
        mViewPager.setVisibility(View.VISIBLE);

    } else if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
        hideToolbar();
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        mViewPager.setVisibility(View.GONE);
    }
}

public void hideToolbar()
{
    setCurrentOffset();
    expandToolbarToHeight(0);
    findViewById(R.id.toolbar).setVisibility(View.GONE);
}

public void showToolbar()
{
    expandToolbarToHeight(oldOffset);
    findViewById(R.id.toolbar).setVisibility(View.VISIBLE);
}

public void setCurrentOffset() {
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
    if (behavior != null) {
        oldOffset = behavior.getTopAndBottomOffset();
    }
}

public void expandToolbarToHeight(int height) {
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
    if (behavior != null) {
        behavior.setTopAndBottomOffset(height);
        behavior.onNestedPreScroll(mCoordinatorLayout, mAppBarLayout, null, 0, 1, new int[2]);
    }
}

Answer 3

change android:fitsSystemWindows to false if you are using coodinatorlayout android:fitsSystemWindows="false"