android - layout_collapsemode - Uso de windowTranslucentStatus con CollapsingToolbarLayout

coordinatorlayout animations

Question

Estoy tratando de obtener un efecto similar al que se ve en Google Play.

Tengo el siguiente diseño para mostrar una barra de herramientas transparente con una imagen detrás. Cuando el usuario se desplaza, hay un efecto de paralaje en la vista de imagen a medida que se desplaza fuera de la pantalla. La barra de herramientas regresa cada vez que el usuario se desplaza hacia arriba, y la vista de imagen solo regresa cuando el usuario llega al límite de la lista.

Todo esto funciona muy bien.

<android.support.design.widget.CoordinatorLayout
android:id="@+id/main"
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.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="@color/background_material_dark">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:statusBarScrim="#09b"
app:contentScrim="#09f">
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/location_banner"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

La cuestión

Cuando establezco windowTranslucentStatus en true. El contenido de la vista sube hasta debajo de la barra de estado, pero el contenido de CollapsingToolbarLayout sube dos veces la altura de la barra de estado (CollapsingToolbarLayout conserva la altura correcta).

Esto significa que parte de la parte superior de la imagen se corta y la barra de acción ahora aparece debajo de la barra de estado en lugar de debajo de ella. Como un efecto secundario de esto, ahora hay relleno en la parte inferior de CollapsingToolbarLayout de la misma altura que la barra de estado

Esto es lo que parece sin windowTranslucentStatus. Todo aqui funciona bien

windowTranslucentStatus establecido en true

Usuario desplazándose hacia arriba desde abajo en la lista (no en la parte superior)

Answer 1

Agregue fitSystemWindows al diseño y establezca en verdadero.

Actualizar

Lo siento por mi respuesta incompleta. Debería agregar fitsSystemWindows = "true" al diseño xml como los códigos a continuación.

<android.support.design.widget.CoordinatorLayout
android:id="@+id/main"
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.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="@color/background_material_dark"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:statusBarScrim="#09b"
app:contentScrim="#09f"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/location_banner"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Answer 2

Ahora ha habido una actualización de la biblioteca de diseño. Supongo que el problema publicado anteriormente fue un error.

Si actualiza la biblioteca de diseño a la última versión, este problema ya no ocurre.

Ahora he quitado todos los ajustes fitSystemWindows = "true" excepto el ImageView (ya que debe mostrarse debajo de la barra de estado).

También he eliminado el relleno negativo de la barra de herramientas.

Este es mi tema para mayores de 21 años.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:textColorPrimary">@android:color/white</item>
</style>

Todo funciona como se espera ahora.

Answer 3

Extienda el CoordinatorLayout y llame a setOnApplyWindowInsetsListener en su constructor para restablecer los valores de inserción. Aquí está el código:

public class CustomCoordinatorLayout extends CoordinatorLayout {
public CustomCoordinatorLayout(Context context) {
super(context);
init();
}
public CustomCoordinatorLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomCoordinatorLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT_WATCH) {
setOnApplyWindowInsetsListener(new OnApplyWindowInsetsListener() {
@Override
public WindowInsets onApplyWindowInsets(View view, WindowInsets windowInsets) {
WindowInsets replaced = windowInsets.replaceSystemWindowInsets(0, 0, 0, 0);
return replaced;
}
});
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}

Answer 4

La mejor manera de lograrlo es como dijo Stimsoni.

Agregue android: fitsSystemWindows = "true" a CoordiatorLayout, AppBarLayout e ImageView

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="@+id/background"
android:layout_width="match_parent"
android:layout_height="256dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:alpha="0.75"
android:src="@drawable/foo"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>...

Answer 5

Solo cambia el color de la barra de estado en Styles.XML (v21)

<item name="android:statusBarColor">@android:color/transparent</item>

o eliminar la línea anterior en ese XML funciona perfecto.

Answer 6

Tengo el mismo problema, pero hay una cosa que sé.

Si tiene que tener una barra de estado transparente en una barra de herramientas normal, debe agregar una tapa de relleno de 16 pd.

Answer 7

Una vez que la barra de estado es transparente y la actividad la puede utilizar libremente, la barra de herramientas se empuja hacia arriba para ocupar ese espacio. Para solucionar este problema, debe mover manualmente la barra de herramientas al lugar original.

Agregue las siguientes etiquetas a la vista "android.support.v7.Widget.Toolbar":

android:layout_height="48dp" // Whatever the height of the toolbar you want
android:layout_marginTop="-48dp" // Negative of the height of the toolbar