title: How to mimic Google Maps' bottom-sheet 3 phases behavior?
body: <h2>Background</h2>
  <p>I'm assigned to make a UI that behaves similarly to how Google Maps shows a bottom-sheet for a found result.</p>
  <p>It has three different phases:</p>
  <ol>
  <li>Bottom content. The upper area is still touchable and won't scroll anything at the bottom</li>
  <li>Full-screen content, while the upper area has a large header.</li>
  <li>Full-screen content, while the upper area has just the toolbar.</li>
  </ol>
  <p>Here's what I'm talking about on Google Maps:</p>
  <p><a href="https://i.stack.imgur.com/3czMy.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3czMy.gif" alt="Enter image description here" /></a></p>
  <h2>The problem</h2>
  <p>Thing is, the bottom sheet isn't a part of the design library yet (though it was requested, <a href="https://code.google.com/p/android/issues/detail?id=179483" rel="nofollow noreferrer"><strong>here</strong></a>).</p>
  <p>Not only that, but the UI seems quite complex and needs handling of the toolbar on multiple phases.</p>
  <h2>What I've tried</h2>
  <p>I've found a good (enough) library for the bottom sheet (<a href="https://github.com/Flipboard/bottomsheet" rel="nofollow noreferrer"><strong>here</strong></a>), and added content to its fragment sample, to have about the same views as shown on material design samples (like <a href="https://github.com/chrisbanes/cheesesquare" rel="nofollow noreferrer"><strong>here</strong></a>), to have a CollapsingToolbarLayout that will take care of phases 2+3.</p>
  <p>In the app I'm making, I also have to move an icon as you scroll, but I think that if I succeed with the rest, this should be easy.
  Here's the code:</p>
  <p>###fragment_my.xml</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;android.support.design.widget.CoordinatorLayout
      android:id=&quot;@+id/main_content&quot;
      xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
      android:layout_width=&quot;match_parent&quot;
      android:layout_height=&quot;match_parent&quot;&gt;
  
      &lt;android.support.design.widget.AppBarLayout
          android:id=&quot;@+id/appbar&quot;
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;@dimen/detail_backdrop_height&quot;
  
          android:theme=&quot;@style/ThemeOverlay.AppCompat.Dark.ActionBar&quot;&gt;
  
          &lt;android.support.design.widget.CollapsingToolbarLayout
              android:id=&quot;@+id/collapsing_toolbar&quot;
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;match_parent&quot;
  
              app:contentScrim=&quot;?attr/colorPrimary&quot;
              app:expandedTitleMarginEnd=&quot;64dp&quot;
              app:expandedTitleMarginStart=&quot;48dp&quot;
              app:layout_scrollFlags=&quot;scroll|exitUntilCollapsed|snap&quot;&gt;
  
              &lt;ImageView
                  android:id=&quot;@+id/backdrop&quot;
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;match_parent&quot;
                  android:scaleType=&quot;centerCrop&quot;
                  app:layout_collapseMode=&quot;parallax&quot;/&gt;
  
              &lt;android.support.v7.widget.Toolbar
                  android:id=&quot;@+id/toolbar&quot;
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;?attr/actionBarSize&quot;
                  app:layout_collapseMode=&quot;pin&quot;
                  app:popupTheme=&quot;@style/ThemeOverlay.AppCompat.Light&quot;/&gt;
          &lt;/android.support.design.widget.CollapsingToolbarLayout&gt;
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
      &lt;android.support.v4.widget.NestedScrollView
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;match_parent&quot;
          app:layout_behavior=&quot;@string/appbar_scrolling_view_behavior&quot;&gt;
  
          &lt;LinearLayout
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;match_parent&quot;
              android:orientation=&quot;vertical&quot;
              android:paddingTop=&quot;24dp&quot;&gt;
  
              &lt;android.support.v7.widget.CardView
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;wrap_content&quot;
                  android:layout_margin=&quot;@dimen/card_margin&quot;&gt;
  
                  &lt;LinearLayout
                      style=&quot;@style/Widget.CardContent&quot;
                      android:layout_width=&quot;match_parent&quot;
                      android:layout_height=&quot;wrap_content&quot;&gt;
  
                      &lt;TextView
                          android:layout_width=&quot;match_parent&quot;
                          android:layout_height=&quot;wrap_content&quot;
                          android:text=&quot;Info&quot;
                          android:textAppearance=&quot;@style/TextAppearance.AppCompat.Title&quot;/&gt;
  
                      &lt;TextView
                          android:layout_width=&quot;match_parent&quot;
                          android:layout_height=&quot;wrap_content&quot;
                          android:text=&quot;@string/cheese_ipsum&quot;/&gt;
                  &lt;/LinearLayout&gt;
              &lt;/android.support.v7.widget.CardView&gt;
  
              &lt;android.support.v7.widget.CardView
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;wrap_content&quot;
                  android:layout_marginBottom=&quot;@dimen/card_margin&quot;
                  android:layout_marginLeft=&quot;@dimen/card_margin&quot;
                  android:layout_marginRight=&quot;@dimen/card_margin&quot;&gt;
  
                  &lt;LinearLayout
                      style=&quot;@style/Widget.CardContent&quot;
                      android:layout_width=&quot;match_parent&quot;
                      android:layout_height=&quot;wrap_content&quot;&gt;
  
                      &lt;TextView
                          android:layout_width=&quot;match_parent&quot;
                          android:layout_height=&quot;wrap_content&quot;
                          android:text=&quot;Friends&quot;
                          android:textAppearance=&quot;@style/TextAppearance.AppCompat.Title&quot;/&gt;
  
                      &lt;TextView
                          android:layout_width=&quot;match_parent&quot;
                          android:layout_height=&quot;wrap_content&quot;
                          android:text=&quot;@string/cheese_ipsum&quot;/&gt;
                  &lt;/LinearLayout&gt;
              &lt;/android.support.v7.widget.CardView&gt;
  
              &lt;android.support.v7.widget.CardView
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;wrap_content&quot;
                  android:layout_marginBottom=&quot;@dimen/card_margin&quot;
                  android:layout_marginLeft=&quot;@dimen/card_margin&quot;
                  android:layout_marginRight=&quot;@dimen/card_margin&quot;&gt;
  
                  &lt;LinearLayout
                      style=&quot;@style/Widget.CardContent&quot;
                      android:layout_width=&quot;match_parent&quot;
                      android:layout_height=&quot;wrap_content&quot;&gt;
  
                      &lt;TextView
                          android:layout_width=&quot;match_parent&quot;
                          android:layout_height=&quot;wrap_content&quot;
                          android:text=&quot;Related&quot;
                          android:textAppearance=&quot;@style/TextAppearance.AppCompat.Title&quot;/&gt;
  
                      &lt;TextView
                          android:layout_width=&quot;match_parent&quot;
                          android:layout_height=&quot;wrap_content&quot;
                          android:text=&quot;@string/cheese_ipsum&quot;/&gt;
                  &lt;/LinearLayout&gt;
              &lt;/android.support.v7.widget.CardView&gt;
          &lt;/LinearLayout&gt;
      &lt;/android.support.v4.widget.NestedScrollView&gt;
  
      &lt;android.support.design.widget.FloatingActionButton
          android:layout_width=&quot;wrap_content&quot;
          android:layout_height=&quot;wrap_content&quot;
          android:layout_margin=&quot;@dimen/fab_margin&quot;
          android:clickable=&quot;true&quot;
          android:src=&quot;@android:drawable/ic_menu_send&quot;
          app:layout_anchor=&quot;@id/appbar&quot;
          app:layout_anchorGravity=&quot;bottom|right|end&quot;/&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  <p>###MyFragment.java</p>
  <pre><code>public class MyFragment extends BottomSheetFragment {
  
      @Nullable
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
          final View view = inflater.inflate(R.layout.fragment_my, container, false);
          view.setMinimumHeight(getResources().getDisplayMetrics().heightPixels);
          CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) view.findViewById(R.id.collapsing_toolbar);
          collapsingToolbar.setTitle(&quot;AAA&quot;);
          final Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
          final AppCompatActivity activity = (AppCompatActivity) getActivity();
          activity.setSupportActionBar(toolbar);
          activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
          //toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
          toolbar.setNavigationOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  NavUtils.navigateUpFromSameTask(getActivity());
              }
          });
          final ImageView imageView = (ImageView) view.findViewById(R.id.backdrop);
  
          Glide.with(this).load(R.drawable.cheese_1).centerCrop().into(imageView);
          return view;
      }
  }
  </code></pre>
  <p>###BottomSheetFragmentActivity.java</p>
  <pre><code>public final class BottomSheetFragmentActivity extends AppCompatActivity {
  
      protected BottomSheetLayout bottomSheetLayout;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_bottom_sheet_fragment);
          bottomSheetLayout = (BottomSheetLayout) findViewById(R.id.bottomsheet);
          findViewById(R.id.bottomsheet_fragment_button).setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  new MyFragment().show(getSupportFragmentManager(), R.id.bottomsheet);
              }
          });
          bottomSheetLayout.setShouldDimContentView(false);
          bottomSheetLayout.setPeekOnDismiss(true);
          bottomSheetLayout.setPeekSheetTranslation(200);
          bottomSheetLayout.setInterceptContentTouch(false);
          bottomSheetLayout.setDefaultViewTransformer(new BaseViewTransformer() {
              @Override
              public void transformView(final float translation, final float maxTranslation, final float peekedTranslation, final BottomSheetLayout parent, final View view) {
                  Log.d(&quot;AppLog&quot;, &quot;translation:&quot; + translation + &quot; maxTranslation:&quot; + maxTranslation + &quot; peekedTranslation:&quot; + peekedTranslation);
              }
          });
      }
  }
  </code></pre>
  <p>It almost works well. The only problem is the transition from #3 back to #2:</p>
  <p><a href="https://i.stack.imgur.com/zvmR4.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvmR4.gif" alt="enter image description here" /></a></p>
  <h2>The question</h2>
  <p>What is wrong with the code? What can I do in order to achieve the required behavior?</p>