Collapsing Toolbar Layout and Constraint Layout

Question

I am struggling to create collapsing image header alongside Constraint where my design looks like this

Currently the profile pic is a part of the ConstraintLayout because it needs Guideline constraints and unfortunately it is overlapped by the AppBarLayout

Any ideas how to achieve that? Can't find any source regarding my combination of layouts.....

<?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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/playerViewBg"
        android:fitsSystemWindows="false">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/bgIV"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/header_bg" />

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

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

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

        <ImageView
            android:id="@+id/playerIV"
            android:layout_width="177dp"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="62dp"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/profilePic"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline"
            app:layout_constraintTop_toTopOf="parent" />

        <!-- Other content -->

        <android.support.constraint.Guideline
            android:id="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.27" />

          <android.support.constraint.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.73" />

    </android.support.constraint.ConstraintLayout>

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

Answer 1

Following is the snippet of my working layout:

Please make sure that you haven't make any childview height to match parent(0 dp) inside constrianlayout also for scroll view android:fillViewport="true". Ask me if any doubt Occur.

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:fitsSystemWindows="false">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/ivImagec"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/_90sdp"
                android:contentDescription="@string/no_des"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/outdoorgames" />


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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/_90sdp"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/cvLayout"
            android:animateLayoutChanges="true">
                 ....
        </android.support.constraint.ConstraintLayout>

Answer 2

I've actually recently started thinking about this

And based on this talk here from two of the devs behind Android Studio : https://www.youtube.com/watch?v=8lAXJ5NFXTM (at the 21 mins: 28 seconds mark)

It is definitely possible, they recommend replacing the CollapsingToolbarLayout completely with the ConstraintLayout.