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>

Aleurone

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>

Glacialist

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.

Barcroft

10x I will give it a look it sure looks promising :) Actually I've solved the issue moving the constraint to the collapse. – Aleurone

@JockyDoe can you explain little more ? – Damalas

@JockyDoe ya, In above-mentioned youtube talks, they didn't shared any sort of source code of demo examples explained in ppt/demo! (you can answer your own question :) ;) ) – Damalas

@Damalas well I didn't solved by what's in the youtube video but if you're that interested I might post what I came up with. Is your goal to shrink image with the collapse bar? – Aleurone

@JockyDoe Yes, with Title Subtitle (I have fully work old code but i want o try it in CL) P.S: I hate tech talks demos without a link to samples showed in the tech talks !! – Damalas

@Damalas ok I will make an example in the next days and will let you know when it's ready – Aleurone

@JockyDoe that will be great, also let me know if you find this is code anywhere (j.gifs.com/APrX7p.gif) – Damalas

Hey do you guys find any solution? – Raddi

@Raddi Yes from your repo :D Constraint-Layout-Animations, great work! – Damalas

For those of you interested in soruces & written explination of the above video: medium.com/google-developers/… – Merrile