title: Collapsing Toolbar Layout using ConstraintLayout
body: <p>I am trying to implement Collapsing Toolbar By Using ConstraintLayout. After Trying a lot, I couldn't able to get the desire effects.I have follow this link in youtube (<a href="https://www.youtube.com/watch?v=8lAXJ5NFXTM" rel="nofollow noreferrer">https://www.youtube.com/watch?v=8lAXJ5NFXTM</a> at the 21 min). My Source code is:-</p>
  
  <p>activity.main.xml:-</p>
  
  <pre><code>    &lt;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:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".activities.MainActivity"&gt;
  
      &lt;android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="@dimen/app_bar_height"
          android:theme="@style/AppTheme.AppBarOverlay"
          android:fitsSystemWindows="false"&gt;
  
          &lt;com.example.study.helpers.NoAnimCollapsibleConstraintLayout
              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/root"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:fitsSystemWindows="true"
              android:minHeight="40dp"
              app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"/&gt;
  
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
      &lt;include layout="@layout/content_main" /&gt;
  
      &lt;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="@drawable/ic_border_color_white_24dp"/&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>content_main.xml:-</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout 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"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      tools:context=".activities.MainActivity"
      tools:showIn="@layout/activity_main"&gt;
  
  
      &lt;TextView
          android:id="@+id/textView3"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginBottom="8dp"
          android:layout_marginEnd="8dp"
          android:layout_marginLeft="8dp"
          android:layout_marginRight="8dp"
          android:layout_marginStart="8dp"
          android:layout_marginTop="8dp"
          android:text="@string/some_long_text"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>NoAnimCollapsibleConstraintLayout.java:-</p>
  
  <pre><code>import android.content.Context;
  import android.support.constraint.ConstraintLayout;
  import android.support.constraint.ConstraintSet;
  import android.support.design.widget.AppBarLayout;
  import android.util.AttributeSet;
  import android.util.Log;
  import android.widget.Toast;
  import com.example.study.R;
  
  public class NoAnimCollapsibleConstraintLayout extends ConstraintLayout implements AppBarLayout.OnOffsetChangedListener {
  
      private static final String TAG = NoAnimCollapsibleConstraintLayout.class.getSimpleName();
      private float mTransitionThreshold = 0.35f;
      private int mLastPosition = 0;
      private boolean mToolbarOpen = true;
  
      private ConstraintSet mOpenToolbarSet = new ConstraintSet();
      private ConstraintSet mCloseToolbarSet = new ConstraintSet();
  
      public NoAnimCollapsibleConstraintLayout(Context context) { super(context, null); }
  
      public NoAnimCollapsibleConstraintLayout(Context context, AttributeSet attrs) { super(context, attrs, 0); }
  
      public NoAnimCollapsibleConstraintLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); }
  
      @Override
      protected void onAttachedToWindow() {
          super.onAttachedToWindow();
          if (getParent() instanceof AppBarLayout){
              Log.d(TAG, "Instance AppBarLayout");
              AppBarLayout appBarLayout = (AppBarLayout)getParent();
              appBarLayout.addOnOffsetChangedListener(this);
              mOpenToolbarSet.clone(getContext(), R.layout.open);
              mCloseToolbarSet.clone(getContext(), R.layout.close);
  
          }else {
              Log.d(TAG, "Instance if Not Parent");
          }
      }
  
      @Override
      public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
          Log.d(TAG, "onOffsetChanged");
          if (mLastPosition == verticalOffset){
              return;
          }
  
          mLastPosition = verticalOffset;
          Float progress =  ( Math.abs(verticalOffset / (float) (appBarLayout.getHeight()))) ;
  
          AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) getLayoutParams();
          params.topMargin = -verticalOffset;
          setLayoutParams(params);
  
          if ( mToolbarOpen &amp;&amp; progress &gt; mTransitionThreshold) {
              Log.d(TAG, "Apply close.xml");
              mCloseToolbarSet.applyTo(this);
              mToolbarOpen = false;
          }else if ( !mToolbarOpen &amp;&amp; progress &lt; mTransitionThreshold){
              Log.d(TAG, "Apply open.xml");
              mOpenToolbarSet.applyTo(this);
              mToolbarOpen = true;
  
          }
      }
  }
  </code></pre>
  
  <p>open.xml:-</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout
      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/open"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;ImageView
          android:id="@+id/imageView2"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginBottom="8dp"
          android:layout_marginEnd="8dp"
          android:layout_marginLeft="8dp"
          android:layout_marginRight="8dp"
          android:layout_marginStart="8dp"
          android:layout_marginTop="8dp"
          android:contentDescription="@string/app_name"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:srcCompat="@drawable/study" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>close.xml:-</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout
      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/close"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
  
      &lt;TextView
          android:id="@+id/textView4"
          android:layout_width="0dp"
          android:layout_height="30dp"
          android:layout_marginEnd="8dp"
          android:layout_marginLeft="8dp"
          android:layout_marginRight="8dp"
          android:layout_marginStart="8dp"
          android:layout_marginTop="8dp"
          android:text="@string/app_name"
          android:textColor="@android:color/white"
          android:textSize="@dimen/text_size_16"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>After Applying this code open.xml and close.xml design not shown when I am trying to collapse Toolbar. This is the screenshot which I am getting in output:-</p>
  
  <p>Without Collapse (open.xml design missing) :- 
  <a href="https://www.dropbox.com/s/c0rh126rinmopd4/Screen_Shot1.png?dl=0)" rel="nofollow noreferrer">https://www.dropbox.com/s/c0rh126rinmopd4/Screen_Shot1.png?dl=0)</a></p>
  
  <p>With Collpase (close.xml design missing):-
  <a href="https://www.dropbox.com/s/cdlbg84lmht3gv0/Screen_Shot2.png?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/cdlbg84lmht3gv0/Screen_Shot2.png?dl=0</a></p>