Barra de herramientas para colapsar como Google Play Store

Quiero implementar una barra de herramientas que se derrumbe como google Play Store. He alcanzado la funcionalidad un poco, pero que sólo funciona para la pantalla de retrato. Aquí hay una muestra de captura de pantalla de lo que pude hacer.

Introduzca aquí la descripción de la imagen

Ahora lo que quiero hacer es cuando cambio mi orientación del dispositivo al modo de LandScape que debe mirar exactamente como esto.

Introduzca aquí la descripción de la imagen

Así que lo que mi principal pregunta es cómo manejar estos cambios de orientación. ¿Hay algún componente oficial de android disponible que puede hacer este tipo de cosas o tendré que Z-indexar mis diseños para lograr este tipo de comportamiento de diseño. Tenga en cuenta que quiero que el diseño sea exactamente igual a esto con márgenes en ambos lados e indexación de Z en la parte superior de la imagen también el comportamiento de desplazamiento debe ser exactamente igual que Google Play Store.

Estoy adjuntando mi muestra xml que he escrito hasta ahora.

<?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:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" 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:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <com.group3amd.materializeyourapp.widgets.SquareImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/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> <android.support.v4.widget.NestedScrollView android:id="@+id/scroll" android:layout_width="match_parent" android:layout_height="match_parent" android:clipToPadding="false" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" app:cardElevation="@dimen/spacing_medium" app:cardUseCompatPadding="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:textAppearance="@style/TextAppearance.AppCompat.Headline" /> <TextView android:id="@+id/description" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_large" android:text="@string/lorem_ipsum" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout> </android.support.v7.widget.CardView> </FrameLayout> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" style="@style/FabStyle" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout> 

En este bastante similar problema: colapsar el diseño de la barra de herramientas como google play store , encontraría una respuesta como a continuación:

Ver dentro de CollapsingToolbarLayout no es necesario establecer la app:layout_scrollFlags . Sin efecto. Base en mi código, cambiar la app:layout_scrollFlags en CollapsingToolbarLayout a app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" y establecer minHeight para ello.

Como su barra de herramientas es "pin" , por lo que enterAlwaysCollapsed lo llamará cuando se desplace hacia abajo.

 <android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:focusableInTouchMode="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/seffafCollapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="240dp" android:minHeight="?attr/actionBarSize" app:expandedTitleMarginEnd="164dp" app:expandedTitleMarginStart="148dp" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <ImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/haber_icerik_resim" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/haber_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:theme="@style/ToolbarColoredBackArrow" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/newsRecyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" android:clickable="true" android:background="@color/mainBackground" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

En el comentario a ese post, también encontraría una pista:

Agrega la app:contentScrim="?attr/colorPrimary" a tu app:contentScrim="?attr/colorPrimary" . No es necesario dos barras de herramientas para implementar este efecto

EDIT: Aquí encontrarás una entrevista con un chico responsable de Google Play Store, que está hablando de cómo construir el diseño en Play Store App:

[UDACITY] Entrevista con Kirill Grouchnikov, parte 1

[UDACITY] Entrevista con Kirill Grouchnikov, parte 2

Espero que ayude

  • Cómo utilizar selectores para cambiar iconos con el nuevo TabLayout
  • Cómo deslizar las pestañas de la barra de herramientas mediante el diseño del material
  • AppBarLayout no siempre vuelve a entrar en desplazamiento hacia abajo
  • No se muestra la elevación de Android de View en CardView
  • Efecto de ondulación de material oculto por otra vista en el diseño
  • Diseño del material: Nav Ancho del cajón
  • Cómo configurar un efecto ripple en textview o imageview en Android?
  • Diseño de material android con AppCompatActivity
  • Cómo hacer que TextInputLayout asigne rojo asterisco para los campos obligatorios
  • Android: Theme.Material.Light requiere el nivel API 21 (el min actual es 8)
  • ¿Cómo usar el diseño de material ProgressBar en los dispositivos pre Lollipop?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.