Vista de desplazamiento superpuesta con AppBarLayout

Quiero implementar el patrón de "espacio flexible con superposición de contenido" de las técnicas de desplazamiento de diseño de material , como en este vídeo : Espacio flexible con contenido superpuesto GIF

Mi diseño XML ahora se ve así:

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="192dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <....> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> 

¿Hay una manera fácil de lograr esto usando la Biblioteca de Diseño? ¿O tengo que construir un CoordinatorLayout.Behavior personalizado para hacer esto?

De hecho, la superposición de la vista de desplazamiento con AppBarLayout es una característica incluida de la Biblioteca de soporte de diseño de Android : puede utilizar el atributo app:behavior_overlapTop en su NestedScrollView (o cualquier vista que utiliza ScrollingViewBehavior ) para establecer la cantidad de superposición:

 <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" app:behavior_overlapTop="64dp"> 

Tenga en cuenta que app:behavior_overlapTop sólo funciona en las vistas que tienen la app:layout_behavior="@string/appbar_scrolling_view_behavior" ya que es el Comportamiento que está utilizando el atributo (no View o Parent ViewGroup) behavior_ prefijo.

O programarlo mediante setOverlayTop () :

 NestedScrollView scrollView = ... CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams(); AppBarLayout.ScrollingViewBehavior behavior = (AppBarLayout.ScrollingViewBehavior) params.getBehavior(); behavior.setOverlayTop(128); // Note: in pixels 

Además de la respuesta aceptada , llame a setTitleEnabled (false) en su CollapsingToolbarLayout para que el título permanezca fijo en la parte superior como en el ejemplo.

Me gusta esto:

 CollapsingToolbarLayout.setTitleEnabled(false); 

O añadiéndolo en xml como este:

 app:titleEnabled="false" 

De lo contrario, el título podría desaparecer detrás del contenido superpuesto, a menos que, por supuesto, ese es el comportamiento que desea.

  • Las transiciones de elementos compartidos no funcionan cuando se combinan con un CoordinatorLayout y CollapsingToolbarLayout
  • Error al inflar la clase CollapsingToolbarLayout
  • CollapsingToolbarLayout comportamiento de desplazamiento en las tabletas
  • Barra de herramientas de colapso animado suave con Android Design Support Library
  • Cómo eliminar programaticamente un comportamiento de diseño de mi NestedScrollView?
  • CollapsingToolbarLayout | Aspectos de desplazamiento y diseño
  • Clickable CardView dentro de NestedScroll no activa el desplazamiento
  • Cómo ocultar la barra de herramientas después de colapsar mientras que recyclerView desplazamiento hacia abajo
  • Collapsing Toolbar con la imagen de url?
  • Utilizar windowTranslucentStatus con CollapsingToolbarLayout
  • Detener desplazamiento en CollapsingToolbarLayout para que no se derrumbe completamente
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.