ViewGroup inside CollapsingToolbarLayout show extra bottom padding when set fitsSystemWindows to be true

Question

I am building an application and there is a profile fragment which shows a profile background image and some other elements. Like the screenshot below:

My question is: why there is an extra bottom padding at the end of AppBarLayout?

Here is the xml layout file of this fragment(I basically copy from Cheesesquare):

<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.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        >

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

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

                <ImageView
                    android:id="@+id/profile_bg"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/height_profile_background_max"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    />

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@id/avatar"
                    android:layout_width="@dimen/avatar_size_large"
                    android:layout_height="@dimen/avatar_size_large"
                    android:layout_marginStart="@dimen/horizontal_padding_normal"
                    app:civ_border_width="2dp"
                    app:civ_border_color="@android:color/white"
                    app:civ_border_overlay="false"
                    app:layout_constraintTop_toBottomOf="@id/profile_bg"
                    app:layout_constraintBottom_toBottomOf="@id/profile_bg"
                    app:layout_constraintStart_toStartOf="parent"
                    />

                <TextView
                    android:id="@id/user_display_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingTop="@dimen/vertical_padding_small"
                    android:layout_marginStart="@dimen/horizontal_padding_normal"
                    android:textSize="@dimen/text_size_medium"
                    android:textStyle="bold"
                    android:textColor="@color/text_color_normal"
                    app:layout_constraintTop_toBottomOf="@id/avatar"
                    app:layout_constraintStart_toStartOf="parent"
                    />

                <TextView
                    android:id="@+id/description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingTop="@dimen/vertical_padding_small"
                    android:paddingBottom="@dimen/vertical_padding_normal"
                    android:layout_marginStart="@dimen/horizontal_padding_normal"
                    android:textSize="@dimen/text_size_small"
                    android:textColor="@color/text_color_normal"
                    android:maxLines="5"
                    app:layout_constraintTop_toBottomOf="@id/user_display_name"
                    app:layout_constraintStart_toStartOf="parent"
                    />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/vertical_divider_height"
                    android:background="@color/divider_background_color"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    />
            </android.support.constraint.ConstraintLayout>

            <android.support.v7.widget.Toolbar
                android:id="@id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_collapseMode="pin"
                />
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <android.support.v7.widget.RecyclerView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:scrollbarSize="2dp"
        android:scrollbarStyle="outsideOverlay"
        app:layoutManager="LinearLayoutManager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

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

As shown from above, I didn't add any padding to AppBarLayout.

I compare my layout to Cheesesquare and found that the only different is I put a complex ConstraintLayout inside the AppBarLayout. Cheesesquare is behaving normal because it set the layout_height of a certain value:

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

while I am setting my layout_height of AppBarLayout to wrap_content, because the self intro part in the header could be a lot of words and it should be wrap_content to ensure every sentence can show up in the screen.

I am wondering why this extra padding show up? And FYI, I found that the height of this extra padding seems to be the same as the height of statusBar. It looks like something related to the fitsSystemWindow attribute. It will be nice if someone could tell me how to remove this annoying bottom padding.

ps: I also try some other ViewGroup layout like LinearLayout or Framelayout for this area, and they are all the same, so I am pretty sure it has nothing to do with ConstraintLayout I use.

Answer 1

This is technically same as user3193413's answer above but with non-deprecated calls:

ViewCompat.setOnApplyWindowInsetsListener(app_bar_layout) { _, insets ->
    val topInset = insets.getInsets(WindowInsetsCompat.Type.systemBars()).top
    (toolbar as ViewGroup.MarginLayoutParams).topMargin = topInset
    WindowInsetsCompat.CONSUMED
        }

Answer 2

Based on @Akshay answer this is my solution:

In the xml file add android:fitsSystemWindows="true" to:

1. CoordinatorLayout
2. AppBarLayout
3. ImageView (or other view you want to see behind the status bar. In my case it was a ConstraintLayout)

In the Activity add @Akshay answer but edit it as follow (written in Kotlin):

 ViewCompat.setOnApplyWindowInsetsListener(appBarLayout) { _, insets ->
        // Instead of
        // toolbar.setPadding(0, insets.systemWindowInsetTop, 0, 0)
        (toolbar.layoutParams as ViewGroup.MarginLayoutParams).topMargin = insets.systemWindowInsetTop
        insets.consumeSystemWindowInsets()
    }

Now the toolbar will have the proper height as well.