come implementare crollare visualizzazione dell'immagine come Google IO 2015 App utilizzando Design Library

Question

Come implementare collasso progettazione del layout della barra degli strumenti come Google IO 2015 con le Design Library

In Open Source di Google IO 2015, non è implementato utilizzando design Biblioteca (CoordinatorLayout, CollapsingToolbarLayout ecc)

Nota: in questo la barra degli strumenti è in fondo nella parte superiore. Ho bisogno della barra degli strumenti per scorrere come in questo allegato con lo textview o qualsiasi altro view della sezione superiore.

Answer 1

Infine sono stato in grado di attuarla.

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.vipul.myapplication.ScrollingActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:elevation="6dp" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:background="@drawable/placeholder" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax"/> 

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

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:clipChildren="false" 
      android:clipToPadding="false"> 

      <android.support.v7.widget.Toolbar 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:id="@+id/toolbar" 
       app:title=" " 
       app:popupTheme="@style/AppTheme.PopupOverlay"/> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="?attr/actionBarSize" 
       android:layout_marginLeft="60dp" 
       android:layout_marginStart="60dp" 
       android:layout_marginRight="16dp" 
       android:paddingTop="8dp" 
       android:paddingBottom="8dp" 
       android:orientation="vertical"> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/app_name" 
        android:textColor="#FFF" 
        android:textSize="18sp" /> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="5dp" 
        android:text="@string/app_name" 
        android:textColor="#FFF" 
        android:textSize="16sp" /> 

      </LinearLayout> 

     </FrameLayout> 

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

    <!--<include layout="@layout/content_scrolling" />--> 

    <android.support.v4.widget.NestedScrollView 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"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="@dimen/text_margin" 
      android:text="@string/large_text" /> 

    </android.support.v4.widget.NestedScrollView> 

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

Answer 2

Il codice qui sotto vi fare quello che vuoi fare:

<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:layout_width="match_parent" 
    android:layout_height="192dp" 
    android:fitsSystemWindows="true" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     app:expandedTitleGravity="bottom|center_horizontal" 
     app:contentScrim="@android:color/holo_blue_dark" 
     app:expandedTitleMarginBottom="32dp" 
     app:expandedTitleMarginEnd="64dp" 
     app:expandedTitleMarginStart="48dp" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <ImageView 
      android:id="@+id/header" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/header" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax"/> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/anim_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_collapseMode="pin" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 
    </android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 

// The rest of the content goes here... 

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

Go here per ulteriori informazioni sulla libreria di design materiale